Design Header & Footer

The design of your website header and footer is very important from both a visual perspective but also for calls to action. The editor gives you the ability to customize both your header and footer as you prefer. Watch the tutorial below for a visual representation of the topic! 



1. How to design Header & Footer

You build a header and footer in the Global Styling area just like you would build up pages - use the rows and columns system and add modules by dragging them into the designated area. There's not limits to the design! Just like with all other elements, the editor gives you the ultimate flexibility for designing and styling your header and footer so that it suits your website goals with a true unique look. 

 

1.1. Header/Footer & Different Languages

One interesting feature on headers and footers is, if you have designed a website in different languages, the editor allows you to differentiate footers for each language version, including adding different buttons, through the Button Module, different images, through the Image Module, and text, through the Text Module.

 

1.1.1. Example Differentiated Footers

Let's say your website supports both english and french. You want to be able to differentiate both language versions by adding a specific logo for each and adapting the language on the existing text. To do so, all you must do is add the relevant elements under the respective language. Follow the steps below for a quick visual representation of what you would have to do in this example:


Step 1: Add the English logo under the English page. 

 

Step 2: Add then English text under the English page.


Step 3: Navigate to the French version and add the French logo.


Step 4: Update or add the relevant text in French.


Et voilà! You can preview your site and you will find the differentiated footers depending on the language.


2. Header Options

2.1. Fix to Top

On the left side Menu, under Layout Settings the Header Option can be found. When selecting that option, a menu will show up where there is a possibility to Fix Header to Top. By enabling this option the header will be fixed to the top of your website and it will never disappear when the website is scrolled down.

Note: Although the setting is enabled, the fix header functionality will only be available in the previewed and published site.

 


2.2. Minify Header

Once you have enabled the Fix Header to Top option, a new option called Minify Header appears. When this option is enabled, no matter where you are in the page, by scrolling up the full header will show. 

 

Anything we’ve not covered?

Contact Us