Tag: divi marketplace

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.

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.

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

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

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

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.

Header Layout 2

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

Header Layout 3

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

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.

Then, open the menu item you would like to display as a button and add the CSS class diviwp-menu-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.

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.

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.

Header Layout 5

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

Header Layout 6

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

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.

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.

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.

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.

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.

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.

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.

First, add the CSS Class mega-menu two-column to the parent item.

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.

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

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.

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

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

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.

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.

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.

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.

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.

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.

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!

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

The Divi SEO Agency Theme features 30+ prebuilt pages, ideal for an SEO agency or a web service provider website you want to build using Divi. The site consists of dynamic pages full of eye-catching motion and comes with variations of several pages, giving you some flexibility with your website design. In this post, we’ll take a look at the Divi SEO Agency theme to help you decide if it’s the right Divi child theme for you.

Let’s get started!

Installing Divi SEO Agency Theme

To install the Divi SEO Agency Theme, open your WordPress Dashboard and navigate to the add new themes page. Click Upload Theme, upload the ZIP file containing the child theme, and click import. Once installed, activate the theme.

Once the child theme is installed and activated, you will see a new menu item in your Dashboard called “Imports Demo Data”. Click the Easy Demo Import tab and import the demo content. Once the import is complete, you are all set to begin replacing the demo content with your own.

Divi SEO Agency Theme

The Divi SEO Agency theme consists of 30+ pages. Let’s take a look at each page, starting with the home page, which has four variations.

Divi SEO Agency Theme Home V1

Divi SEO Agency Theme Home V1 Header and Introduction

The header features a large image that moves up and down on the page. The geometric shapes in the background of this section also move. On the right side are the header text and a call-to-action button. Below there are four blurb sections with an icon, a title, some text, and a link to read more. These modules move up on hover.

Divi SEO Agency Theme Home V1 About

The next few sections are where you can introduce your services. The first section features a couple of paragraphs of about text and an image that floats up and down. Next are three blurbs with an icon featuring three different services. These sections also move up on hover and the geometric shapes in the background move while you are on the page. The third section features six blurbs with icons where you can introduce your services. The image in the middle moves up and down.

Divi SEO Agency Theme Home V1 Lead Magnet

Next is a lead magnet section where visitors can submit their website and email address to receive an SEO check.

Divi SEO Agency Theme Home V1 Benefits

This section is where you can outline the benefits for your customer to use your services. It uses a moving image on the left and bar graphs on the right.

Divi SEO Agency Theme Home V1 Social Proof

This section features company logos for social proof.

Divi SEO Agency Theme Home V1 Team

In this section, you can feature your team members. On hover, the blue and orange circles around the profile photo rotate. This section features social media icons for each team member.

Divi SEO Agency Theme Home V1 Testimonials

This section features a slider with client testimonials. The blue circle over this section moves as you are on the page.

Divi SEO Agency Theme Home V1 Latest News

This is the final section on the home page and it features the latest blog posts. The blog category is listed over the featured image and there is a read more link to bring readers to the full post.

Divi SEO Agency Theme Home V2

The second version of the home page features a large header with some text and buttons with moving geometric shapes. Then there is the list of company logos and a list of three features highlighted below. Following this is a number counter which counts up as the page loads. Next is a section highlighting benefits, with 4 numbered blurbs.

These two sections continue to introduce the services. In the first section, you have six blurbs with icons and some description text. On hover, the background turns white. In the second section you have five tabs with a description, a read more link, and an image under each tab. This page also has the same team section and recent news section as was found on Home V1.

Divi SEO Agency Theme Home V3

The third version of the home page has a floating menu bar and a large graphic background with text on the left. The main header image floats up and down and the geometric shapes move while you are on the page. Below are three blurbs highlighting some features.

This page also has a pricing table with the cost, features, and a button to choose the plan. In addition to the unique features we covered, this page also has the SEO check lead magnet, company logos, benefits with numbered blurbs, benefits with progress bars, and latest news sections we saw on other pages.

Divi SEO Agency Theme Home V4

The fourth version of the home page is all on a darker background. The header has some text and a button on the left with a moving image on the right. Below is a number counter. The about section features three text sections connected with the dotted heart icon.

