Headers and footers

The website header is the top section of a web page and usually contains elements such as the logo, the menu, the search bar, the sign-in/customer account button, etc. The footer is displayed at the bottom of a web page and usually contains information such as contact details, links, legal notices, and other options.

Header design

To modify the header’s design, click on Edit, then click on the header. The following options are available in the Header section of the Customize tab in the website editor:

• Choose a Template from the drop-down menu.

• Select Background settings to change the color palette through different Theme styles, Custom color options, and Gradient ones.

• When adding a Border to the header, its size, style, and color can be defined.

• Adapt Round corners to fit the design.

• Add a Shadow and define its Color, Offset, Blur, and Spread.

• Add a Scroll Effect. Hover on an effect to preview it.

• Choose the Header Position between Regular, Hidden, and Over The Content. When Over The Content is selected, you can customize the Background and Text Color.

• Show or hide Elements such as text, the search bar, Sign in button, social media links, Contact us button, and logo.

To finalize changes, click on Save.

Suggerimento

To hide the header, click on Edit, click on the header, and go to the Theme tab of the website editor. Scroll down to the Advanced section and toggle the Show Header switch to hide/show the header.

Header content

Menus organize the header’s content and help users navigate through web pages effectively. User-friendly and well-structured menus also play a crucial role in improving search engine rankings.

Menu editor

The menu editor allows to edit the website’s header and add menu items and mega menus.

To edit the header’s content, go to Website ‣ Site ‣ Menu Editor. From there, you can:

• rename a menu item or change its URL using the Edit Menu Item icon;

• delete a menu item using the Delete Menu Item icon;

• move a menu item by dragging and dropping it to the desired place in the menu;

• create a regular drop-down menu by dragging and dropping the sub-menu items to the right, underneath their parent menu.

Nota

You can also access the menu editor by clicking Edit, selecting any menu item, and clicking the Edit Menu icon.

Adding menu items

By default, pages are added to the menu as drop-down menu items when they are created. To add a new menu item, follow these steps:

1. Go to Website ‣ Site ‣ Menu Editor.

2. In the menu editor, click Add Menu Item.

3. In the pop-up window, enter the Name to be displayed in the menu.

4. Type / in the URL or Email field to search for a page on your website or # to search for an existing custom anchor.

5. Click OK.

6. Edit the menu structure if needed, then Save.

Menu item design

To modify the menu items, click on Edit, click on a menu item, then go to the Navbar section of the website editor. The following options are available:

• Adapt the Mobile Alignment.

• Choose the Font for the menu items.

• Change the font size, color, and alignment in the Format field.

• Select a Links Style to highlight the current page in the menu.

• Change the style of the header buttons.

• Choose to display the Sub Menus On Hover or On Click.

Nota

The fields available in the Navbar section can vary depending on the chosen template.

To finalize changes, click on Save.

Mega menus

Mega menus are similar to drop-down menus, but instead of a simple list of sub-menus, they display a panel divided into groups of navigation options. This makes them suitable for websites with large amounts of content or e-commerce websites, as they can help include all of your web pages or e-commerce categories in the menu while still making all menu items visible at once.

To create a mega menu, go to Website ‣ Site ‣ Menu Editor and click Add Mega Menu Item. Enter the Name of the mega menu in the pop-up, click OK, then Save.

To adapt the options and content of the mega menu, click on a mega menu item in the header, then click Edit. Mega menus are composed of building blocks, which means you can customize each component individually. For example:

• Edit the text directly in the building block.

• Edit a menu item’s URL by selecting the menu item and clicking the Edit link button in the small preview pop-up. Type / to search for a page on your website, or # to search for an existing custom anchor.

  

• Move a menu item by dragging and dropping the related block to the desired position in the mega menu.

• Delete a menu item by deleting the related block.

To adapt the general layout of the mega menu, go to the Customize tab of the website editor, then, in the Mega Menu section:

• Choose a Template.

• Pick the Size: either Full-Width or Narrow.

To finalize changes, click on Save.

Footer design

To modify the footer, click on Edit, click on the footer, and in the Footer section of the Customize tab in the website editor:

• Select a Template.

• Choose its Colors.

• Choose a Slideout Effect: Regular (i.e., no effect), Slide Hover, or Shadow.

• Toggle the Copyright switch to hide or show the copyright.

• Choose the Border size.

• Add a Shadow.

• Add a Scroll Top Button and choose its position.

• Hide or show the footer by toggling the Page visibility switch.

To finalize changes, click on Save.