DiviWP Header Sections is a construction pack of 20 header modules you’ll be capable to use to your Divi web page. It’s built with the Divi builder and can also be utterly customized the use of Divi’s module possible choices. In this product highlight, we’ll take a look at each and every one of the crucial header designs and help making a decision if this product is right for you.

Let’s get started!

Setting up Divi WP Header Sections

After buying the DiviWP Header Sections Pack on the Divi Marketplace, extract the ZIP record containing the header section JSON knowledge. Then, open the Divi theme builder settings inside the WordPress dashboard. Click on on Add New Template, then Assemble New Template. Throughout the template settings, select the pages you wish to have the header to appear on. For this tutorial, I’m together with the header to a selected internet web page.

Next, click on on Add Custom designed Header and select Assemble Custom designed Header. The header construction internet web page will open up inside the Divi builder.

To import a header construction, simply drag and drop the JSON record onto the internet web page or use the portability function to import the construction.

Select Import Divi Builder Layout to finish importing the construction. Now the header section must appear on the internet web page.

DiviWP Header Sections Pack

The DiviWP Header Sections Pack comes with 20 different header layouts. Every of the layouts has a sticky and non-sticky type and is admittedly responsive. You’ll be capable to merely customize the design of each and every construction on account of it’s built with the Divi Builder. Let’s take a look at each and every header construction now.

Header Layout 1

The main header construction inside the pack is a right-aligned menu module with a logo on the left and purchasing groceries and search icons on the very right kind. It uses fade-in drop-down menu transitions for the desktop and fade-in mobile menu transitions for tablet and mobile.

Header Layout 2

Header Layout 2 is very similar to Layout 1, then again the menu height is taller.

Header Layout 3

The third construction style features a get a divorce menu with a button on the very right kind.

To achieve this design, it is important to add a custom designed CSS magnificence to some of the menu items. Throughout the WordPress dashboard, navigate to Glance > Menus. On the most efficient of the internet web page, open the Visual display unit Alternatives and make allowance CSS Classes.

Then, open the menu products you need to display as a button and add the CSS magnificence diviwp-menu-button.

Next, add the CSS magnificence diviwp-menu-right-align to the menu products you need to align to the right kind. The remainder to the right kind of this products will probably be aligned to the right kind of the header, and the whole thing to the left of this products will probably be center-aligned.

Header Layout 4

Header Layout 4 is similar to Layout 3, except for with slide-in mobile menu transitions and fade-in drop-down transitions for tablet and mobile sub-menus. Additionally, the mum or father menu products for the sub-menu isn’t similar.

I used Header Layout 4 to show a mega menu construction. To achieve this design, first practice the instructions to create a mega menu. Take into accout to enter the CSS magnificence mega-menu on the mom or father products. Every of the header sections inside the DiviWP Header Sections Pack is helping mega menus.

Header Layout 5

Layout 5 is a right-aligned header with a dark background. It choices fade-in mobile menu transitions.

Header Layout 6

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

Header Layout 7

Layout 7 has a gradual background and has a 3/4 – 1/4 row column construction with the button at the right kind. The button moreover turns out alongside the hamburger menu icon on tablet and mobile.

Header Layout 8

Layout 8 choices social media icons at the right kind. On mobile and tablet gadgets, social media icons appear alongside the hamburger menu icon. The header moreover uses fade-in drop-down transitions for the tablet and mobile sub-menus.

Header Layout 9

Header Layout 9 has a dark perfect row with blurb modules for contact information and social media practice icons. The main menu is the same as Header Layout 1.

Header Layout 10

Header Layout 10 has a perfect row with a menu module and a social media practice module, allowing you as a way to upload additional menu items or links to the perfect menu bar. Over again, the principle menu is the same as Header Layout 1.

Header Layout 11

The perfect row of Header Layout 11 features a blurb module, social media practice icons, and a button. Over again, the principle menu is the same as Header Layout 1.

Header Layout 12

Header Layout 12 places social media icons on the left aspect of the perfect row and two blurb modules at the right kind. Once yet again, the construction for the principle menu is the same as Header Layout 1.

Header Layout 13

Header Layout 13 features a blurb module, a menu, social media icons, and a button at the most efficient menu. It moreover comes with a 2-column mega menu construction for desktop with an no longer necessary button at the bottom. To achieve this design, you will first need to create a menu with a mom or father menu products, two sub-menu items for the two columns (classified Col 1 and Col 2 inside the screenshot underneath), and the menu items underneath.

First, add the CSS Class mega-menu two-column to the mum or father products.

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

In any case, add the CSS Class fullwidth to the button menu products.

Header Layout 14

Header Layout 14 is a 3-column mega menu variation of Layout 13. For this construction, practice the steps for Header Layout 13 and add some other column.

To the third column products, add the following CSS Class: diviwp-menu-col-3

In any case, add the CSS magnificence mega-menu three-column to the mum or father products.

Header Layout 15

Layout 15 choices two blurb icons at the most efficient menu bar. The main menu has a gradual background and is the same as Layout 1.

Header Layout 16

Header Layout 16 is maximum regularly the equivalent as Header Layout 15, except for the blurb icons are on the left aspect of the perfect menu bar.

Header Layout 17

Layout 17 choices two blurbs on the left aspect of the perfect menu bar and social media icons with a round white background at the right kind aspect of the perfect menu bar.

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 at the right kind aspect of the perfect menu bar.

Header Layout 19

Layout 19 choices the blurb icons on the left and the social media icons at the right kind, along with a button on the very right kind.

Header Layout 20

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

Customizing the DiviWP Header Sections Pack

The DiviWP Header Sections Pack is completely customizable because it’s built with the Divi Builder. You’ll be capable to merely trade any of the colors, fonts, text, and icons very similar to you’ll be able to customize another Divi module. There could also be extensive beef up and documentation for the DiviWP Header Sections Pack with the intention to further customize the look of your header.

Gain the DiviWP Header Sections Pack

The DiviWP Header Sections Pack is available inside the Divi Market. It costs $19 for infinite web page usage and lifetime beef up and updates. The price moreover includes a 30-day money-back be sure.

Final Concepts

The DiviWP Header Sections Pack comes with 20 premade header sections that can be utterly customized to fit the design of your web page. If you want to view a live demo of the opposite headers, you’ll be capable to accomplish that right here. This pack might be very useful while you don’t need to spend the time to create a custom designed header in your web page then again need to have a unique design in your header previous the default Divi layouts.

We might in reality like to hear from you! Have you ever ever tried DiviWP Header Sections Pack? Let us know what you think about it inside the comments!

The post Divi Product Spotlight: DiviWP Header Sections Pack gave the impression first on Chic Issues Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more