Site icon Hip-Hop Website Design and Development

The right way to Use a Totally different Divi Header on the Homepage

Web site dwelling pages and touchdown pages usually have completely different functions than most inside pages. You would possibly attempt to funnel and convert guests into shoppers and prospects or show your portfolio with a novel design that attracts them in and makes them need to discover. The header is without doubt one of the most placing elements of your web site, and it’s one that each single customer sees when loading your web page. With that in thoughts, we need to present you use a distinct Divi header on the homepage in order that your website can carry out at its optimum stage.

The right way to Use a Totally different Header on the Homepage

To do that, we’re going to be making use of the Divi Theme Builder. Yow will discover that in your WordPress admin dashboard below Divi – Theme Builder. Go forward and enter it and cargo up your library of templates.

Assign a World Header Template

If you’re simply loading the Theme Builder for the primary time, you gained’t see the inexperienced containers labeled World HeaderWorld Physique, and World Footer. As a substitute, you will note one thing much like the picture under. Merely click on into any of the empty containers and cargo in or create the design on your website.

Both method, you will note the inexperienced containers indicating that your website has international layouts assigned. Which means each web page and publish in your website could have the identical header, footer, and physique design. From homepage to weblog posts. What we’re going to do is take you thru the steps you want to take so as to take away the homepage from the worldwide settings.

Create a New Theme Builder Template

The very first thing you want to do is create a brand new template for the homepage. That is carried out by clicking contained in the Add New Template field.

When the menu pops up, examine the field subsequent to Homepage. Then click on the blue Create Template button.

Disable the New World Header

When the brand new template that you just simply created seems, you would possibly discover that it has the worldwide header, footer, and physique designs enabled. If that’s the case, then you’ll need to disable them.

Achieve this by right-clicking the World Header within the new Homepage template you created. Then choose Disable World from the context menu. You may additionally choose Delete from this menu to start out from scratch with the homepage header, both loading from the library or a JSON file or designing it from the bottom up.

Design or Set the New Header

If you’ve disabled the worldwide facet of the header, you will note the Homepage template now has a bit labeled Customized Header. That is nonetheless the identical design because the World Header, solely now it isn’t linked to the whole website.

At this level, you may have a number of choices for putting a distinct header design on the homepage.

1. Design an All New Header

For this selection, you simply have to double-click the Customized Header part. Doing so will take you into the Divi Visible Builder.

You’ll be able to then edit this header design into no matter you need it to be. You’ll be able to solely barely alter the design, corresponding to including a CTA field to the homepage header, whereas protecting the general design from the worldwide template. Or you can begin from scratch and provides your homepage a completely completely different header from the remainder of the posts and pages that use the worldwide template.

2. Load a Pre-Designed Header

One other route you possibly can go from right here is to load in an already designed header. The Divi Theme Builder’s sturdy portability choices assist you to export and import designs and full templates as JSON information. For every of the free layouts we launch, we additionally launch a downloadable header/footer design on the weblog.

For those who go into the Divi Theme Builder and click on the double-arrow icon within the upper-right nook of the dashboard, you’ll open the import/export choices.

Click on the Import tab and discover the JSON file for the design you need to import. Uncheck the containers and press Import Divi Theme Builder Templates.

It can then present up as an unassigned template. You’ll be able to drag-and-drop the header into the prevailing Homepage template. In case you have not created a Homepage template but, you possibly can assign this explicit template to the homepage simply as within the step above.

Moreover, you may as well right-click the newly imported header and select Copy from the context menu and paste it into the Add Customized Header spot assigned to Homepage.

It’s also possible to merely click on the Add Customized Header block to convey up an extra context menu. Subsequent, you must then see a Copy From Template part within the menu, and you may merely choose the prevailing template you need to duplicate.

You might also select Add from Library, although this explicit selection will pull from the Divi Library and never the Theme Builder itself. Which means that you may be loading the layouts and designs you’ve made utilizing the Divi Builder.

You’ll be able to, at any level, additionally load a header design out of your library to your homepage within the visible builder.

Wrapping Up

The Divi Theme Builder offers you full management over your web site’s design, and meaning you possibly can have your homepage set as much as show any header you select. Even when you have a world header design set on your web site, you possibly can separate your homepage from the worldwide template. Whether or not you want to change solely a single aspect for the homepage or need to wholly redesign that space for the primary web page solely, you are able to do it within the Divi Theme Builder.

What makes use of are you able to see for utilizing a separate header on your homepage?

Article featured picture by Andy Chipus / shutterstock.com

The publish The right way to Use a Totally different Divi Header on the Homepage appeared first on Elegant Themes Weblog.