Take the Tour to Explore the New Website Header Manager

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 Theme 9.5 update comes with a new way to customize your header right on the front-end with the Header Manager. Design, customize and explore amazing new options to stand out from the crowd.

Meet the new Header Builder

With this new feature, you can now have different Headers for every page of your website. Each of them customizable right through our front-end page builder. Let’s take a look! Open the tagDiv Composer on any page of your website, or even an empty page, then click the new Website Manager button.

A dialogue window should pop up that lets you choose the Header Template for the page. If you’ve already imported header templates from the Cloud Library, you can choose them from the drop-down menu. Otherwise, press the Import Template button to explore our selection of already designed Headers.

Browse through the gallery and choose the one you like, then import it. The Website Manager window contains 4 customization zones: the main menu, sticky main menu, mobile menu, and sticky mobile menu. Clicking on each section lets you see how they look on your website.

The ins and outs of the Header Builder

The On and Off button for the sticky desktop and mobile menu, in the Website Manager, helps you see how the sticky menu behaves while scrolling down the page. You can turn it off and on again so that you can keep customizing the page or header. However, just by deactivating the stickiness, does not mean that the menu stops being sticky. This UX option lets you keep editing the header, and test the sticky behavior only when you decide you are ready.

If you don’t want the menu, either on desktop or mobile, to become sticky while the visitor is scrolling, you need to clear the row in the Header, so it does not contain any elements. You can do this easily by hovering over it and then right-clicking and choosing the command Clear. For more information on how the right-click menu works visit our blog post.

How to customize the Header Builder

Do you want to create a brand new Header? Then, with the Website Manager open on a page, click the Import Template button. From the tagDiv Cloud Library, choose the blank Template. Close the Website Manager window and go to the Add Element section. Scroll to Header Shortcodes, drag and drop any of the following elements: Header Main Menu, Header Logo, Header Live Search, Header Login, Header Weather, Header Date.

Arrange the elements in whichever order you so desire. For starters, add the Logo, live search and main menu to the row. Write your website’s name in the Logo Text section, pick an appropriate icon, and write a tagline. For more information on how to create your Logo, check out this blog post.

The Main Menu item can display any WordPress menu, so go to your admin Dashboard and create the perfect menu to go well with your Logo. However, keep the essential and important links there.

Live Search is an item that displays your users’ results in real time. Any search word, query, question, tags that they might be looking up, will be shown in that box. Customize it to display however many results you want.

Mobile Menu through the Website Manager

With a blank template already imported, open the Website Manager again and select Mobile Menu to start the design process. Drag and drop elements that fit with your vision. Do you want to have a button that opens the navigational menu or still have the links available just like the desktop version? The Mobile Horizontal Menu lets you display all the links whereas the Mobile Menu gives you the button version.

Whichever option you choose, add the Logo to the header and don’t forget the Mobile Live Search item. Arrange them exactly as you want them to: display them inline by checking the box in General Settings for each or even have multiple rows for each element.

Don’t forget to save the settings and you’re done. You’ve got a Mobile Header now!

To Sticky or not to Sticky?

For the desktop and mobile version of your Header, you can choose to make a sticky variant of it. This appears when the reader scrolls through the page, this way they can still access important navigational items. As such, the sticky Header should be slim and give the visitor enough space to read through the page’s content.

As a plus, you can also decide how the sticky menu appears for the visitors. How do you do this? To customize the Header, click on either the Sticky Mobile Menu or Sticky Menu, the tagDiv Composer then opens the zone for it. In the Zone Specific Parameters at the bottom, you can choose the transition effect, the opacity for the sticky header, and also how fast or slow the transition can be.

To continue editing the content or the Header, you can disable the Sticky Menu from the Website Manager by clicking the On/ Off switch. Don’t worry it won’t delete your Sticky Menu. It’ll just hide it for you to be able to focus on the rest of your page while editing!

With a beautiful new Header, you should have a beautiful new Footer, too. Learn how to create a Footer from scratch with the Newspaper Theme by visiting this link.

Conclusions

Having seen the 4 zones of the Website Header Manager, you’re now ready to tackle making the Header for each by yourself! For more information, however, check out the other blog posts related to the Header: Logo, Mobile Elements, Live Search, Navigation Menu. Start small, with simple elements and ideas then think bold and grow your design through it.

Show us what you made with the new Website Header Manager and Newspaper Theme in the comment box below. We’d love to hear from you!