HEADERS AND FOOTERS

Headers

The header is the part of your site that contains the logo and navigation. There are a lot of different ways to control the style of your header to help you create an appealing header for your site.

The mobile header has a fixed design, and cannot be customized. To change the content of the mobile header:


  1. On the top navigation bar, click Mobile view & edit.
  2. Click the content in the header to edit.


Header Types

There are three types of headers available—flexible, fixed, and sticky.


Flexible Headers

In order to customize a header, it must be turned into a flexible header by turning the header into a row. In most templates, the header is a row by default. However, in certain older templates, the header is fixed with limited customization options. Templates with fixed headers typically include certain widgets, such as social media links or a phone number in the header by default. However, these widgets are fixed and cannot be moved like widgets in normal rows. By turning the header into a row, you can add or edit widgets in the header.

Note

If you have turned your header into a flexible header and later decide that you want your header to be fixed, you will not be able to change the header back.

To set a header to be flexible and convert the header into a row:


  1. Hover over the header, and click Header.
  2. On the Content tab, click the Convert header to a row toggle.
    In most new templates, the header is a row by default, so you are only likely to run into this issue when using older templates that still have fixed headers.


Fixed Headers

In some of our older templates, headers are fixed. This means that the header contains the logo, navigation, social icons and text, but is locked and cannot be customized by adding widgets from the Widgets section.


Shrinking Headers

The Shrinking Header is a smaller version of the site header, enabling you to keep important navigation information fixed without distracting users as they scroll down a page and without taking up too much space. It acts as a sticky header feature but condenses the size of the logos and other widgets in your header. It is particularly useful in sites that have large headers and sites that are designed for long scrolling.

The shrinking header is available on Desktop and Tablet views. Shrinking headers can only be toggled when the header is turned into a row. If the header is not a row and the template has a fixed header, the shrinking header option is not available. For more information, see Headers.

For more information on how to configure shrinking headers, see Shrinking Headers.


Header Layouts

To change the header layout:


  1. Hover over the header and click Header.
  2. On the Design tab, select a new header layout. Switching to one of these layouts changes fixed headers into flexible headers. Using pre-designed headers helps save time in designing your site. You can always select a layout and then modify it afterward.

Note

Selecting one of these layouts removes any existing content from the header section, so ensure you have a backup before selecting these options. When using one of these layouts the header becomes flexible and are not able to switch back to a fixed header.


Sticky Headers

To make a header sticky, hover over the header, click Header, and select Set As Sticky Header. The header becomes static and stays in place when you scroll through pages in your site.


Hide Headers

To hide a header on a page:


  1. Hover over the bottom of the header, and click Header.
  2. Click Hide page header on, and select the device you want the header hidden on.


Header Logo

If the header contains one image, the logo of the site will be kept when moving between header layouts. In the case there is more than one image, or the logo is textual, the logo image is kept as in the layout.

If you delete the logo, re-add the image by dragging the image element back into the header, and set the link to go back to the homepage. For more information, see Image Widget.



Other Header Options

There are other header options available in the design menu, which let you further customize the look of your header.

To access the header design menu, hover over the header, click Header, and then click the Design tab.

To display header items above hero images, click Overlap first row. This gives your hero images more visibility and makes it easier to design great-looking, trendy sites. Keep the following in mind:


  • For the header. Set the background color to transparent, or a color with opacity.
  • For the first row. Use top padding that is equal to or similar to the height of the header.

When switching to a new header layout that contains social icons, the icons are displayed as defined in the content library. If there are no social links, the social icons are kept generic as in the layout.


Header and Expandable Menu

You can add an expandable menu on your desktop and tablet sites, making it easy to create modern sites that have great design flexibility. Choose from several expandable menu layouts, and customize them as you like, adding widgets, rows, and columns.

The expandable menu layout for mobile offers more customizations and a way to display widgets in the header and a menu that is always visible.

You can change the layout of the header to a predefined layout that includes buttons, click to call, store cart, social icons, and more. You can add any widget to the expandable menu from the widgets panel.


Desktop and Tablet

Select the Expandable Menu Layout

To select an expandable menu layout for your site:


  1. In the left panel, click Design.
  2. Click Site Layout.
  3. In the Desktop section, select Expandable menu layout.
  4. In the Tablet section, select the layout on the left.


Desktop and Tablet Header

After selecting the expandable menu layout, a hamburger icon displays in your site header. Click the hamburger () icon to see the expandable menu.

To edit location of the expandable menu in the header:


  1. Hover over the header, click Header, and then select Edit Design.
  2. In the Layout section, click Left or Right.


Desktop and Tablet Expandable Menu

To configure the expandable menu:


  1. Click the hamburger () icon to open the Menu Design editor.
  2. On the Layout tab, click the existing layout to select a menu layout.
  3. On the Style tab, you have the following options:
  • Enter from. Select Top or Side.
  • Entrance effect. Select Cover or Push.
  • Width. Move the slider to set the width of the expandable menu when expanded. The width of the menu is defined in percentages to fit all screen sizes.
  • Background. Configure the background color or image.
  • Close icon color. Select a color for the close icon, and close icon background color.
  1. On the Spacing tab, change the padding.

The expandable menu can have up to 3 rows, and each one is fully customized.

Note

If the Desktop and Tablet have the same site layout (both expandable or both top bar), all customizations are the same for both. In case they are different, each device needs to be defined separately.

