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.
Subsequent, click on Upload Customized Header and choose Construct Customized Header. The header format web page will open up within the Divi builder.
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.
Make a choice Import Divi Builder Structure to complete uploading the format. Now the header segment will have to seem at the web page.
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.
Header Structure 2
Header Structure 2 is similar to Structure 1, however the menu top is taller.
Header Structure 3
The 3rd format taste includes a break up menu with a button at the very appropriate.
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.
Then, open the menu merchandise you want to show as a button and upload the CSS elegance diviwp-menu-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.
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.
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.
Header Structure 5
Structure 5 is a right-aligned header with a dismal background. It options fade-in cellular menu transitions.
Header Structure 6
Header Structure 6 additionally includes a darkish background segment. The sub-menu additionally has a dismal background taste.
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.
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.
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.
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.
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.
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.
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.
First, upload the CSS Magnificence mega-menu two-column to the father or mother merchandise.
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.
In any case, upload the CSS Magnificence fullwidth to the button menu merchandise.
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.
To the 3rd column merchandise, upload the next CSS Magnificence: diviwp-menu-col-3
In any case, upload the CSS elegance mega-menu three-column to the father or mother merchandise.
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.
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.
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.
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.
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.
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.
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.
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.