One of the crucial-used choices of the Divi Theme Builder is together with an international header on your web site, and then being able to override it with custom designed headers anyplace you need. You’ll be capable of customize every internet web page, post sort, and visible space of your internet web site on your needs. Now and again, on the other hand, it’s good to now not desire a header on explicit pages, whether or not or no longer it’s international or custom designed. In this article, we’re going to walk you through one of the crucial techniques wherein you’ll be capable of quilt your header at the ones explicit pages by the use of the use of the Divi Theme Builder so that your internet web site can be exactly what you need at all times and everywhere. Let’s dig in.
The way to Cover Your Header on Specific Pages
Very very first thing, you’re going to wish to head to the Divi Theme Builder. In your WordPress admin dashboard, to seek out the Divi get admission to and enter the Theme Builder subsection.
Create a Global Header
If this is your first time the use of the Theme Builder, you need to set an international header. One of the crucial most simple techniques to try this is to use a freebie download that we provide by the use of grabbing a header/footer JSON document from a blog post. Then use the Portability possible choices throughout the builder to import it.
Your Global templates must now be set.
Assign Custom designed or Global Header
The Divi Theme Builder has a variety of context menus that you just’ll be capable of profit from. The main manner of to hide your header on a selected internet web page in Divi is done through one of these menus.
First, you need to have the a template set that uses a Custom designed or Global Header that is now not part of the Default Global Template.
Next, you need with the intention to upload the suitable pages on which you wish to have the header hidden. Accomplish that my hovering over the template, clicking the Gear icon (or right-clicking and deciding on Arrange Template Assignments). You will need to right-click throughout the template space, now not the real header construction to get the ones possible choices. Correct-clicking the header construction supplies different context directions, as you’ll see below.
To find the internet web page (or pages) that you wish to have sans header, and check the containers on the subject of them. Anything that you simply assign to this template won’t show the header on the front end of the web site.
Use Context Menu Directions
Next, right-click the Custom designed Header or Global Header. Select the selection that reads Cover on Front End.
Now, you’ll have to see the eye icon to the correct of that construction greyed out with a line through it. Which means the header is hidden for any pages or posts that are assigned to this particular template.
You’ll be capable of moreover simply left-click the eye icon to toggle the visibility of the header (or body or footer, too) on and off. Each method will art work, and each method you’ll be capable of quilt the header on explicit pages. All over again, merely make sure you’ve assigned the suitable pages you wish to have to hide this header on.
We may moreover like to note that no longer like excluding posts and pages from templates, the use of the Cover on Front End risk this does now not default a Custom designed Header once more to the Global. No header will show up the least bit on the assigned pages and posts.
Industry Manner
The program will most simple art work if you don’t use a Global Header as part of your internet web site’s design. When you occur to want to make use of Custom designed Headers for quite a lot of templates, you’ll be capable of use this option to quilt the header in Divi.
With that discussed, you do wish to get began out by the use of creating a Global Header construction. Inside the Divi Builder, create an empty Segment (because of this no rows or modules contained inside of). Then, move into the Segment Settings and into the Difficult Tab.
Next, move into the Custom designed CSS possible choices and to seek out the Number one Element field. Click on on inside and add display:none; to the text box. What this CSS snippet does is remove this phase from the construction, preventing the browser from rendering it and saving its space throughout the template. There are two reasons we’re applying display:none; to the phase as a substitute of merely leaving it empty and not using a row or module.
- Given that browser would nevertheless render the phase space if it were blank. It’ll be empty on the front end of your web site, too. By way of the use of display:none; we’re getting rid of it utterly.
- If now we have been to simply haven’t any Global Header assigned the least bit, the default Divi theme header would show on pages that weren’t assigned or excluded from layouts with a Custom designed Header. Which won’t art work for the program.
So if you happen to’ve applied the Custom designed CSS on your Global Header’s single phase, save your changes and go back to the main internet web page of the theme builder.
Exclude Pages from Custom designed Templates
As we mentioned above, if you exclude a post or internet web page from a Divi Theme Builder template, it reverts once more to the Default Web page Template. If there are Global layouts there, those will display on the front-end. If there are empty spaces, the default Divi layouts will display.
By way of telling the Global Header to use display:none; throughout the previous step, you’ll be capable of quilt the header on any explicit pages or posts that you simply exclude from a template.
Merely as throughout the manner above, you wish to have to each click on at the Gear Icon or right-click the template and choose Arrange Template Assignments. Then, navigate to the Exclude From tab, make a selection the suitable pages or posts you wish to have to exclude, and mark the checkboxes for them. This time, the checkmark it will be purple. When saved, the template will show an Exclude From line at the bottom.
Aside from a post or internet web page from the template that uses a Custom designed Header will revert it once more to the Global Header throughout the Default Web page Template. However, since it’s good to have used display:none; CSS at the most straightforward part throughout the Global Header, it’s good to have effectively hidden the header at the ones explicit pages and posts.
All over again, the program most simple works if you’re the use of Custom designed Headers for the theme builder templates and now not an normal Global Header.
Wrapping Up
There are numerous reasons to hide the header throughout the Divi Theme Builder, and it’s very simple to accomplish the obligation. Whether or not or no longer you use a whole internet web site of custom designed headers and wish to exclude a few from having one through custom designed CSS trickery, or if you want to have to use the built-in Cover on Front End command to remove all lines of any header, it merely takes a few clicks.
Why do you need to hide your header on explicit Divi pages?
Article featured image by the use of Nicoleta Ionescu/ shutterstock.com
The post How to Hide Your Header on Specific Pages Using the Divi Theme Builder seemed first on Elegant Themes Blog.
0 Comments