Header

Page sections are used to set up and customize the main navigation area of your website, including elements such as the Logo, menu, and contact information. This setting allows you to adjust the overall layout and style of the page to align with your brand image and user experience needs.

Function Details

1. Basic Settings:

   • Color Scheme: Choose or edit the color scheme to define the color styles for all elements on the page, including background color, text color, etc. You can select or adjust according to your brand's visual style.

   • Logo:

     • Upload or change your website's Logo. It is recommended to use a high-resolution image to ensure clarity on various screen sizes.

     • Logo Width: Adjust the display width of the Logo using a slider to fit different page layout needs.

     • Logo Position: Choose the display position of the Logo on the page, such as “Logo on the left, menu below,” etc. Select the best position according to the page design to optimize the layout.

2. Menu:

   • Select Menu: Choose an existing menu as the main navigation menu or create a new one. The main navigation menu will appear at the top of the page to help users quickly navigate to the main content of the site.

   • Primary Menu Uppercase: Enable this option to display primary menu items in all uppercase, suitable for emphasizing and highlighting main menu items.

   • Menu Type (Desktop): Select the type of menu to display on the desktop, with options including “Dropdown Menu” and “Drawer Menu.”

   • Allow Hover to Open Menu: Enable this option to automatically expand sub-menus when users hover over menu items.

3. Fixed Header:

   • Fixed Header Type: Choose the type of fixed header, such as “Shrink Logo Size,” etc. The fixed header remains at the top as users scroll the page, making navigation easily accessible at all times.

   • Enable Transparent Header: Enable this option to make the header transparent, suitable for a more visually striking page design. Upload a transparent header Logo to match the transparent background.

4. Mobile Settings:

   • Mobile Logo Width: Adjust the Logo width on mobile devices to ensure clarity on smaller screens.

   • Show Contact Number: Enable this option to display the contact number on the header, making it easy for users to contact you directly.

5. Add Blocks:

   • You can add multiple content modules to the page sections using the “Add Block” feature, such as:

     • Mega Menu - Featured Images: Adds images to the navigation menu to enhance visual appeal.

     • Mega Menu - Custom Basic Menu: Create custom menu items suitable for complex navigation structures.

     • Mega Menu - Product List: Displays specific product lists in the menu, ideal for e-commerce site product promotion.

     • Mega Menu - Article List: Display a list of articles from a specific blog within the menu.

     • Bubbles: Used to mark hot-selling items, new products, etc., supporting text and icons.

Usage Suggestions

• Visual Consistency: Ensure the color scheme, Logo, and menu styles are consistent with the overall design of the website to enhance brand recognition.

• User Experience: Improve convenience in navigating the site through reasonable layout and fixed header features. Consider user habits and optimize the menu’s expansion method and content layout.

• Mobile Optimization: Ensure that the Logo, menu, and contact information are clear and easy to use on mobile devices.