Another unique section for home version 4 is the “we deliver success” section. There is some introductory text with a dynamic moving image. Below are round number counters representing percentages relevant to the services the company provides. Aside from these unique sections, home version 4 features company logos, blurbs with icons, an SEO check lead magnet, team members, and recent posts.

Divi SEO Agency Theme Landing Page

The landing page features a dynamic header with moving elements, feature blurbs with icons, and placeholders for images that link to inner pages. This page also features several sections with text, images, and call-to-action buttons where you can describe your services and unique features.

Divi SEO Agency Theme Coming Soon Page

The coming soon page features a countdown timer and some text. There is also an email sign-up form and social media icons.

Divi SEO Agency Theme About Us Page

The about us page features many of the same sections found on the home pages. It starts with a dynamic header with moving geometric shapes. The following section has some about text and a number counter. The page also features team members, testimonials, and company logos.

Divi SEO Agency Theme Our Team Page

This page starts with a dynamic header and a section with some about text, an image, and number counters. Then follows the company logos and the team members section. Finally, there is a contact form at the bottom and some numbered blurbs featuring company benefits.

Divi SEO Agency Theme Single Team Page

This page features a single team member. It has a profile card at the top with the name, title, social media icons, photo, and other relevant information. Below is a longer bio section with personal info, press and awards, professional info, and a contact form.

Divi SEO Agency Theme Our Process Page

The our process page features a timeline with an orange dot that moves as you scroll. As the orange dot moves past each step, the icon gets covered with an orange border. Also on this page is the SEO check lead magnet, some features highlighted in a blurb with an icon and description text, and a section introducing services with three tabs.

Divi SEO Agency Theme Pricing Tables Page

The pricing tables page features two different pricing tables. The first layout has two pricing cards at an angle. When you hover over the card it comes to the front and straightens out. The second version is what was on the home page version 3.

Divi SEO Agency Theme FAQ Page

The FAQ page begins with some blurbs with icons, then features a call-to-action section with a button. Then there are the FAQ questions listed under a toggle.

Divi SEO Agency Theme Headers

The headers page features three header styles that can be used on the website. The first header style features the address, phone, email, and social media information at the top. The menu bar is on a white background and features the logo, menu items, search icon, and another icon that reveals a sidebar with contact information.

The second header style also features the address, phone and email, and social media information at the top. It also features the logo, menu items, search icon, and sidebar icon with contact information.

Finally, the third header style has a dark blue background for the top bar. It features social media icons, the phone number, and email address. The main menu bar features the logo and menu items on a red background.

This is the sidebar that appears when you select the icon with the four rounded squares on Header V1 and V2.

Divi SEO Agency Theme Footers Page

The footers page features the footer variations available for the theme. Footer 1 features the phone and email information as well as a newsletter sign-up form. Below is some about text with social media links, quick links to pages, a useful services section linking to other pages, and a latest news section featuring a couple of recent posts.

Footer 2 features the logo and about text with social media icons below. Additionally, there are some quick links and a useful services section. The final column features contact information. Below this is a newsletter sign up form and copyright information.

Footer 3 features a red background with a headline and a call-to-action button. Below this is some about text and social media icons, contact information, useful links, and latest news. At the bottom of the footer you have the terms of use, privacy policy, and copyright information.

Divi SEO Agency Theme Services V1

The services page features blurbs with icons and a short description of the services. The next section features a large image, some text, and two icons highlighting some features. There is also a pricing table and number counters on this page, as well as a bar graph counter.

Divi SEO Agency Theme Services V2

The second version of the services page starts with some tabs with large icons. Each tab has text and an image explaining the service. Next, there is the SEO check lead magnet and company logos, followed by a section with blurbs. The geometric shapes on these blurbs move as you are on the page. The page ends with a form to sign up for free SEO analysis, some about text with checkmarks, and a number counter.

Divi SEO Agency Theme Services V3

The third services page layout begins with a some text alongside an image. Below this there are some blurbs with icons on the left and some tabs with service details on the right. Following this are numbered feature highlights with icons. The blue circle around these icons move as you hover. Also on this page is the SEO check lead magnet, a bar graph counter, and company logos.

Divi SEO Agency Theme Services List Page

This page is where you can list all of your services. It is designed with an image on one side an text on the other describing the service, as well as a button to go to the full dedicated services page. Below this are two SEO check lead magnet forms, company logos, and a number counter.

