How to Use the Headers and Footers Feature
The user interface of the Thrive editor has been upgraded!
Please, check out the changes here, before proceeding.
You can easily add headers or footers to your landing pages by using the Headers and Footers feature of Thrive Architect. Here is how to do this step by step:
In order to add a header to your landing page, first access the "Settings" menu by clicking on the gear icon, from the right sidebar:
Then, choose the "Global" section from the list of settings that appears in the sidebar:
In the "Global" settings, you will see that there are no headers added to your page yet. Click on the "Header" field to open it and start adding a header:
A pop-up window will open where you can either choose or create a header. If you have previously created a header, that will appear in the "Saved Headers" section.
In case you want to use that one, you can simply click on it and then, on the "Insert Header" button to use it:
However, if this is the first time you use this feature, then, the “Saved Headers” section will be empty.
In order to create a new header, go to the "Create New Headers" section, select one of the available templates and click on "Choose Header":
Type in a name for your header in the designated field and click on the “Add New Header” button to insert the header to the top of your landing page:
You can either edit the header or change it with another one by using the two buttons that appear in the sidebar:
With the help of the “Change Header” button you can easily change your header. If you click on this button, the same pop-up window will appear that you used after you have clicked on the “Add Header” feature.
With this button you can edit the header itself and the elements of the header separately as well.
After you click on it, you can select each element in part and use their sidebar options to customize them to your liking.
If you need detailed information on how to customize the various elements of the header (such as the "Custom Menu" or the "Icon") please consult the various tutorials we have here.
After you are done with customizing the individual elements, you can use the “Header Options” to customize the header itself:
The header position option allows you to either “Push the Content” or have the header overlay the content, which happens if you click on "Over Content". This second option is useful if you have a header with a transparent background for example.
Behaviour on Scroll
This option gives you the possibility to choose how your menu is displayed when visitors scroll on your page.
If you choose “Static”, the header will not move from its place when the visitors scroll.
With the “Sticky” option the header will be stuck to the upper part of the page even when visitors scroll down, so they can see it all the time.
Appear on scroll up
If you select this type of header, when visitors scroll down on your page, the header will disappear. However, when they start to scroll back up again, the header will reappear.
In order to see how these behaviors look like, you can save the header, then, save the page as well and preview it in all three instances.
Width and Height
You can also adjust the width and the height of the header by simply dragging the slider under these options or entering a value manually in the boxes next to them.
Adding a footer to your page can be done in the same manner. Go to "Settings" menu (just as shown in the first print-screen of this article) access the "Global" section and this time, click on the "Footer" field to open it and start adding a header:
Follow the same steps you took for the header. If you have any “Saved Footers” that you want to use, click on one of them and then, on “Insert Footer”:
However, if this is the first time you use this feature, then, click on the “Create New Footers” tab to access that section.
Select a template and click on “Choose Footer”. After that, just like with the header, you will have to give a name to your footer and add it to your landing page using the “Add New Footer” button:
You can use the “Change Footer” option to change the footer with another one. Again, this will open the same pop-up window that was open when you have clicked on “Add Footer”:
This button will allow you to edit the footer the same way that you have edited the header.
First, you can edit the elements of the footer directly by clicking on them and making the necessary adjustments using their specific sidebar options.
When you have finished with customizing the Footer elements individually, you can also use the "Footer Options" to bring some changes to your footer:
Width and Height
If you drag the slider under these options you can adjust the width and the height of your footer. You can also enter a value manually in the boxes next to these options.
This option will allow you to choose the vertical positioning of your footer. Simply, click on one of the three positions and your footer will be placed accordingly.
Note: An important aspect to keep in mind is that while you are editing a header or a footer, you cannot edit another element on your page. You need to “Save & Close the Header/Footer” first and only after you have done that, you will be able to continue editing other elements.
Headers & Footers - Global Elements
This feature is also very useful, because whenever you create and add a new header or footer to your landing page, you will be able to use them on every landing page you have.
You just have to follow the same steps as described above on the other landing page, and when you get to the “Saved Headers/Footers” section, simply select the header/footer that you have previously created in order to insert it to your page.
Since the Header & Footer are global elements you can manage them from your WordPress Admin dashboard as well.
Go to your WordPress Admin dashboard and then, to the Thrive Dashboard:
Scroll down to see the “Global Elements” card and click on the “Manage Global Elements” button:
Here, you are able to manage all your global elements. You will see separate tabs each of them:
If you click on the Headers or Footers section, you can use the available options to manage them. You can change their name (1), make a copy (2) or delete them (3) by clicking on the icons representing these options.
Furthermore, you can edit them as well, by clicking on the “Edit Header/Footer” button, which appears in the middle of the respective elements (4).
If you click on it, the header/footer will be opened in a separate editor and you can make the necessary changes. Since they are global elements, the headers/footers that you change will be synchronized and updated on every page that they are used on.
Last but not least, you can also create new headers or footers from here, if you click on the "Create New Header/Footer" button. (5)
Thus, you can save time and effort if you use the Header and Footer feature, as well as the other Global Elements.
Hopefully this article was useful for you. If so, please give us a smile below :)