Divi Product Highlight: DiviWP Header Sections Pack

Posted on January 15, 2023 by 1 Comment

Divi Product Highlight: DiviWP Header Sections Pack
Blog / Divi Resources / Divi Product Highlight: DiviWP Header Sections Pack

DiviWP Header Sections is a layout pack of 20 header modules you can use on your Divi website. It is built with the Divi builder and can be completely customized using Divi’s module options. In this product highlight, we’ll take a look at each one of the header designs and help you decide if this product is right for you.

Let’s get started!

Installing Divi WP Header Sections

After purchasing the DiviWP Header Sections Pack on the Divi Marketplace, extract the ZIP file containing the header section JSON files. Then, open the Divi theme builder settings in the WordPress dashboard. Click Add New Template, then Build New Template. In the template settings, select the pages you want the header to appear on. For this tutorial, I am adding the header to a specific page.

Divi Product Highlight: DiviWP Header Sections Pack Install

Next, click Add Custom Header and select Build Custom Header. The header layout page will open up in the Divi builder.

Divi Product Highlight: DiviWP Header Sections Pack Install

To import a header layout, simply drag and drop the JSON file onto the page or use the portability function to import the layout.

Divi Product Highlight: DiviWP Header Sections Pack Install

Select Import Divi Builder Layout to finish importing the layout. Now the header section should appear on the page.

Divi Product Highlight: DiviWP Header Sections Pack Install

DiviWP Header Sections Pack

The DiviWP Header Sections Pack comes with 20 different header layouts. Each of the layouts has a sticky and non-sticky version and is fully responsive. You can easily customize the design of each layout because it is built with the Divi Builder. Let’s take a look at each header layout now.

Header Layout 1

The first header layout in the pack is a right-aligned menu module with a logo on the left and shopping and search icons on the very right. It uses fade-in drop-down menu transitions for the desktop and fade-in mobile menu transitions for tablet and mobile.

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 Layout 2

Header Layout 2 is very similar to Layout 1, but the menu height 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 Layout 3

The third layout style features a split menu with a button on the very right.

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 achieve this design, you will need to add a custom CSS class to some of the menu items. In the WordPress dashboard, navigate to Appearance > Menus. At the top of the page, open the Screen Options and enable CSS Classes.

Divi Product Highlight DiviWP Header Sections Pack Layout 3 Enable CSS

Then, open the menu item you would like to display as a button and add the CSS class diviwp-menu-button.

Divi Product Highlight DiviWP Header Sections Pack Layout 3 CSS button

Next, add the CSS class diviwp-menu-right-align to the menu item you would like to align to the right. Anything to the right of this item will be aligned to the right of the header, and everything to the left of this item will be center-aligned.

Divi Product Highlight DiviWP Header Sections Pack Layout 3 CSS

Header Layout 4

Header Layout 4 is similar to Layout 3, except with slide-in mobile menu transitions and fade-in drop-down transitions for tablet and mobile sub-menus. Additionally, the parent menu item for the sub-menu is not linked.

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 Layout 4 to demonstrate a mega menu layout. To achieve this design, first follow the instructions to create a mega menu. Be sure to enter the CSS class mega-menu on the parent item. Each of the header sections in the DiviWP Header Sections Pack supports mega menus.

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

Header Layout 5

Layout 5 is a right-aligned header with a dark background. It features fade-in mobile 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 Layout 6

Header Layout 6 also features a dark background section. The sub-menu also has a dark background style.

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 Layout 7

Layout 7 has a light background and has a 3/4 – 1/4 row column layout with the button on the right. The button also appears alongside the hamburger menu icon on tablet and mobile.

Divi Product Highlight DiviWP Header Sections Pack Layout 7 Desktop

Divi Product Highlight DiviWP Header Sections Pack Layout 7 Tablet

Header Layout 8

Layout 8 features social media icons on the right. On mobile and tablet devices, social media icons appear alongside the hamburger menu icon. The header also uses fade-in drop-down transitions for the tablet and mobile 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 Layout 9

Header Layout 9 has a dark top row with blurb modules for contact information and social media follow icons. The main menu is the same as Header Layout 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 Layout 10