Divi SEO Agency Theme Single Service Page

The single service page is a dedicated page for each service. It features a large image at the top, description text, a bar graph counter, blurbs with icons, tabs with service descriptions, and a team members section. On the left there is a sidebar with links to other service pages, blurbs highlighting phone and email support, and a form for the SEO check lead magnet.

Divi SEO Agency Theme Portfolio Page

The portfolio page features two layouts, one with large featured images and a title and category that appear on hover. The second layout is similar to the first but features a category filter at the top.

There are two variations of this page, one with two columns and one with three columns.

Divi SEO Agency Theme Portfolio Category

The portfolio category features the relevant projects. When you hover over the featured image you can see the title and category.

Divi SEO Agency Theme Portfolio Project Page

The portfolio project page features a large image, icons to represent some project details, and text and images to review the project. The page ends with related projects and a comment section.

Divi SEO Agency Theme Blog Page

The blog page features a grid layout with recent posts. There is also a two-column and four-column version of this page.

Divi SEO Agency Theme Blog Listing Page

The blog listing page features recent posts with a preview and featured image. On the right, you have a search bar, recent posts, categories, a calendar, and recent comments.

Divi SEO Agency Theme Blog Grid 2 Columns with Sidebar Page

This layout uses the grid layout for recent posts and features the sidebar that is on the blog listing page as well.

Divi SEO Agency Theme Single Post Page

This page features a single post with a sidebar. The page ends with latest posts and a comment section.

Divi SEO Agency Theme Single Category Page

The single category page features a single blog category. It uses a 3 column grid layout.

Divi SEO Agency Theme Contact Page

The contact page features the contact information next to an image, a contact form, and a map.

Where to Purchase the Divi SEO Agency Theme

The Divi SEO Agency Theme is available in the Divi Marketplace. It costs $39.99 for unlimited website usage and lifetime support and updates. The price also includes a 30-day money-back guarantee.

Final Thoughts

The Divi SEO Agency Child Theme is modern, clean, and full of dynamic layouts to capture your website visitor’s attention and convert new customers. It is perfect for SEO agencies, software companies, and web service providers, but can be customized to fit many different types of websites. If you are looking for a modern and dynamic website with lots of graphics and movement, this could be a great option for you.

We would love to hear from you! Have you tried the Divi SEO Agency theme? Let us know what you think about it in the comments!

The post Divi SEO Agency Theme – Divi Child Theme Overview appeared first on Elegant Themes Blog.

Divi Mega Pro is a third-party plugin for Divi that adds the ability to create mega menus and tooltips with the Divi Builder. Since the mega menus and tooltips are created with the Divi Builder, you can use any modules you want, including third-party modules, shortcodes, and code, and style them with Divi’s tools. In this post, we’ll take a look at Divi Mega Pro to help you decide if Divi Mega Pro is the right product for your needs.

Divi Mega Pro Builder

Rather than adding modules to the Divi Builder, Divi Mega Pro adds a new post type created with Divi layouts that WordPress menus and Divi Modules can display. Create and add as many as you want to any page and menu. A new menu item is added to the WordPress dashboard called Divi Mega Pro. This includes the Divi Mega Pro list, editor, and settings. Here, you can create and manage your mega menus and tooltips. We’ll look at each menu item in reverse order.

Divi Mega Pro Settings

The settings allow you to add a slide transition to the header, content, and footer. You can enable them independently. They’re disabled by default. The transition will change the content within the menu or tooltip while keeping its container visible. This forces the mega menu and tooltips into hover mode. I recommend enabling them unless you need to use the click mode.

Add New

To create a mega menu item or a tooltip, click Add New. This opens an editor where you can create the menu or tooltip. It includes the TinyMCE editor, and you can enable the Divi Builder to create it with Divi Modules. You’ll need to create a new item for every mega menu element you want to display. For example, if you want four different links in your header to show a different mega menu layout, you’ll need to create four different items.

The editor includes lots of tools in the right sidebar and at the bottom including the standard publishing tools and custom fields options. Let’s take a close look at each of the custom tools.

Display Locations

Choose where the mega menu can display. Select between all posts and pages, all posts, all pages, or specific pages. You can add exceptions for all posts or pages to the field. If you choose specific locations, then you can enter them into the field. You can also select to show the menu on author pages and archive pages, and force render.

Mega Pro Animation

Choose the animation the menu or tooltip will use when it’s opened. Choose Shift Away, Shift Toward, Perspective, Fade, or Scale. These give the mega menus an elegant look and feel when they’re opening and closing.

Mega Pro Triggers

Enter the CSS selector trigger into the field. It also shows the Mega Pro Unique Class that you’d enter into the CSS Class fields to display the layouts.

Mega Pro Display Settings

The settings include a lot of options. Choose the display direction, add top and bottom margin, choose the width, enter the maximum height, choose the CSS position from absolute or fixed, and enable an arrow.

If you enable the arrow, you’ll see some styling tools to choose the type, color, width, and height. It shows a preview, so you’ll know how it looks on the front end.

Custom Close Button Customizations

The close button customizations allow you to enable the close button on desktops and phones independently.

If you choose to customize the close button, you’ll see another set of options to adjust the colors, font size, border radius, and padding. It also includes a preview so you can see how it will look on the front end.

Mega Pro Additional Settings

The additional settings allow you to disable the menu on phones, tablets, and desktops individually. Chose the trigger type between hover and click, the exit type between hover and click, and enter the exit delay in the field.

Mega Pro Background

This one is placed under the editor. It has a color picker where you can specify the background color of the menu.

Divi Mega Pro List

This shows the list of Divi Mega Pro items that you’ve created. Each one includes the Unique Mega Pro Class. This is what you’ll copy to paste where you want the mega menu or tooltip to display. You’ll need to create and copy each menu item individually to build your mega menu.

Adding the Mega Menu

To add the mega menu to your WordPress header and footer menus, you’ll need to have CSS Classes enabled. First, go to Appearance > Menus in the WordPress dashboard. Select Screen Options in the upper right corner of the screen and make sure CSS Classes is checked.

Next, open the menu item that you want to display the mega menu item. Paste the Unique Mega Pro Class for the mega menu into the CSS Classes field.

Repeat this process for every mega menu item you want to display.

Here’s a look at this mega menu on the front end. I’ve used one of the demos that’s included, as we’ll see later.

Adding Tooltips

You can also use Divi Mega Pro to create mega tooltips. Simply add the CSS class to the element you want to show the tooltip. You can set the tooltip to open on hover or click. Any Divi Module can show a tooltip. Style the module as normal with the Divi tools.

To add the tooltip, open the Divi Module you want to show the tooltip. Go to the Advanced tab and paste the Unique Mega Pro Class into the CSS Class field. Save your settings and you’re ready to display tooltips.

Now when someone hovers over the element you’ve added the class to, the tooltip appears.

The tooltips also work to create mega menus for headers in the Divi Theme Builder. Create the menu items with Divi Modules such as Text Modules, Button Modules, Image Modules, etc. I only recommend using Menu Modules to display standard menus as each link will either open a submenu or the page the menu points to.

Add the Unique Mega Pro Class to the CSS Class field in each element you want to have a mega menu item. You can use this method to create custom headers and footers. In the example below, I’ve created a menu using standard Text Modules as the menu links. I’ll add a mega menu layout to each one.

The menu items will work as a normal menu and display the mega menu items on hover or click, depending on your settings. In the example below, I’ve hovered over the first menu link and the mega menu for that Text Module has opened.

Divi Mega Pro Templates

Divi Mega Pro includes 15 templates to get you started. They’re provided as JSON files. Upload them to your Divi Mega Pro editor and use them to create your Divi Mega Pro layouts. They include eCommerce banners, tabs, CTA’s, contact information, a login form, blog posts, and lots more. The layouts are well-designed and work great with any style of the website.

The templates are fully customizable, so you can adjust them to include your branded fonts and colors. This is template number 9, which creates eCommerce menus for featured brands. This shows the wireframe view within the back-end editor. You can also view the layouts on the front end. Mine displayed the layout with the sidebar by default, although I’m sure that can easily be disabled to show the layout in full width.

Here’s how it would look on the front end. This is the back-end editor showing the desktop view.

Where to Purchase Divi Mega Pro

Divi Mega Pro is available in the Divi Marketplace for $79. It includes unlimited website usage, one year of support and updates, and a 30-day money-back guarantee.

Ending Thoughts

That’s our look at Divi Mega Pro. I found creating and using the mega menus to be intuitive. Since it uses any Divi Builder module, creating the menus and tooltips works the same as building any Divi layout. The extra features, such as animations, buttons, etc., provide even more control over the design and specify how the menus and tooltips work. It works well with pages, posts, WooCommerce products, and more. The added templates are a great way to get started. If you’re interested in creating mega menus and tooltips for your Divi websites, Divi Mega Pro is worth a look.

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

The post Divi Plugin Highlight: Divi Mega Pro appeared first on Elegant Themes Blog.

The Divi Shop Builder adds 14 new modules to the Divi Builder that allow you to customize the design of default WooCommerce pages with Divi. The plugin also comes with some premade shop layouts to give you a jump start on customizing your site. If you run an online store using WooCommerce and want to be able to customize WooCommerce just like you would any other Divi Module, this could be a great plugin for you! In this plugin highlight, we’ll take a close look at the features that come with Divi Shop Builder to give you an idea of what you can accomplish with this plugin.

Let’s get started!

Installing Divi Shop Builder

Divi Shop Builder can be installed just like any other WordPress plugin. Open the plugins page in the WordPress dashboard and click Add New. Click Upload Plugin at the top, then select the .zip plugin file from your computer.

Once the plugin is installed, activate the plugin.

Divi Shop Builder

To add the Divi Shop Builder modules to your website open a page with the Divi Builder. Add a new section and row, then click the grey plus button to add a new module. You will see 14 new modules added to the insert module section, which you will use to build the shop. Let’s take a look at each module below.

Woo Shop + Module

Start by adding the Woo Shop + module to your shop page.

Here is how the shop module looks when it is first loaded.

Content Tab

Let’s take a look at the Woo Shop + module settings.

Products

The first section under the content tab is where you can choose and reorder the components displayed in the shop module. You can add a component by clicking the Add New Item button below.

There are 11 components to select from: Sale Badge, New Badge, Featured Image, Title, Ratings, Price, Add to Cart Quantity, Add to Cart, Categories, Stock, and Description. These options give you total control over what elements to display in the shop module, what order they are placed in, and more. When we get into the design settings, you’ll see how easy it is to completely customize the design of each of these components as well.

Here I’ve reordered the product components so that the new badge appears below the featured image.

Next in the next part, you can find the product view type setting. This allows you to change the type and order of products displayed in the module. You can select from Default (Menu ordering + name), Latest Products, Featured Products, Sale Products, Best Selling Products, Top Rated Products, and Product Category.

Below this, you can modify the number of products displayed in the module and change the order of products.

Here I modified the product description length to 10. You can also enable or disable Ajax, enable filtering with the Woo Products Filters module, change the layout, and change the number of product columns. This is the list view using the Grid/List View Switch layout, which adds a button to the top where you can switch between grid and list view.

The description content setting allows you to display a short description or a custom description. Following this, you can choose to display the product count results, product sorting, and pagination either above, below, above and below, or hide them entirely. You can also enable or disable sale flashes.

You can change the position of the new badge with the badge position settings. The default option is don’t overlay on product image, which adds a banner that spans the width of the featured image. Alternatively, you can select an overlay position (top left, top right, bottom left, bottom right) which adds a small badge over the image. You can also change the text for the new badge. Following this are the exact same settings for the sale badge.

Last in this section are some display options. You can choose to display the add to cart button, the add to cart quantity field, change the default add to cart quantity, the product image, prices, ratings, categories, stock, and new badge.

No Products Found

Here you can change the heading and message text for the No Products Found page.

Default Content Tab Settings

The Woo Shop + module also features the default content tab settings such as Link, Background, and Admin Label.

Design Tab

The design tab is where you can fully customize every aspect of the Woo Shop + module.

Overlay

First up, overlay settings. This is where you can customize the overlay that appears over the featured image on hover. In this example, I added a dark overlay and a white icon.

Image

With the image settings, you can change the padding and margin, add rounded corners, customize the border, and modify the image with any of the filter settings such as hue, saturation, brightness, and more.

Star Rating

Here you can customize the design of the star rating. You can change the non-active and active star rating color as well as the alignment, size, and spacing.

New Badge

Next is the new badge settings. You can customize the padding and margin, set how many days the new tab stays, and completely customize the design with all of the background, font, and border options.

Button

