Take the Tour to Explore the New Header Manager

Home

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 Manager

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 orange Header 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 Header 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 Manager

The On and Off button for the sticky desktop and mobile menu, in the Header 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 this blog post.

How to customize the Header Manager

Do you want to create a brand new Header? Then, with the Header Manager open on a page, click the Import Template button. From the tagDiv Cloud Library, choose the blank Template. Close the Header Manager 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 creating 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.

Newspaper Theme header design: Customize the header manager

Mobile Menu through the Header Manager

With a blank template already imported, open the Header 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 Manager, 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 Header 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 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 Header Manager and Newspaper Theme in the comment box below. We’d love to hear from you!

Subscribe For More!

If you want to be the first to find out more about our themes
please subscribe to our newsletter

Alexandra I.
Alexandra I.
I love video games and photography. You can usually find me drawing, editing or reading. My curiosity leads me to learn something new every day. I try to pursue life through a creative lens and find inspiration in others and nature.

14 COMMENTS

  1. I Love Your Theme So Much I’m So Convinced I have To Move From Blogger To Wp… Please I’ll like to purchase The Classy Magazine Theme For My Fashion Blog, please how much is it and how can I buy it

    • Hi, Ben!

      Thank you for your interest in the Newspaper theme and for your awesome feedback. 🙂

      The Classy Magazine is not a stand-alone theme, it’s a demo design in the Newspaper Theme. To use it, first, you need to purchase the Newspaper Theme from themeforest.net and install it on your WordPress site. Here is a step-by-step guide to help you install the theme. The next step is to change your website design with the Classy Magazine demo. You can install the demo with or without content and start customizing your Fashion Blog. If you need assistance, our Customer Support Team is ready to give you a helping hand. All you have to do is to open a new topic on https://forum.tagdiv.com/forum/newspaper/ and provide all the relevant details.

      I hope you’ll enjoy using the Newspaper Theme on your blog!

  2. Hi, I tried this header manager in my website, that’s WORKS fine. But, I want same header in all my web pages including pages, posts and category archives. How can I do that?

    • Hi,

      Please be more specific about what kind of elements you want to hide for mobile mode. Also, if it helps you, notice that you can use the Mobile Theme plugin which has a special layout only for mobile mode. Please check the official documentation from here -> https://forum.tagdiv.com/the-mobile-theme/ Also, if you want to keep the same layout on mobile like on desktop but only if you want to hide only some elements on Mobile layout, you can use the following functionality from our TD Composer page builder to hide elements for mobile, from here -> https://www.screencast.com/t/2bvk9g1e4B8h If you need more assistance in this case, please open a new topic at our support forum from here -> https://forum.tagdiv.com/forum/newspaper/

      Hope this helps!

      Thank you!

    • Hi,

      1)Please check your theme configuration because that error might happen due to the following reasons from here -> https://forum.tagdiv.com/tagdiv-composer-not-working/ Also, ensure that you are using the latest version of the theme which is 9.7.2, clear all the caches, purge CDN files and check the results.
      2)Unfortunately, the theme does not have any such an option that allows you to migrate a template from your website to another website but what you can do is to simply install the Cloud Template Library to your beta site and import the template on that website.
      If you need more assistance in this case, please open a new topic at our support forum from here -> https://forum.tagdiv.com/forum/newspaper/

      Thank you!

  3. I am looking to basically add two headers to one of the pages. The first header would be the original one and the second one would come from this new update via the composer. However, when I try dragging and dropping a new menu into the page I get an error that says:
    Error at zones: 5(models) : 6(dom). The model does not match the content

    How could I have two headers on the same page the way I described above?

    • Hi,

      Please check the following useful tutorial from here -> https://forum.tagdiv.com/tagdiv-composer-not-working/ and ensure that you have completed all of these steps, clear all the caches, purge the CDN files and check the results. If you need more assistance in this case and also, if the error is still there, please send us an email at contact@tagdiv.com with your log-in information (wp-admin) so we can further investigate it closer your setup page. Also, you have to provide full CPanel access.

      Thank you!

  4. One question about the sticky menu:
    I imported a header template but unable to change or remove the ‘logo text’ from its sticky menu. How can I do it?

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Check out our latest

Stories