Header Layouts

Travelscape Pro offers multiple custom header layout options to extensively customize your Site Header.

To configure the pagination settings, follow these steps:

Navigate to Dashboard > Appearance > Customize > Site Header >> Header Layouts

Here’s a step-by-step tutorial on how to use these features:

Accessing Header Layouts Settings:

• Log in to your WordPress admin dashboard.
• Navigate to Appearance > Customize.
• In the Customizer, select the Site Header option, then click on Header Layouts.

Primary Header Layout:

Select Layout: Use the dropdown menu under Primary Header Layout to choose the layout for your header. Travelscape Pro Comes with 6 Distinct Header layouts and a Transparent Layout.

Header Container Size:

• Contained: Choose Contained to keep the header width within the main content width of your site.
• Full Width: Select Full Width to make the header stretch across the entire width of the browser window.

Enable Top Bar:

Toggle the switch to Enable Top Bar. This adds a top bar above the header where you can display additional information or navigation items.

Enable Sticky Header:

Toggle the switch to Enable Sticky Header. This makes the header stick to the top of the screen as you scroll down the page, keeping the navigation visible at all times.

Enable Primary Menu:

Toggle the switch to Enable Primary Menu. This activates the primary navigation menu in your header.

Enable Search Form:

Toggle the switch to Enable Search Form. This adds a search form to your header, allowing visitors to search your site directly from the header.

Header Button:

• Button Label: Enter the text you want to display on the header button in the Button Label field (e.g., “Learn More”).
• Button URL: Enter the URL where the button should link to in the Button URL field (e.g., “https://example.com”).
• Open in New Window: Toggle the switch to Open In New Window if you want the link to open in a new browser tab.

Contact Info:

• Email Address: Enter the email address you want to display in the header in the Email Address field (e.g., “[email protected]”).
• Phone Label: Enter a label for the phone number in the Phone Label field (e.g., “Call Us: 123-456-7890”).
• Phone Number: Enter the phone number you want to display in the header in the Phone Number field (e.g., “123-456-7890”).

Publishing Changes:

Once you have made all your changes, click the Publish button at the top of the customizer to save and apply your changes to your website.

By following these steps, you can customize the header layout of your WordPress website, including the header’s primary layout, container size, top bar, sticky header, primary menu, search form, header button, and contact information.