The button settings group has all of the default button customization options such as background, font, border, icon, and box shadow settings. Here I customized the text color, background, font, and border radius.

Quantity Field

With the quantity field options you can change the background color, text color, focus background color, focus text color, spacing, font, border, and shadow. I modified the spacing options to add space between the quantity field and the button. I also changed the font and border radius.

Product Container

Here you can change the design of the product container, which surrounds each individual product listed. You can change the padding, margin, background, rounded corners, border, and shadow. I added a gray background to the section and changed the grid columns to 3, then added a white background to the product container. I also added rounded corners and a shadow to achieve this design.

Product Description

This is where you can customize the product description text. It includes settings for the description padding and margin as well as all of the default font options.

Sorting Dropdown

Next, in this section you can customize the design of the sorting dropdown for the shop module. You can change the background color, text color, focus background and text color, set the dropdown margin and padding, modify the font options, and customize the border. For this example, I kept it simple by changing the font and adding a gray border.

Results Count

The results count options allow you to customize the font settings for this text. Here I changed the font.

Pagination

You can customize the design of the pagination here. There are options for the current page text color, current page text background, pagination color background, pagination text color, pagination font, and pagination border. In this example, I modified the current page text color, pagination text color, pagination font, pagination text size, and pagination wrapper rounded corners.

View Cart Button

The view cart button appears once a user adds a product to their cart. I enabled custom styles for the button and changed the text size, color, button background, border radius, font, icon, margin, and padding.

Grid/List View Button

The grid/list view button options allow you to change the icons, modify the icon and background colors, adjust the padding and margin, and customize the border and box shadow. I left the options default for this example.

No Products Found

In this settings group you can change the text and heading font, the spacing, the border, and the colors for the no products found message. I modified the text and heading font and added some bottom padding to the section.

Text

Here you can change the text alignment and add a text shadow.

Title Text

Next is the title text settings, where you can customize the product title font. For this example, I changed the font and the text size.

Price Text

All of the font options are available for the price text as well. Again, I changed the font and the text size for the price.

Old Price Text

The old price text appears with a strikethrough effect whenever a product is on sale. You can customize the font options here. I changed the font and increased the text size to match the regular price font.

Category Text

For the category text, I used the font options to change the font and text color.

In Stock Text

You can customize the in stock text with all of the font options as well. I changed the font and text color.

Out of Stock Text

Next is the out of stock text. I kept it simple and changed the font for this example.

Available On Backorder Text

Here I changed the available on backorder font and changed the text color to orange.

Sale Badge Text

Here you can customize the design of the sale badge. I changed the font and the background color.

Sale Price Text

Finally, I adjusted the font for the sale price text with the font options available.

Default Design Tab Settings

That’s it for the new settings added to the design tab. The module also comes with several of the default design tab options such as sizing, spacing, border, box shadow, filters, transform, and animation. You can use these design options to further enhance your Woo Shop + module.

Advanced Tab

The advanced tab is fairly standard and comes with all of the sections you would expect to find in order to customize your module with CSS and more. Under the Custom CSS section, you can add CSS to individually customize aspects of the shop module, such as product, onsale, new badge, image, and more.

Woo Products Filter Module

Now that we’ve taken a close look at the shop module, let’s take a look at the Woo Products Filter module. This module adds a filter to your page that you can use to modify your shop results. Click the grey plus button to insert a module and select the Woo Products Filters module.

Once you add the module, you may see this error message about enabling filtering.

Open your Woo Shop + module and select the option to enable filtering with the Woo Products Filters module. This will help connect the filter module and the shop module so that the shop items will change depending on the filters you select.

Content Tab

Under the content tab, you can add a new item to your filter module.

Once you add a new item it will open up in an individual settings window where you can select the type of filter and customize many aspects of the filter. There are individual design options for each filter which you can use to individually style the look of the filter. Each of these options are also available in the filter module design tab, where you can customize the overall design of each filter type.

There are 8 types of filters you can add: Category, Tag, Attribute, Search, Rating, Price, Stock Status, and Sale. Here I added a column to the row so that the filter can be placed to the side of the shop module.

Under the filter settings for the individual filter, you can select the filter type, choose to display or hide the filter title, and add custom filter title text.

Category Filter

The advanced filter settings for the individual filter change depending on the type of filter you have selected. For the category filter, you can choose to show parent categories only, parent categories and subcategories non-hierarchical, or parent categories and subcategories hierarchical. You can also change how the filter is displayed: checkboxes list, radio buttons list, dropdown single select, dropdown multi select, or tag cloud. For this example, I selected the dropdown multi select. Also in this section, you can enable or disable display as toggle, choose to show or hide the number of products, and change the “please select” text.

Tag Filter

For the tag filter, I am enabling the tag cloud display and disabling the toggle display.

Search Filter

Here are the search filter settings. Once again I’ve disabled the toggle view.

Rating Filter

The rating filter has several display options: single line stars (selected rating and up), single line stars (only selected rating), radio buttons stars, radio buttons text, checkboxes stars, checkboxes text, dropdown stars, dropdown text. I have selected the single line stars (selected rating and up) option.

Price Filter

Next is the price filter. You can choose between a from-to slider, a from-to number input, or a from-to slider and number input. For this example I selected the from-to slider and adjusted the maximum amount.

Stock Filter

You can display the stock filter as a checkbox list, a radio button list, a dropdown single select, a dropdown multi select, or a tag cloud. I selected the radio buttons list for this filter and selected to display the number of products.

Sale Filter

The sale filter options are pretty simple – you can enable or disable the toggle display and change the on sale text.

Attribute Filter

Finally, we have the attribute filter. I’ve chosen to use colors for the attribute example, and I have selected the checkboxes list display option.

Content Tab Filters Settings

Back in the content tab of the filter module settings, there are some additional options listed under the filters settings group.

First, you can select to display selected filters at the top or bottom, or hide them entirely. I chose to display them at the top. You can also choose to display or hide the selected filters title and change the title text.

Also in this section are options for the apply filters and clear filters buttons. You can choose to display them before or after the filters, or not at all. You can also change the button text. I chose to display both buttons after the filters.

The content tab also has a section for background settings and admin label settings.

Design Tab

The design tab for the filter module has an extensive amount of design options for you to completely customize the filter designs. You can customize the font, spacing, border, and background for each of the filter types. You can also customize the buttons, selected filters, sizing, spacing, border, box shadow, filters, transform, and animation options. We won’t go into much detail here, but just know that you can modify just about any aspect of the filter module to your liking.

For this example, I modified the font, added rounded corners to the selected filters, decreased the bottom margin between filters, added a border to the dropdown filter, changed the color of the active tag, price filter, stock status, and checkmarks to match the color scheme, customized the button design, and added a rounded corner and box shadow to the filter module. Here is the final design with the filter module and shop module.

Cart List Module

Now let’s move over to the cart page. First, the cart list module. This module will display the contents of your cart.

Content Tab

Within the module settings, you can change the content that is displayed. You can choose to show or hide certain columns such as the remove product column, the product column, the thumbnail, the product name, the price, the quantity, the subtotal, and the coupon code.

You can also rename any of the columns with custom text.

Additionally, you can customize the empty cart text, button text, and button URL.

The content tab also features the default background and admin label settings.

Design Tab

Here you can completely customize the design of the cart module. Every aspect of the cart module can be changed, including the buttons, the text, the table, and more.

I’ve customized the design by adding a white background and rounded corners, changing the font, increasing the image thumbnail size, and customizing the buttons.

Cart Totals Module

The cart totals module should also be added to the cart page. It will display the subtotal and total for the cart items and has a button to proceed to checkout.

Content Tab

Within the module settings, you can change the text such as the title, subtotal text, total text, and proceed to checkout button text. You can also add a background and change the admin label.

Design Tab

With the design settings, you can customize every aspect of the cart totals module. For this example, I added a background, a box shadow, and rounded corners to the module. I changed the font to match the rest of the design, and also customized the proceed to checkout button.

WooCommerce Notices Module

The WooCommerce Notices module can also be placed on the cart page. This module will display any error messages or notices that may come up. I’m adding it to the top of the cart page, above the cart list module.

Content Tab

Under the content tab you can enable test mode, which will display all of the notices on the front end while you test the design. Here is what the three different notices look like by default.

Design Tab

Here you can modify the design of the notices. I changed the background colors to correspond with the type of notice, and changed the styling to match the rest of the design.

Checkout Billing Module

Moving on to the checkout page, first up is the billing module. This is where you can collect billing details to complete the transaction.

Content Tab

Under the content tab, you can change the billing title text as well as any of the field labels. You can also add a link or background and change the admin label. Here I added a background color to the layout.

Design Tab

The design tab has options to customize everything from the heading and labels to the fields and borders. For this example, I kept the design in alignment with the other modules and added a rounded border and a box shadow, changed the spacing, and modified the font.

Checkout Coupon Module

Next, we can add the checkout coupon module to the checkout page.

Content Tab

In the content tab, you can choose to show the coupon section via toggle or to have it always displayed. I chose to have it displayed. Here you can also change the text for any of the coupon module elements.

Design Tab

Here is the designed coupon module. I added a background, box shadow, and rounded corners. I also changed the font and customized the button.

Checkout Order Module

Now let’s move on to the checkout order module. This is another module for the checkout page and it displays the customer’s order information such as the selected products, the subtotal, shipping, the total cost, payment options, and a privacy policy checkbox.

Content Tab

In the content tab you can change the heading text and the place order button text. You can also choose to show or hide the privacy policy and terms and conditions. Of course, you can also add a background and change the admin label here as well.

Design Tab

Just like the other modules, the checkout order module can also be completely customized. Here I changed the font, added a background and rounded corners, and customized the button.

Checkout Shipping Module

The last module for the checkout page is the checkout shipping module.

Content Tab

In the content tab, you can change the title text, choose to have the title toggle, and show or hide order notes. You can also change any of the field labels.

Design Tab

Here is the customized design. Again, I added a background, rounded borders, a box shadow, and changed the font.

And here is the full design for the checkout page.

Account Content Module

Divi shop builder also comes with some modules to customize the account page. Let’s take a look at the account content module first. There are different elements you can add to the page and you can rearrange them however you would like. These elements include dashboard, orders, subscriptions, downloads, addresses, account details, login, register, and lost password sections. Each element has its own settings page where you can customize the individual element’s design. The account content module also has design options where you can customize the overall design.

Here is the styled default dashboard view, along with the notice messages at the top.

This is the styled orders page, where customers can see all of their completed and pending orders.

This is an example of a downloads page.

As you can see, this plugin gives you total control over the design of the account page as well. Let’s take a look at a couple more modules that work with the account page.

Account Navigation Module

This module adds a navigation menu to the page so that users can view the different pages in their account. Just like the account content module, you can add and remove any of the pages from the menu and change their order. Here is the styled navigation module.

Account User Image Module

The account user image module adds the user’s profile image to the page. Here it is in action.

Account User Name Module

Similarly, the account user name module adds the user’s username to the page. You can alternatively select to display the first name, last name, full name, or display name.

Here is the full account interface on the front end. This is the account details page.

Thank You Module

The final module we’ll cover is the thank you module. This will appear after an order has been completed. You can change any of the labels using the content tab settings, and of course the entire module can be customized with its design settings. Here is the styled thank you page.

Divi Shop Builder Layouts

Divi Shop Builder also comes with several premade shop layouts that you can use to jump-start the design process. Let’s take a look at a couple of the designs.

Woo Shop + Module Demo 1

This is one of the shop demo layouts. It has a card-style design and features a green border that appears on hover.

Coffee Cart and Checkout Layouts

The coffee layout comes with a cart layout and a checkout layout. Here is the cart layout.

And here is the checkout layout.

Woo Shop + Food Layout

This is another shop module layout with a creative “sweet or salty” split layout. This layout features a round product image with a colored border.

Purchase Divi Shop Builder

Divi Shop Builder is available in the Divi Marketplace. It costs $109 for unlimited website usage and 1 year of support and updates. The price also includes a 30-day money-back guarantee.

Final Thoughts

That was our look at Divi Shop Builder. As you can see, this plugin is jam-packed with modules and design options that give you complete control over the design of your shop, cart, checkout, account, and thank you pages. As comprehensive as this plugin is, it is also very easy to use and customize. The plugin author also has extensive documentation for the product, which is very helpful. If you are looking for a way to customize your WooCommerce shop with Divi, this is a great option. We would love to hear from you! Have you tried Divi Shop Builder? Let us know what you think about it in the comments!

The post Divi Plugin Highlight: Divi Shop Builder appeared first on Elegant Themes Blog.