Divi Product Highlight: DiviWP Header Sections Pack

by | Jan 15, 2023 | Etcetera | 0 comments

DiviWP Header Sections is a format pack of 20 header modules you’ll use to your Divi web site. It’s constructed with the Divi builder and can also be utterly custom designed the usage of Divi’s module choices. On this product spotlight, we’ll check out every one of the crucial header designs and assist you make a decision if this product is best for you.

Let’s get began!

Putting in Divi WP Header Sections

After purchasing the DiviWP Header Sections Pack at the Divi Market, extract the ZIP report containing the header segment JSON recordsdata. Then, open the Divi theme builder settings within the WordPress dashboard. Click on Upload New Template, then Construct New Template. Within the template settings, choose the pages you need the header to look on. For this instructional, I’m including the header to a particular web page.

Divi Product Highlight: DiviWP Header Sections Pack Install

Subsequent, click on Upload Customized Header and choose Construct Customized Header. The header format web page will open up within the Divi builder.

Divi Product Highlight: DiviWP Header Sections Pack Install

To import a header format, merely drag and drop the JSON report onto the web page or use the portability serve as to import the format.

Divi Product Highlight: DiviWP Header Sections Pack Install

Make a choice Import Divi Builder Structure to complete uploading the format. Now the header segment will have to seem at the web page.

Divi Product Highlight: DiviWP Header Sections Pack Install

DiviWP Header Sections Pack

The DiviWP Header Sections Pack comes with 20 other header layouts. Each and every of the layouts has a sticky and non-sticky model and is absolutely responsive. You’ll simply customise the design of every format as a result of it’s constructed with the Divi Builder. Let’s check out every header format now.

Header Structure 1

The primary header format within the pack is a right-aligned menu module with an emblem at the left and buying groceries and seek icons at the very appropriate. It makes use of fade-in drop-down menu transitions for the desktop and fade-in cellular menu transitions for pill and cellular.

See also  10 Best WordPress Lead Generation Plugins in 2023

Divi Product Highlight DiviWP Header Sections Pack Layout 1 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 1 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 1 Mobile

Header Structure 2

Header Structure 2 is similar to Structure 1, however the menu top is taller.

Divi Product Highlight DiviWP Header Sections Pack Layout 2 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 2 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 2 Mobile

Header Structure 3

The 3rd format taste includes a break up menu with a button at the very appropriate.

Divi Product Highlight DiviWP Header Sections Pack Layout 3 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 3 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 3 Mobile

To succeed in this design, it is very important upload a customized CSS elegance to probably the most menu pieces. Within the WordPress dashboard, navigate to Look > Menus. On the best of the web page, open the Display screen Choices and permit CSS Categories.

Divi Product Highlight DiviWP Header Sections Pack Layout 3 Enable CSS

Then, open the menu merchandise you want to show as a button and upload the CSS elegance diviwp-menu-button.

Divi Product Highlight DiviWP Header Sections Pack Layout 3 CSS button

Subsequent, upload the CSS elegance diviwp-menu-right-align to the menu merchandise you want to align to the proper. The rest to the proper of this merchandise will probably be aligned to the proper of the header, and the whole thing to the left of this merchandise will probably be center-aligned.

Divi Product Highlight DiviWP Header Sections Pack Layout 3 CSS

Header Structure 4

Header Structure 4 is very similar to Structure 3, aside from with slide-in cellular menu transitions and fade-in drop-down transitions for pill and cellular sub-menus. Moreover, the father or mother menu merchandise for the sub-menu isn’t related.

Divi Product Highlight DiviWP Header Sections Pack Layout 4 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 4 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 4 Mobile

I used Header Structure 4 to display a mega menu format. To succeed in this design, first apply the directions to create a mega menu. Be sure you input the CSS elegance mega-menu at the father or mother merchandise. Each and every of the header sections within the DiviWP Header Sections Pack helps mega menus.

Divi Product Highlight DiviWP Header Sections Pack Layout 4 Mega Menu CSS

Header Structure 5

Structure 5 is a right-aligned header with a dismal background. It options fade-in cellular menu transitions.

Divi Product Highlight DiviWP Header Sections Pack Layout 5 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 5 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 5 Mobile

Header Structure 6

Header Structure 6 additionally includes a darkish background segment. The sub-menu additionally has a dismal background taste.

Divi Product Highlight DiviWP Header Sections Pack Layout 6 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 6 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 6 Mobile

Header Structure 7

Structure 7 has a mild background and has a three/4 – 1/4 row column format with the button at the appropriate. The button additionally seems along the hamburger menu icon on pill and cellular.

Divi Product Highlight DiviWP Header Sections Pack Layout 7 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 7 Tablet

Header Structure 8

Structure 8 options social media icons at the appropriate. On cellular and pill units, social media icons seem along the hamburger menu icon. The header additionally makes use of fade-in drop-down transitions for the pill and cellular sub-menus.

Divi Product Highlight DiviWP Header Sections Pack Layout 8 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 8 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 8 Mobile

Header Structure 9

Header Structure 9 has a dismal best row with blurb modules for touch data and social media apply icons. The primary menu is equal to Header Structure 1.

Divi Product Highlight DiviWP Header Sections Pack Layout 9 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 9 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 9 Mobile

Header Structure 10

Header Structure 10 has a best row with a menu module and a social media apply module, permitting you so as to add further menu pieces or hyperlinks to the highest menu bar. Once more, the principle menu is equal to Header Structure 1.

See also  New Divi Starter Site for Architects (Quick Install)

Divi Product Highlight DiviWP Header Sections Pack Layout 10 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 10 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 10 Mobile

Header Structure 11

The highest row of Header Structure 11 includes a blurb module, social media apply icons, and a button. Once more, the principle menu is equal to Header Structure 1.

Divi Product Highlight DiviWP Header Sections Pack Layout 11 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 11 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 11 Mobile

Header Structure 12

Header Structure 12 puts social media icons at the left aspect of the highest row and two blurb modules at the appropriate. As soon as once more, the format for the principle menu is equal to Header Structure 1.

Divi Product Highlight DiviWP Header Sections Pack Layout 12 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 12 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 12 Mobile

Header Structure 13

Header Structure 13 includes a blurb module, a menu, social media icons, and a button at the best menu. It additionally comes with a 2-column mega menu format for desktop with an non-compulsory button on the backside. To succeed in this design, you’ll first want to create a menu with a father or mother menu merchandise, two sub-menu pieces for the 2 columns (classified Col 1 and Col 2 within the screenshot under), and the menu pieces under.

Divi Product Highlight DiviWP Header Sections Pack Layout 13 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 13 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 13 Mobile

First, upload the CSS Magnificence mega-menu two-column to the father or mother merchandise.

Divi Product Highlight DiviWP Header Sections Pack Layout 13 Mega Menu CSS

Then upload the CSS Magnificence diviwp-menu-col-1 to the primary column menu merchandise, and diviwp-menu-col-2 to the second one column menu merchandise.

Divi Product Highlight DiviWP Header Sections Pack Layout 13 Column CSS

In any case, upload the CSS Magnificence fullwidth to the button menu merchandise.

Divi Product Highlight DiviWP Header Sections Pack Layout 13 Button CSS

Header Structure 14

Header Structure 14 is a 3-column mega menu variation of Structure 13. For this format, apply the stairs for Header Structure 13 and upload some other column.

Divi Product Highlight DiviWP Header Sections Pack Layout 14 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 14 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 14 Mobile

To the 3rd column merchandise, upload the next CSS Magnificence: diviwp-menu-col-3

Divi Product Highlight DiviWP Header Sections Pack Layout 14 Column 3 CSS

In any case, upload the CSS elegance mega-menu three-column to the father or mother merchandise.

Divi Product Highlight DiviWP Header Sections Pack Layout 14 Mega Menu 3 Column

Header Structure 15

Structure 15 options two blurb icons at the best menu bar. The main menu has a mild background and is equal to Structure 1.

Divi Product Highlight DiviWP Header Sections Pack Layout 15 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 15 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 15 Mobile

Header Structure 16

Header Structure 16 is most commonly the similar as Header Structure 15, aside from the blurb icons are at the left aspect of the highest menu bar.

Divi Product Highlight DiviWP Header Sections Pack Layout 16 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 16 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 16 Mobile

Header Structure 17

Structure 17 options two blurbs at the left aspect of the highest menu bar and social media icons with a spherical white background at the appropriate aspect of the highest menu bar.

Divi Product Highlight DiviWP Header Sections Pack Layout 17 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 17 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 17 Mobile

Header Structure 18

Structure 18 is a slight variation of Structure 17. On this design, the social media icons are at the left and the blurbs are at the appropriate aspect of the highest menu bar.

See also  5 Classes I Discovered by way of Promoting Virtual Downloads for 10+ Years

Divi Product Highlight DiviWP Header Sections Pack Layout 18 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 18 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 18 Mobile

Header Structure 19

Structure 19 options the blurb icons at the left and the social media icons at the appropriate, in addition to a button at the very appropriate.

Divi Product Highlight DiviWP Header Sections Pack Layout 19 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 19 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 19 Mobile

Header Structure 20

The overall format, Structure 20, is a variation of Structure 19. On this design, the blurb icons are at the left and the button icon is at the appropriate. The social media icons are at the very appropriate.

Divi Product Highlight DiviWP Header Sections Pack Layout 20 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 20 Tablet

Divi Product Highlight DiviWP Header Sections Pack Layout 20 Mobile

Customizing the DiviWP Header Sections Pack

The DiviWP Header Sections Pack is totally customizable since it’s constructed with the Divi Builder. You’ll simply trade any of the colours, fonts, textual content, and icons identical to you could customise every other Divi module. There may be intensive strengthen and documentation for the DiviWP Header Sections Pack so that you could additional customise the glance of your header.

Acquire the DiviWP Header Sections Pack

The DiviWP Header Sections Pack is to be had within the Divi Marketplace. It prices $19 for limitless web site utilization and lifelong strengthen and updates. The cost additionally features a 30-day money-back ensure.

Ultimate Ideas

The DiviWP Header Sections Pack comes with 20 premade header sections that may be utterly custom designed to suit the design of your web site. If you wish to view a reside demo of the other headers, you’ll accomplish that here. This pack might be very helpful should you don’t need to spend the time to create a customized header to your web site however need to have a singular design to your header past the default Divi layouts.

We would really like to listen to from you! Have you ever attempted DiviWP Header Sections Pack? Tell us what you consider it within the feedback!

The put up Divi Product Highlight: DiviWP Header Sections Pack seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

DON'T LET YOUR WEBSITE GET DESTROYED BY HACKERS!

Get your FREE copy of our Cyber Security for WordPress® whitepaper.

You'll also get exclusive access to discounts that are only found at the bottom of our WP CyberSec whitepaper.

You have Successfully Subscribed!