If you do not see the header features mentioned above, you may be using the old header. To update to the new header, click the header in desktop and tablet view. An automatic backup is created when you update the header.

Note

This step only applies to existing sites. It does not pertain to new sites.


Mobile Header

To edit the mobile header:


  1. Hover over the header, click the Header label, and then select Edit Design.
  2. On the Layout tab, click the existing layout to select a menu layout. The mobile header offers layouts that display widgets such as social links, phone numbers, and more. The header layouts are fixed, so you cannot add new widgets, but you can edit or remove them.
    When you add a store or use the multi-language feature, more layout options are available that include the icons for the store shipping cart and the multi-language feature. If you do not have the store or multi-language enabled, these layouts do not appear.
  3. Click Left or Right for the Menu icon position.


Mobile Navigation

To edit the expandable menu, open the menu in mobile view. The menu editor automatically opens for you to edit.


  1. On the Layout tab, click the existing layout to select a menu layout. The expandable menu offers multiple layouts that can display the social links, contact information and more. You can add any widget to the expandable menu, add columns, sort the columns to be next to each other or on top of each other. However, when you switch from one layout to another, it deletes all content that you added into the menu, taking only the widgets in the chosen layout.
  2. On the Style tab, you have the following options:
  • Enter from. Select Top or Side. When Top is selected, move the height slider. When Side is selected, move the width slider.
  • Entrance effect. Select Cover or Push.


Updates to Mobile Layouts

On September 8th, 2019 three mobile layouts were removed as they were not used very often. The two remaining layouts are more up to date and useful.

If you already have a site with one of the layouts that was removed and you select another layout, the layouts that have been removed will disappear, but you will be able to restore them from site backup.

To update the new mobile view header, click the header in mobile view. An automatic backup is created when you update the header.

Note

This step only applies for existing sites, it does not pertain to new sites.


Shrinking Headers

The Shrinking Header is a smaller version of the site header, enabling you to keep important navigation information fixed without distracting users as they scroll down a page and without taking up too much space. It acts as a sticky header feature, but condenses the size of the logos and other widgets in your header. It is particularly useful in sites that have large headers and sites that are designed for long scrolling.

Once the user scrolls passed the header height, the header shrinks.


  • If columns have one visible widget, the widget is centered inside the column vertically and the top/bottom padding and margins are set to 0.
  • If columns have more than one visible widget, the widgets are not aligned vertically and the top/bottom padding and margins are set to 10px.
  • If there are empty rows with columns, the columns span the entire space of the row.
  • To handle templates with a minimum height value in the header, the min-height of the header is set to auto.


To edit the design of a shrinking header:


  1. Hover over the header, click Header, and then click Edit Design.
  2. On the Shrinking Header tab, click the Enable shrinking header toggle. You have the following options:
  • Show navigation row only. Only display the row with navigation when the header shrinks. This feature is only applicable if there is more than one row in the header.
  • Background color. Change the background color of the shrinking header. Note that the row background color overrides the shrinking header background color.
  • More header colors on scroll. Specify colors for the text, selected link & hover, icons, button text, and more.
  • Logo size. Change the size that the logo or image shrinks to when the header shrinks (default is 66%).
  • Change logo on scroll. Select a logo to display on scroll.
  • Header spacing. Adjust the top and bottom padding of the shrinking header. You can change the header spacing per device.

When the shrinking header is activated:


  • The site scrolls down in order to display the shrinking header logo and effects.
  • The sticky header feature is automatically applied to the header.
  • The header spacing changes the top/bottom padding, and margin to 0.
  • Note
  • This changes the padding and margin of the header, and not the rows inside the header.
  • Images in the header shrink to the percentage in the logo size bar (default is 66%).
  • Switching the header layout does not change the shrinking header settings.
  • Not all widgets are compatible and appear in the shrinking header. The following widgets display in a shrinking header:
  • Navigation
  • Multi-Language widget
  • Social Icons
  • Click to Call button
  • OpenTable button
  • Click to Email button
  • vCita
  • PayPal button
  • FaceBook Like button
  • Images and Logos
  • Store Cart
  • Paragraph widgets
  • Title widgets
  • Buttons

NoteS


  • You cannot edit widgets when the header is shrunk.
  • The design properties override the shrinking header properties. For example, if you set a row background in the header, the row background displays over the shrinking header background.
  • If you have a widget in the header that is not compatible with the shrinking header, an empty column appears in place of the widget.
  • Empty rows are displayed in the shrinking header.
  • If you cannot see your shrinking header, it may be because you do not have enough rows on your site to be able to scroll down on the site and trigger the shrinking header. If you only have one row on the page, the site will not scroll.

Footer

The footer is the last row on the bottom of your site, and is the same on each page of your site. Footers are a convenient way to make sure your site visitors have access to important links like terms of service, privacy policy, or social media, regardless of the page they are visiting. In addition to legal links, the footer is a good place for copyright information and general contact information.

Customize the Footer

To customize the footer:


  1. Hover over the top of the footer, and click Footer.
  2. On the Style tab, adjust the footer background by selecting a color or an image. You can also select a border style and thickness.
  3. To adjust the padding or margin, click the Spacing tab.

Hide Footer

To hide the footer:


  1. Hover over the top of the footer, and click Footer.
  2. Click the Hide footer on this page toggle.
Share by: