Author: Randy A. Brown

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 of header layouts in the Divi Marketplace to give you a head start. Header Layout Pack is one example. This is a set of over 80 custom headers that work for just about any type of website. In this post, we’ll look at Header Layout Pack to help you decide if it’s the right product for your needs.

Upload Header Layout Pack

Header Layout Pack includes two zipped files. The first is a single file that contains all 81 layouts. These layouts are uploaded together. The second is a supplementary file and includes six files. These are the categories of the header layouts. This allows you to upload just the layouts in a particular category, such as WooCommerce. This is also helpful if you have a file-size upload limit and can’t upload all the files at the same time.

The process to upload the layouts is the same for all the files:

1. Go to Divi
2. Select Divi Library
3. Click Import & Export
4. Select the Import tab
5. Click Choose File and navigate to the unzipped JSON files on your computer
6. Click Import Divi Builder Layouts

Once the import completes, you’ll have 81 new items in your Divi Library (if you chose the main JSON file). They’re labeled and named according to their categories, so they’re easy to identify. These layouts are standard Divi Library layouts, so they can be used with any Divi layout for a page, post, or any layout in the Divi Theme Builder, and stored in Divi Cloud for use on any Divi website. We recommend using them in the Divi Theme Builder and assigning them to global or individual categories.

Header Layout Pack Examples

Let’s look at a few header layouts from each of the six categories. In my examples, I’ll load each layout into the Divi Theme Builder. New layouts are often added to the Header Layout Pack. I’m selecting them at random, but I’ll focus on a mix of older and newer layouts. When viewing them in the Your Saved Layouts tab, you can select the categories or view all the layouts.

For my screenshots, I’m using the home page from the free Home Remodeling Layout Pack that’s available within Divi. We’ll look at the wireframe, desktop, and phone versions of the headers.

Advanced Headers

Firstly, here’s a look at Advanced Headers, which contains 30 layouts.

Advanced Header V1

The first Advanced Header includes a Menu Module, Button Module, and two Text Modules. It also includes a Code Module with CSS.

The header includes styled dropdown submenus. A quote CTA button stretches on hover.

While the menus in the desktop version open on hover, the CSS creates a custom mobile menu toggle with buttons that include arrows showing if the menu can be opened or collapsed.

Advanced Header V20

The Advanced Header version 20 includes four Image Modules, three Blurb Modules, a Menu Module, and a Code Module.

The Image Modules can be used for logos. All Blurb Modules are clickable buttons for contact information, services, and a CTA to get a quote.

Mobile menu toggles are added to the phone version with CSS.

Advanced Header V30

Advanced Header V30 includes three Text Modules, and Menu Module, and a Code Module.

The Desktop version displays a red top menu bar with a short message and a phone number in large text. A logo and menu are placed under this and include a dropdown submenu styled to match the top menu bar.

While the desktop version includes red highlights, the Phone Version removes the red background of the submenus and includes the CSS toggles.

Fullscreen Overlay Headers

Secondly, we’ll see Header Layout Pack’s Fullscreen Overlay Headers, which includes 3 layouts.

Fullscreen Overlay Header V2

Fullscreen Overlay V2 comes with lots of elements including text, images, buttons, blurbs, code, social media, a menu, etc.

It includes a hamburger menu icon with a hover animation. The CTA button widens on hover.

The menu opens full screen when clicked and includes clickable submenus.

Here’s the phone version, which follows the same design.

Fullscreen Overlay Header V3

Fullscreen Overlay Header V3 utilizes similar modules as the previous layout but creates a different design for the full-screen overlay.

The desktop header includes the CTA and hamburger icon with hover animation.

Its menu covers half the screen while an image takes the other half of the screen.

The phone version follows the same design for the menu, but doesn’t include the image.

Header with Slide-ins

Thirdly, we’ll look at Header Layout Pack’s Header with Slide-ins, which includes three layouts.

Header with Slide-ins V2

Version 2 creates the slide-in with a Blurb Module, several Text Modules, a Menu Module, a Button Module, and code.

The slide-in menu displays the submenus under a message. At the bottom of the menu, you can find a CTA and an image.

The phone version removes the image while keeping the menu design.

Header with Slide-ins V3

Version 3 includes Blurb Modules to create the slide-ins.

The desktop slide-in includes hover animation and displays text and icons. Each of the elements is clickable.

The clickable elements for the phone slide-in menu are much larger than the desktop version, making them easy to use on mobile.

Simple Headers

Fourthly, Simple Headers includes 30 layouts.

Simple Headers V15

Simple Headers version 15 has two Rows and includes a Social Media Module and several Blurb Modules.

The desktop version includes a top bar with contact information. A logo is centered, and the menu includes submenus.

The phone version adds the toggle buttons for the submenus.

Simple Headers V22

This one includes two Rows to create the header.

The top bar displays a CTA with a hover animation, the logo in the center, and a phone number. Its menu includes styled submenus.

The phone version displays the submenus with toggles created in the Code Module.

Square Logos Headers

Fifthly, the Square Logos Headers includes five layouts. They’re ideal if you have a logo that’s taller than most logos.

Square Logos Headers V3

This one was built with a Specialty Section to include a multi-column layout. The square logo is created with an Image Module in its own column.

The desktop version includes a top bar with a search box and contact information. All menus are styled to match the top bar’s background.

The phone version includes the submenu toggles created with CSS.

Square Logos Headers V4

Version 4 includes three columns to create the logo, menu, and CTAs.

The desktop version displays the logo and phone number in the two outer columns. A center column includes two Rows. The top Row shows contact information and a CTA, while the bottom Row displays the menu with a background styled to match the icons and the button of the top Row.

The phone version includes a large logo area. The submenus include the toggles created with CSS.

Woo Headers

Lastly, we’ll look at Header Layout Pack, which includes 10 WooCommerce headers.

Woo Headers V3

Our first Woo Header includes two Rows. The top Row includes a Text Module, while the second Row displays a Menu Module and several Icon Modules.

The Text Module for the top Row creates a sales banner. Graphics include Person, Heart, and Cart icons that can link to the person’s account login, their favorites list, and their shopping cart.

The phone version moves the icons above the hamburger menu. Like the others we’ve seen, this submenu includes toggles created with CSS.

Woo Headers V7

Woo header version 7 was built with three Rows that include Blurb Modules to create interesting WooCommerce links.

The desktop version shows a message and the Woo links in the top bar. A middle bar displays a logo and a WooCommerce product search. The menu bar includes social media buttons.

This is the phone version, which places the social media icons under the hamburger menu icon. Everything is spaced well on the phone screen, and it even includes the WooCommerce links and the product search box.

Woo Headers V10

Woo Header version 10 also includes three Rows. It includes a product search and uses a Text Module to create a banner.

The desktop version displays a green sales banner at the top. The icons, button, and highlights match the green bar. The middle bar includes the WooCommerce icons, while the menu and search at placed at the bottom.

Here’s the phone version, which places the search box under the hamburger menu. This one also includes the submenu toggles created with CSS.

Purchase the Header Layout Pack

Header Layout Pack is available in the Divi Marketplace for $15. It includes lifetime updates, unlimited website usage, and a 30-day money-back guarantee.

Ending Thoughts

That’s our look at Header Layout Pack. There are a lot of layouts in this header pack. They look elegant, have lots of design options, and they’re easy to use. Since the layouts were created by the same person, they share a commonality that I find makes them easier to use. The methods are standardized, so if you know how to customize one of the layouts you can customize the rest. If you’re interested in an extensive set of headers, Header Layout Pack is work considering.

We want to hear from you. Have you tried Header Layout Pack for your Divi website? Let us know about your experience in the comments.

The post Divi Product Highlight: Header Layout Pack appeared first on Elegant Themes Blog.

Divi Accordions Plus is a third-party module for the Divi Builder that adds a new accordion builder. Use multiple Divi Accordions Plus Modules together on a single page and they work as a single accordion, so when one opens another one closes. Style the accordions together or individually, display icons and images, and lots more. In this post, we’ll look at Divi Accordions Plus, see what it can do, and see how easy it is to use to help you decide if it’s the right product for your needs. We’ll use the Poke Restaurant About Page Layout as a backdrop for this tutorial. So if you haven’t downloaded it already, you can grab it now with your Divi membership.

Divi Accordions Plus Module

Divi Accordions Plus adds a new module to the Divi Builder. Simply add the module anywhere you want within your Divi layouts.

Accordion Submodules

The submodules create individual accordions. Add as many as you want by clicking Add New Item. You can also clone them, rearrange them, and delete them. They follow the settings in the main module, but they have specific content and design settings you’ll need to use.

Content

Add a title, subtitle (which you can disable if you want), and body content. These are the main elements of the accordions.

Item State

Item State sets the open or closed state of the accordions when the page loads. It’s off by default, so the accordions are closed. I didn’t open the accordion in this example. It opened automatically when I enabled Item State.

Divi Accordions Plus Accordion Submodules Design Settings

The Design tab for the submodules controls the settings for that one accordion. You can customize them in the main module’s settings if you want them to look the same, but you’ll still need to use these settings to choose the images and icons. Let’s look at the settings that are unique to the submodule.

Left Icon

Left Icon controls the graphical element that appears on the left of the accordion. Enable or disable it, have it rotate on open, choose an icon or an image, and style it with the standard Divi tools. An image or icon such as a logo works great on the left. In this example, I selected an image and enabled Rotate Left Icon (Open Toggle), so the image rotated when I opened the accordion.

For this example, I’ve adjusted the background and icon color.

Right Icon

Right Icon controls the graphical element that appears on the right of the accordion. Enable or disable it, have it rotate on open, choose an icon or an image, and style it with the standard Divi tools. An icon that indicates the open or closed state of the accordion works great on the right.

In this example, I’ve selected a different icon, changed the icon color, the background color, and added a styled border.

Divi Accordions Plus Content Settings

The Content tab includes the basic Divi settings and a couple of settings that are specific to Divi Accordions Plus.

Speed

Speed controls how fast the toggles open and close. It’s set in milliseconds.

Mode

Mode changes the way the accordions work.

Accordion Mode

Accordion Mode lets you choose between multiple active toggles and a single active toggle. Multiple Active Toggles leave all the toggles open until the user closes them. The example below shows Multiple Active Toggles.

Single Active Toggles only allows for one open toggle at a time. It closes the open toggle when the user selects a new toggle. This example shows Single Active Toggles.

Global Accordion Mode

Global Accordion Mode is a new interesting feature. It allows for a single open toggle regardless of the number of Divi Accordion Plus Modules on the page. Enable Global Accordion Mode within every Divi Accordions Plus module on the page where you want to use the Global Accordion Mode. Any modules that do not have this mode enabled will not be affected by the mode. This is especially great for creating multi-column accordions in the same Row.

In the example below, I’ve added another Divi Accordions Plus module and enabled Global Accordion Mode for both. When I open an accordion in one of the modules, the open accordion in the other module closes.

Divi Accordions Plus Design Settings

The Design settings control the default styles for all the accordions. These settings are overwritten by the individual submodule settings.

Header

Header controls the background color, the open toggle background color, spacing, borders, and box shadow. In this example, I’ve changed the background colors for the open and closed toggle.

Left Icon

Left Icon controls the icon color, icon open toggle color, background color, open toggle background color, spacing, border, and box shadow for the entire accordion module. If you want to have uniformity in styling, it’s best to set up the colors of the icon here, and then individually select your icon for each toggle in the accordion. In this example, I’ve added and styled a border around the icons to make it more seamless with the background color.

Right Icon

Right Icon controls the icon color, icon open toggle color, background color, open toggle background color, spacing, border, and box shadow. In the example, I’ve adjusted the open toggle colors, the border, and changed the icon color on open toggle.

Title

Title controls the title background color, open toggle background color, spacing, border, and box shadow.

Body

Body controls the item body, spacing, border, and box shadow. I’ve adjusted the border in this example.

Header Text

Header Text controls the open toggle text and allows you to control the title and subtitle independently from the same menu. It includes all the standard text controls. I’ve adjusted the colors of the titles and subtitles, changed the title font size, and set it to bold in the example below.

Body Headings

Body Headings includes all the standard text controls for the body headings that you’ve specified in the content area. In the example below, I’ve added both an H2 and H3 heading tag to the body content. I changed the font weights and color for both the headings within the body content.

Body Text

Body Text includes all the standard text controls for the body text in the content area. In this example, I’ve changed the font, made it italic, changed the color, and changed the font size.

Final Demo with Divi Poke Restaurant

This is what the final accordion looks like within the About Us Page Layout for the Divi Poke Restaurant Layout Pack.

Divi Accordions Plus Demos

Divi Accordions Plus comes with seven demos to get you started.

Demo 1

The first demo includes a multi-column accordion with multi-colored icons. The accordions have a single border, and the content is bordered on all sides.

Demo 2

Our second demo presents the accordion in a single column with blue highlights and box shadows. The icons have blue backgrounds.

Demo 3

Our third demo uses a two-column layout and utilizes different colors for each of the accordions.

Demo 4

The fourth demo uses a single-column accordion with warm colors and light borders.

Demo 5

Demo five uses red titles and icons and includes tan backgrounds for the body and green backgrounds for the headers. The accordions are placed in two columns.

Demo 6

The sixth demo uses light blue header backgrounds with a darker blue for the title text and icon background for the open accordion.

Demo 7

Demo seven displays each of the accordion’s elements independently with box shadows for each element.

Purchase Divi Accordions Plus

Divi Accordions Plus is available in the Divi Marketplace for $19. It includes unlimited usage, a 30-day money-back guarantee, and one year of support and updates.

Ending Thoughts

That’s our look at Divi Accordions Plus. This is a simple module, but it includes a lot of features for accordions. I especially like that it works with multiple modules on the same page. I found the settings intuitive and every setting I wanted to adjust was there. If you’re interested in a powerful accordion builder that’s easy to use, Divi Accordions Plus is worth a look.

We want to hear from you. Have you tried Divi Accordions Plus? Let us know what you think about it in the comments.

The post Divi Plugin Highlight: Divi Accordions Plus appeared first on Elegant Themes Blog.