Headers are the first part of your website seen by a visitor. It’s vital because a header is where you add brand identity, good navigation and messages about a site’s core intent. Newspaper comes with a new way to customize your header right on the front-end with the Header Manager.
With this feature, you can have different Headers for every page of your website.
! Important note – You need to have the tagDiv Composer and Cloud Library plugins active in order to use the header manager.
In order to use the Header Manager, you will need to know the tagDiv Composer basic functionality so please learn how to use the tagDiv Composer first.
How to create a new header?
Step 1 – Start by pressing the add new template button from the Cloud Library plugin. You will be taken to a list of all templates that can be imported.
Step 2 – Select the headers section and pick the one that suits your project best. You can choose a premade template or a blank template of you want to start fresh. Select the template and press “create template”.
Step 3 – Once the import process is done, you have to press the “done button”
Step 4 – Press the “Escape key” on your keyboard to access the header manager. Then choose the specific zone you wish to edit. The Header manager has 4 zones it can handle separately in this order:
- Desktop – handles the standard desktop header.
- Desktop Sticky – handles the desktop sticky header section. If you do not need a sticky header, simply delete all content from this zone.
- Mobile – handles the standard mobile header.
- Mobile Sticky – handles the mobile sticky header section. If you do not need a sticky header for mobiles, simply delete all content from this zone.
Clicking on each section lets you see how they look like on your website.
Step 5 – Add or remove content from each zone in order to show or remove specific elements from your header.
You can use all shortcodes available in the tagDiv Composer list to create your header including the specific header shortcodes created for the header manager.
If you don’t want a menu, either on desktop or mobile, or you do not want it to become sticky while the visitor is scrolling, you need to clear the row in the Header for each of the zone you want removed, so it does not contain any elements
How to use the newly created header?
You just created the perfect header. Now it is time to apply it to your website. You can do this in more than one way.
The first and most obvious is to apply it to the entire site at once using the theme panel header section. Simply select the header template from the dropdown list and you are done.
But what if you want to have different headers on different parts of your site?
In this case you can select the header directly from the tagdiv composer when editing the page or template. The cloud library allows you to edit all default WordPress templates using the tagDiv Composer page builder. By doing so, you can select a specific header for each template in particular.
Press the escape key in the composer and you will be taken to the tagDiv Composer welcome screen where you can select the header you want for the page you edit are currently editing.
You can even import or edit a header directly on the page so not only can you have separate headers for separate pages or templates, but you can also edit the header directly on the page having even more in depth control over the content shown.
Having seen the 4 zones of the Header Manager, you’re now ready to tackle making the Header for each one by yourself! Start small, with simple elements and ideas then think bold and grow your design through it.
Create amazing layouts for your site and choose the one you want to show on each template in particular. The new Header Manager allows infinite possibilities to style your website.