Changing your templates Masthead for a different layout - A better eCommerce Platform for B2B+B2C - Website World

Changing your templates Masthead for a different layout

If you're using one of the newer Contentbox-based templates, you can use the Contentbox editor to change the masthead to a different layout. This is useful if you like your current template but want to change the way the logo, navigation menu and other masthead elements are arranged.

WARNING editing your template could potentially damage your website layout. If you are not confident editing templates, or using HTML and CSS you should look to test things out on a trial site first, or make use of the BACKUPS button to restore an old version if needed.

Opening the Template Designer

To edit your template:

  1. Click DESIGN.
  2. Under Custom Design, click Template Editor
  3. You'll see a list of your templates, along with the pages each template is assigned to.

By default, pages will use TEMPLATE A, unless the page has been manually assigned a different template or a different layout has been specified in the template's default content. Press the Edit button next to the template you are going to change. 

Changing your Masthead

In the example below we will change from the default MODERNA 3 column layout to a two column LOGO / MENU layout.

Example MODERNA masthead layout

1. Find the Masthead Contentbox

In the Template Design area, you'll see a series of Contentbox sections.

Find the Contentbox containing the masthead, logo and menu [TAGS].

This is where the current masthead layout is controlled.

2. Add a New Masthead Snippet

Add a new Snippet block to the Contentbox.

A snippet selection window will appear.

In the left-hand sidebar, click TEMPLATE SNIPPETS.

3. Choose Your New Masthead Layout

In the main window, look for the section called MASTHEAD LAYOUTS.

This contains the preset masthead layouts available for your template.

Layouts may contain one, two or three columns. The | symbol indicates where a second or third column is used.

For example:

Logo | Menu

creates a two-column masthead with the logo in one column and the menu in another.

Select the masthead layout you want to use.

The Logo | Menu snippet is shown highlighted above.

4. Position the New Masthead

The new masthead snippet will be added to the Contentbox.

If it hasn't been added in the correct position automatically, move it so that it sits in the same location as the existing masthead.

Once the new masthead is in the correct position:

  1. Delete the old masthead snippet block.
  2. Check that the new masthead is positioned correctly.
  3. Save your changes.
  4. Publish if ready to be seen on live site.

Your template will now use the new masthead format.

Showing the template with the new masthead format.


Advanced Masthead options via the Header Settings Popup

Masthead snippets also include a HEADER SETTINGS option, giving you additional control over how your masthead behaves.

Depending on the template, these settings can control things such as:

  • Whether the masthead sticks to the top of the screen
  • Whether the masthead overlays page content
  • How masthead elements are positioned on mobile devices
  • Other responsive header behaviour

For more information, see Header Settings.

Tip

If you're experimenting with different masthead layouts, a trial site is a great place to test them first. It allows you to try different combinations without affecting your live website.


FAQ Topics

Search for help:

> بيت