Site icon Hip-Hop Website Design and Development

Easy methods to Cover Your Header on Particular Pages Utilizing the Divi Theme Builder

One of the vital-used options of the Divi Theme Builder is including a world header to your web site, after which with the ability to override it with customized headers wherever you want. You possibly can customise each web page, put up kind, and visual space of your web site to your wants. Generally, nevertheless, you won’t want a header on particular pages, whether or not it’s international or customized. On this article, we’re going to stroll you thru a few of the methods you could disguise your header on these particular pages by utilizing the Divi Theme Builder in order that your web site may be precisely what you want always and all over the place. Let’s dig in.

Easy methods to Cover Your Header on Particular Pages

Very first thing, you’re going to want to move to the Divi Theme Builder. In your WordPress admin dashboard, discover the Divi entry and enter the Theme Builder subsection.

Create a World Header

If that is your first time utilizing the Theme Builder, you could set a world header. The best approach to do that is to make use of a freebie obtain that we offer by grabbing a header/footer JSON file from a weblog put up. Then use the Portability choices within the builder to import it.

Your World templates ought to now be set.

Assign Customized or World Header

The Divi Theme Builder has a variety of context menus you could reap the benefits of. The primary methodology of to cover your header on a selected web page in Divi is completed by means of one among these menus.

First, you could have the a template set that makes use of a Customized or World Header that’s not a part of the Default World Template.

Subsequent, you could add the particular pages on which you need the header hidden. Accomplish that my hovering over the template, clicking the Gear icon (or right-clicking and choosing Handle Template Assignments). You’ll need to right-click within the template space, not the precise header format to get these choices. Proper-clicking the header format offers completely different context instructions, as you will note under.

Discover the web page (or pages) that you really want sans header, and examine the bins close to them. Something that you simply assign to this template will not present the header on the entrance finish of the web site.

Use Context Menu Instructions

Subsequent, right-click the Customized Header or World Header. Choose the choice that reads Cover on Entrance Finish.

Now, you must see the eye icon to the appropriate of that format greyed out with a line by means of it. This means that the header is hidden for any pages or posts which might be assigned to this specific template.

You may also merely left-click the attention icon to toggle the visibility of the header (or physique or footer, too) on and off. Both approach will work, and both approach you’ll be able to disguise the header on particular pages. Once more, simply ensure you’ve assigned the particular pages you wish to disguise this header on.

We might additionally like to notice that in contrast to excluding posts and pages from templates, utilizing the Cover on Entrance Finish choice this doesn’t default a Customized Header again to the World. No header will present up in any respect on the assigned pages and posts.

Alternate Methodology

This methodology will solely work should you don’t use a World Header as a part of your web site’s design. In case you intend to make use of Customized Headers for various templates, you should use this methodology to cover the header in Divi.

With that mentioned, you do want to begin out by making a World Header format. Contained in the Divi Builder, create an empty Part (which means no rows or modules contained inside). Then, go into the Part Settings and into the Superior Tab.

Subsequent, go into the Customized CSS choices and discover the Major Aspect discipline. Click on inside and add show:none; to the textual content field. What this CSS snippet does is take away this part from the format, stopping the browser from rendering it and saving its area within the template. There are two causes we’re making use of show:none; to the part as a substitute of simply leaving it empty with out a row or module.

  1. As a result of the browser would nonetheless render the part area if it have been clean. It will be empty on the entrance finish of your web site, too. By utilizing show:none; we’re eradicating it completely.
  2. If we have been to easily don’t have any World Header assigned in any respect, the default Divi theme header would present on pages that weren’t assigned or excluded from layouts with a Customized Header. Which received’t work for this methodology.

So when you’ve utilized the Customized CSS to your World Header’s single part, save your adjustments and return to the primary web page of the theme builder.

Exclude Pages from Customized Templates

As we talked about above, should you exclude a put up or web page from a Divi Theme Builder template, it reverts again to the Default Web site Template. If there are World layouts there, these will show on the front-end. If there are empty areas, the default Divi layouts will show.

By telling the World Header to make use of show:none; within the earlier step, you possibly can disguise the header on any particular pages or posts that you simply exclude from a template.

Simply as within the methodology above, you wish to both click on the Gear Icon or right-click the template and choose Handle Template Assignments. Then, navigate to the Exclude From tab, select the particular pages or posts you wish to exclude, and mark the checkboxes for them. This time, the checkmark will probably be pink. When saved, the template will present an Exclude From line on the backside.

Excluding a put up or web page from the template that makes use of a Customized Header will revert it again to the World Header within the Default Web site Template. Nevertheless, since you’ve got used show:none; CSS on the one aspect within the World Header, you’ve got successfully hidden the header on these particular pages and posts.

Once more, this methodology solely works should you’re utilizing Customized Headers for the theme builder templates and never an general World Header.

Wrapping Up

There are a number of causes to cover the header within the Divi Theme Builder, and it’s extremely simple to perform the duty. Whether or not you utilize a full web site of customized headers and must exclude a number of from having one by means of customized CSS trickery, or if you could use the built-in Cover on Entrance Finish command to take away all traces of any header, it simply takes a number of clicks.

Why do you could disguise your header on particular Divi pages?

Article featured picture by Nicoleta Ionescu/ shutterstock.com

The put up Easy methods to Cover Your Header on Particular Pages Utilizing the Divi Theme Builder appeared first on Elegant Themes Weblog.