Header Layout 10 has a top row with a menu module and a social media follow module, allowing you to add additional menu items or links to the top menu bar. Again, the main menu is the same as Header Layout 1.

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 Layout 11

The top row of Header Layout 11 features a blurb module, social media follow icons, and a button. Again, the main menu is the same as Header Layout 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 Layout 12

Header Layout 12 places social media icons on the left side of the top row and two blurb modules on the right. Once again, the layout for the main menu is the same as Header Layout 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 Layout 13

Header Layout 13 features a blurb module, a menu, social media icons, and a button on the top menu. It also comes with a 2-column mega menu layout for desktop with an optional button at the bottom. To achieve this design, you will first need to create a menu with a parent menu item, two sub-menu items for the two columns (labeled Col 1 and Col 2 in the screenshot below), and the menu items below.

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, add the CSS Class mega-menu two-column to the parent item.

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

Then add the CSS Class diviwp-menu-col-1 to the first column menu item, and diviwp-menu-col-2 to the second column menu item.

Divi Product Highlight DiviWP Header Sections Pack Layout 13 Column CSS

Finally, add the CSS Class fullwidth to the button menu item.

Divi Product Highlight DiviWP Header Sections Pack Layout 13 Button CSS

Header Layout 14

Header Layout 14 is a 3-column mega menu variation of Layout 13. For this layout, follow the steps for Header Layout 13 and add another 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 third column item, add the following CSS Class: diviwp-menu-col-3

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

Finally, add the CSS class mega-menu three-column to the parent item.

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

Header Layout 15

Layout 15 features two blurb icons on the top menu bar. The primary menu has a light background and is the same as Layout 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 Layout 16

Header Layout 16 is mostly the same as Header Layout 15, except the blurb icons are on the left side of the top 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 Layout 17

Layout 17 features two blurbs on the left side of the top menu bar and social media icons with a round white background on the right side of the top 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 Layout 18

Layout 18 is a slight variation of Layout 17. In this design, the social media icons are on the left and the blurbs are on the right side of the top menu bar.

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 Layout 19

Layout 19 features the blurb icons on the left and the social media icons on the right, as well as a button on the very right.

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 Layout 20

The final layout, Layout 20, is a variation of Layout 19. In this design, the blurb icons are on the left and the button icon is on the right. The social media icons are on the very right.

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 completely customizable since it is built with the Divi Builder. You can easily change any of the colors, fonts, text, and icons just like you would customize any other Divi module. There is also extensive support and documentation for the DiviWP Header Sections Pack so that you can further customize the look of your header.

Purchase the DiviWP Header Sections Pack

The DiviWP Header Sections Pack is available in the Divi Marketplace. It costs $19 for unlimited website usage and lifetime support and updates. The price also includes a 30-day money-back guarantee.

Final Thoughts

The DiviWP Header Sections Pack comes with 20 premade header sections that can be completely customized to fit the design of your website. If you want to view a live demo of the different headers, you can do so here. This pack could be very useful if you don’t want to spend the time to create a custom header for your website but want to have a unique design for your header beyond the default Divi layouts.

We would love to hear from you! Have you tried DiviWP Header Sections Pack? Let us know what you think about it in the comments!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Alteration Shop Layout Pack for Divi

Get a Free Alteration Shop Layout Pack for Divi

Posted on February 6, 2023 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful alteration shop Layout Pack that’ll help you get your next Alteration...

View Full Post
Divi Product Highlight: Header Layout Pack

Divi Product Highlight: Header Layout Pack

Posted on February 5, 2023 in Divi Resources

The header is one of the first elements to load for any Divi website you create. This means the header often makes the first impression anyone sees for a website, making header design a crucial part of every website. Fortunately, you don’t have to create your header from scratch. There are lots...

View Full Post

1 Comment

  1. Hey everyone, Tristan here from DiviWP. Annika, thank you for covering our Header Sections! I really appreciate the time and care you’ve taken putting this all together – I’m sure it’s going to help a lot of folks!

    If anyone has any questions about DiviWP’s products, I’ll happily answer here!

    Onwards to Divi 5!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today