Divi Product Spotlight: DiviWP Header Sections Pack

by | Jan 15, 2023 | Etcetera | 0 comments

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.

Divi Product Highlight: DiviWP Header Sections Pack Install

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.

Divi Product Highlight: DiviWP Header Sections Pack Install

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.

Divi Product Highlight: DiviWP Header Sections Pack Install

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

Divi Product Highlight: DiviWP Header Sections Pack Install

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.

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, then again 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 construction style features a get a divorce menu with a button on the very right kind.

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, 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.

See also  HostGator Controlled WordPress Web hosting Evaluate

Divi Product Highlight DiviWP Header Sections Pack Layout 3 Enable CSS

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

Divi Product Highlight DiviWP Header Sections Pack Layout 3 CSS 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.

Divi Product Highlight DiviWP Header Sections Pack Layout 3 CSS

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.

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

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 choices 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 moreover features a dark background section. The sub-menu moreover 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 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.

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

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 perfect row with blurb modules for contact information and social media practice 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 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.

See also  20 Random and A laugh Christmas Apps For Android

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

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

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

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 mum or father products.

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

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.

Divi Product Highlight DiviWP Header Sections Pack Layout 13 Column CSS

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

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 construction, practice the steps for Header Layout 13 and add 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 third column products, add the following CSS Class: diviwp-menu-col-3

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

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

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

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.

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 maximum regularly the equivalent as Header Layout 15, except for the blurb icons are on the left aspect of the perfect 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 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.

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

See also  WordPress Pagination: The right way to Upload Pagination Manually or With Plugins

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

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

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

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *