EDITS.WS

Author: Anika Huddleston

  • How to Create Matching Portfolio & Projects with Divi

    If you are a creative or run a service-based business, you may want to create a portfolio website to showcase your experience and display your projects. Having an online portfolio can help you be discovered by potential clients and can establish your credibility. You can use project pages to demonstrate your process and the ideas behind your work, helping visitors imagine what it might be like to work with you.

    In this tutorial, we will show you how to create a matching portfolio and project page with Divi. We will use dynamic content for the design of the portfolio page so that you can quickly and easily add new projects to your portfolio without having to design a project page each time. We’ll highlight using the powerful Divi Filterable Portfolio Module as well!

    Let’s get started!

    Sneak Peek

    Here is a preview of what we will design

    Portfolio Page

    Divi Matching Portfolio and Projects Portfolio Page Final Design

    Divi Matching Portfolio and Projects Portfolio Mobile Final Design

    Project Page

    Divi Matching Portfolio and Projects Project Page Final Design

    Divi Matching Portfolio and Projects Project Page Mobile Final Design

    What You Need to Get Started

    Before we begin, install and activate the Divi Theme and make sure you have the latest version of Divi on your website.

    Now, you are ready to start!

    How to Create Matching Portfolio & Projects with Divi

    Set Up Advanced Custom Fields Plugin

    For this design, we are going to be using dynamic content to create a template for our project pages. By using dynamic content in a template, you can create and update fully-designed project pages by filling out the custom fields associated with the project. You can use the built-in custom fields function in WordPress to do this, but it has some limitations. For this design we want multiple photos to dynamically populate, so we are going to use the Advanced Custom Fields Plugin to accomplish this. This plugin is free on the WordPress plugin directory and allows us to add powerful custom fields to the project pages.

    From the WordPress dashboard, navigate to the Plugins settings and click Add New. Then search for the Advanced Custom Fields Plugin, install, and activate.

    Divi Matching Portfolio and Projects Advanced Custom Fields

    Add Custom Fields

    Once the plugin has been installed and activated, open the Advanced Custom Fields settings and add a new Field Group. Add a title, then set the location rules and set the field group as active.

    • Title: Project
    • Location Rules: Show this field group if Post Type is equal to Project
    • Active: Yes

    Divi Matching Portfolio and Projects Edit Field Group

    Next, add the custom fields by clicking the blue Add Field button. For this tutorial, we will only modify the field label and type for each field. The first field will be the client name.

    • Field Label: Client Name
    • Field Type: Text

    Divi Matching Portfolio and Projects Add Field

    Next, add the following fields.

    • Field Label: Project Year
    • Field Type: Number
    • Field Label: Deliverables
    • Field Type: Text
    • Field Label: Project Description
    • Field Type: Text Area
    • Field Label: Image 1
    • Field Type: Image
    • Field Label: Image 2
    • Field Type: Image
    • Field Label: About Text
    • Field Type: Text Area
    • Field Label: Image 3
    • Field Type: Image
    • Field Label: Image 4
    • Field Type: Image
    • Field Label: Testimonial Text
    • Field Type: Text Area
    • Field Label: Testimonial Name
    • Field Type: Text
    • Field Label: Testimonial Job
    • Field Type: Text
    • Field Label: Image 5
    • Field Type: Image

    Divi Matching Portfolio and Projects All Fields

    Once you publish and save the custom fields, add a new project or edit an existing one. You should see the custom fields toward the bottom of the editing page. For this portfolio and project layout, fill out each of the custom fields and upload a featured image to the project. If you want to add a filterable portfolio, make sure the posts are categorized as well.

    Design Portfolio Page

    Now let’s get started with designing our portfolio page. We’ll start with a premade landing page and add a filterable portfolio module to it.

    Start With a Premade Layout

    Let’s start by using a premade layout from the Divi library. For this design, we will use the Print Designer Landing Page from the Print Designer Layout Pack.

    Add a new page to your website and give it a title, then select the option to Use Divi Builder.

    Divi Matching Portfolio and Projects Use Builder

    We will use a premade layout from the Divi library for this example, so select Browse Layouts.

    Divi Matching Portfolio and Projects Premade Layout

    Search for and select the Print Designer Landing Page.

    Divi Matching Portfolio and Projects Search Layout

    Select Use This Layout to add the layout to your page.

    Divi Matching Portfolio and Projects Use Layout

    Now we are ready to build our design.

    Add the Filterable Portfolio Module

    Add a new regular section below the image of the desk, above the orange “My Latest Prints” section.

    Divi Matching Portfolio and Projects New Regular Section

    Add a single row.

    Divi Matching Portfolio and Projects Insert Row

    Then, add the filterable portfolio module to the row.

    Divi Matching Portfolio and Projects Portfolio Module

    Open the section settings and add a background color.

    • Background: #eae8de

    Divi Matching Portfolio and Projects Background Color

    Next, open the filterable portfolio module settings. Under Content, set the post count to 6.

    • Post Count: 6

    Divi Matching Portfolio and Projects Post Count

    Under Elements, disable the title and categories.

    • Show Title: No
    • Show Categories: No
    • Show Pagination: Yes

    Divi Matching Portfolio and Projects Show Pagination

    Then, move to the design tab and open the Layout settings. Select the Grid layout.

    • Layout: Grid

    Divi Matching Portfolio and Projects Grid Layout

    Under Overlay, customize the options as follows:

    • Zoom Icon Color: #FFFFFF
    • Hover Overlay Color: rgba(10,10,10,0.25)
    • Hover Icon: Plus Icon in Circle

    Divi Matching Portfolio and Projects Hover Overlay

    Next, add an image box shadow.

    • Image Box Shadow: Below

    Divi Matching Portfolio and Projects Box Shadow

    Now modify the filter criteria font settings.

    • Filter Criteria Font: Inter
    • Filter Criteria Font Weight: Light
    • Filter Criteria Text Color: #000000

    Divi Matching Portfolio and Projects Filter Criteria Text

    Finally, modify the pagination font settings.

    • Pagination Font: Inter
    • Pagination Font Weight: Light
    • Pagination Text Color: #000000

    Divi Matching Portfolio and Projects Pagination Text

    We want the active portfolio filter and the active page color to be a different color than the rest of the text. Move over to the advanced tab and add the following CSS.

    Under the Active Portfolio Filter CSS section add the following:

    color: #C89A5A !important;

    Divi Matching Portfolio and Projects Custom CSS

    Finally, add the following to the Pagination Active Page CSS:

    color: #C89A5A !important;

    Divi Matching Portfolio and Projects Custom CSS 2

    Portfolio Page Final Design

    Now here is the final design for the portfolio section.

    Divi Matching Portfolio and Projects Portfolio Section Final Design

    Divi Matching Portfolio and Projects Portfolio Section Mobile Final Design

    Design Project Template

    Use the Theme Builder

    Now let’s create the template for our project pages. To do this, we will use Divi’s theme builder. Open the WordPress dashboard and navigate to the Theme Builder. Then select Add a New Template.

    Divi Matching Portfolio and Projects Theme Builder

    Next, set the template to apply to all project pages.

    Divi Matching Portfolio and Projects Template Settings

    Click “Add Custom Body”, then select “Build Custom Body”.

    Divi Matching Portfolio and Projects Custom Body

    Header Design

    First, add a fullwidth section to the page.

    Divi Matching Portfolio and Projects FW Section

    Then, add a fullwidth header module.

    Divi Matching Portfolio and Projects FW Header Module

    Open the header settings. We want the title of this page to dynamically populate based on the title of the project. Next to Title, click the dynamic content icon.

    Divi Matching Portfolio and Projects Use Dynamic Content

    Then, set the Title to “Posts/Archive Title.” Now the title will dynamically populate.

    Divi Matching Portfolio and Projects Select-Dynamic-Content

    Remove the text from the Button #1 and Body sections and remove the background color.

    Divi Matching Portfolio and Projects Background-Color-1

    Next, we want to add a dynamic background image. Move to the background image tab and click the dynamic content icon. Set the background image to “Featured Image”. This way, the featured image for the project post will appear at the top of our project page.

    Divi Matching Portfolio and Projects Background Image

    Move over to the design tab and open the layout settings. Set the alignment to centered and make the header fullscreen.

    Divi Matching Portfolio and Projects Alignment

    Then, modify the title font settings.

    • Title Font: Inter
    • Title Font Weight: Bold
    • Title Text Color: #FFFFFF

    Divi Matching Portfolio and Projects Title Font

    Use the responsive settings to set different text sizes for different screen sizes. Additionally, set the line height.

    • Title Text Size on Desktop: 90px
    • Title Text Size on Tablet: 60px
    • Title Text Size on Mobile: 40px
    • Title Line Height: 1.1em

    Divi Matching Portfolio and Projects Header Title Text Size

    Under the Overlay settings, add an overlay.

    • Background Overlay Color: rgba(0,0,0,0.33)

    Divi Matching Portfolio and Projects Background Overlay

    Now move the fullwidth section to the top of the page.

    Divi Matching Portfolio and Projects Move Section

    Project Description Design

    Open the section settings for the empty regular section on the page and set a background color.

    • Background: #dfdcd2

    Divi Matching Portfolio and Projects Section Background

    Then add a row with two columns.

    Divi Matching Portfolio and Projects Row Layout

    Add a text module to the column on the left.

    Divi Matching Portfolio and Projects Add Text Module

    Replace the body content with dynamic content. For this module, we will add the Project Year.

    Divi Matching Portfolio and Projects Add Project Year Dynamic

    Move to the design tab and open the Text font settings. Customize the font as follows.

    • Text Font: Inter
    • Text Font Weight: Light
    • Text Text Color: #000000

    Divi Matching Portfolio and Projects Year Text

    Next, set the text size and line height. Use the responsive options to set a smaller text size on tablet and mobile.

    • Text Text Size Desktop: 24px
    • Text Text Size Tablet: 20px
    • Text Text Size Mobile: 18px
    • Text Line Height: 1em

    Divi Matching Portfolio and Projects Year Text Size

    Finally, move to the Spacing section and add a bottom margin.

    • Margin Bottom: 10px

    Divi Matching Portfolio and Projects Margin Bottom

    Now duplicate the Project Year text module.

    Divi Matching Portfolio and Projects Duplicate Module

    Open the duplicated module settings and replace the Project Year dynamic content with the Client Name dynamic content.

    Divi Matching Portfolio and Projects Client Name

    Repeat the same steps and duplicate the Client Name text module. Then, replace the Client Name dynamic content with the Deliverables dynamic content.

    Divi Matching Portfolio and Projects Body Deliverables

    Next, add a new text module below the Deliverables module.

    Divi Matching Portfolio and Projects Insert Text Module

    Replace the content with the Project Description dynamic content.

    Divi Matching Portfolio and Projects Description

    Open the Text options under the Design tab and customize the font:

    • Text Font: Inter
    • Text Font Weight: Light
    • Text Color: #000000

    Divi Matching Portfolio and Projects Text Font

    Then set the text size and line height. Once again, use the responsive options to set different text sizes for different screens.

    • Text Size Desktop: 17px
    • Text Size Tablet: 16px
    • Text Size Mobile: 14px
    • Text Line Height: 1.8em

    Divi Matching Portfolio and Projects Text Size
    Finally, add an image module to the right column.

    Divi Matching Portfolio and Projects Image Module

    The image will also be dynamically populated. Select the dynamic content icon and select Image 1 from our custom fields.

    Divi Matching Portfolio and Projects Image 1

    About Section Design

    Now let’s move on to the About section. Add a new regular section to the page.

    Divi Matching Portfolio and Projects Regular Section

    Open the section settings and add a background color.

    • Background: #eae8de

    Divi Matching Portfolio and Projects Set Background

    Add a row with two columns.

    Divi Matching Portfolio and Projects Insert Row Layout

    Next, add an image to the left column.

    Divi Matching Portfolio and Projects Add Image

    Select the dynamic content icon and select Image 2.

    Divi Matching Portfolio and Projects Dynamic Image 2

    Next, add a text module to the right column.

    Divi Matching Portfolio and Projects Text Module New

    Add the body text.

    • Heading 2: “About”

    Divi Matching Portfolio and Projects About Text

    Under the design tab, modify the heading text styles.

    • Heading 2 Font: Inter
    • Heading 2 Font Weight: Light
    • Heading 2 Text Color: #000000

    Divi Matching Portfolio and Projects Text Settings

    Next, modify the text size using the responsive options, and add the line height.

    • Heading 2 Text Size Desktop: 60px
    • Heading 2 Text Size Tablet: 36px
    • Heading 2 Text Size Mobile: 30px
    • Heading 2 Line Height: 1.2em

    Divi Matching Portfolio and Projects Heading Size

    Finally, open the Sizing settings and remove the bottom margin.

    • Margin-Bottom: 0px

    Divi Matching Portfolio and Projects Margin

    Duplicate the Project Description text module from the section above, then drag it to below the About text module.

    Divi Matching Portfolio and Projects Duplicate and Move

    Open the duplicated module settings and replace the dynamic content with the About Text.

    Divi Matching Portfolio and Projects About Text

    Images 3 and 4

    Add a new row with two columns to the page.

    Divi Matching Portfolio and Projects New Row 2 Columns

    Then, add an image module to the left column.

    Divi Matching Portfolio and Projects Insert Image Module

    Using the dynamic content settings, set this image module to the Image 3 custom field.

    Divi Matching Portfolio and Projects Image 3 Dynamic

    Under the Sizing settings in the Design tab, enable Force Fullwidth.

    • Force Fullwidth: Yes

    Divi Matching Portfolio and Projects Image Fullwidth 3

    Repeat these steps in the right column and add an image module. Use the dynamic content settings to set this image to Image 4.

    Divi Matching Portfolio and Projects Image 4 Dynamic

    Once again, enable Force Fullwidth in the Sizing settings.

    Divi Matching Portfolio and Projects Image Fullwidth 4

    Next, open the row settings and open the Sizing settings under the Design tab. Customize the sizing settings as follows:

    • Use Custom Gutter Width: Yes
    • Gutter Width: 1
    • Width: 100%
    • Max Width: 100vw

    Divi Matching Portfolio and Projects Row Settings

    Testimonial Layout

    Add a new row with a single column to the page.

    Divi Matching Portfolio and Projects New Row

    Then, add the testimonial module.

    Divi Matching Portfolio and Projects Add Testimonial Module

    We will use dynamic content in this module as well. Open the testimonial module setting and add the following dynamic content to the fields.

    • Author: Testimonial Name Dynamic Content
    • Job Title: Testimonial Job Dynamic Content
    • Company: Client Name Dynamic Content
    • Body: Testimonial Text Dynamic Content

    Divi Matching Portfolio and Projects Testimonial Content

    Delete the testimonial image.

    Divi Matching Portfolio and Projects Remove Image

    Move to the design tab and customize the quote icon.

    • Quote Icon Color: #000000
    • Quote Icon Background Color: rgba(255,255,255,0)

    Divi Matching Portfolio and Projects Quote Icon

    Next, modify the body font.

    • Body Font: Inter
    • Body Font Weight: Light
    • Body Text Color: #000000

    Divi Matching Portfolio and Projects Body Font Testimonial

    Customize the body text size using responsive options and adjust the body line height.

    • Body Text Size Desktop: 17px
    • Body Text Size Tablet: 16px
    • Body Text Size Mobile: 14px
    • Body Line Height: 1.8em

    Divi Matching Portfolio and Projects Body Text Size Line Height

    Next, customize the author text settings.

    • Author Font: Inter
    • Author Font Weight: Bold
    • Author Text Size Desktop: 17px
    • Author Text Size Tablet: 16px
    • Author Text Size Mobile: 14px

    Divi Matching Portfolio and Projects Author Font

    Then modify the font settings for the position text.

    • Position Font: Inter
    • Position Font Weight: Light
    • Position Text Size Desktop: 17px
    • Position Text Size Tablet: 16px
    • Position Text Size Mobile: 14px

    Divi Matching Portfolio and Projects Position Font

    Customize the company font settings as well.

    • Company Font: Inter
    • Company Font Weight: Light
    • Company Text Size Desktop: 17px
    • Company Text Size Tablet: 16px
    • Company Text Size Mobile: 14px

    Divi Matching Portfolio and Projects Company Font

    Finally, add a box shadow to the testimonial module.

    • Box Shadow: Below

    Divi Matching Portfolio and Projects Box Shadow

    Fullwidth Image

    Add a fullwidth section to the page.

    Divi Matching Portfolio and Projects Fullwidth Section

    Then, add a fullwidth image module.

    Divi Matching Portfolio and Projects Fullwidth Image Module

    Using the dynamic content settings, set this image module to Image 5.

    Divi Matching Portfolio and Projects Dynamic Image 5

    Call to Action Sections

    Now our dynamic content has been laid out. There are a couple of call-to-action sections that we will copy and modify from the portfolio page. In a different tab, open the portfolio page in the visual builder, then scroll to the bottom of the page.

    Copy the “Custom Designs & Commissions” section.

    Divi Matching Portfolio and Projects Copy Section

    Move back to the project page template and paste the “Custom Designs & Commissions” section below the existing content.

    Divi Matching Portfolio and Projects Paste Section

    Open the section settings and change the background color.

    • Background: #333333

    Divi Matching Portfolio and Projects Background Color

    Open the settings for the “Custom Designs & Commissions” text module and change the Heading 2 text color.

    • Heading 2 Text Color: #FFFFFF

    Divi Matching Portfolio and Projects Change Heading Color

    Then, open the module settings for the body text and change the text color.

    • Text Text Color: #FFFFFF

    Divi Matching Portfolio and Projects Change Text Color

    Next, move back to the portfolio page. Copy the “Free Matting on Orders of 4 or More Prints” section.

    Divi Matching Portfolio and Projects Copy Section 2

    Then, paste the “Free Matting” section to the bottom of the Project template page.

    Divi Matching Portfolio and Projects Paste Section 2

    Open the Call To Action module settings and change the text.

    • Title: Shop My Latest Prints
    • Button: Shop Now

    Divi Matching Portfolio and Projects Modify Section Text

    Open the row settings, then open the Column 2 settings.

    Divi Matching Portfolio and Projects Column 2 Settings

    Change the background color.

    • Background: #ff804f

    Divi Matching Portfolio and Projects Column 2 Background

    Then, add a background image. This image of abstract lines should be in your media library as long as you used the print designer landing page layout pack to design the portfolio page.

    • Background Image: Print-designer-10.png

    Divi Matching Portfolio and Projects Add Background Image

    Footer Section

    We will also copy the footer section from the portfolio page to use on the project template. Move to the tab with the portfolio page and copy the “Subscribe for Drop Updates” footer section.

    Divi Matching Portfolio and Projects Copy Footer

    Then finally, paste the footer section to the bottom of the project template page.

    Divi Matching Portfolio and Projects Paste Footer

    Project Page Final Design

    Here is the completed design for the project page. The template is applied to one of the projects and is populated with dynamic content.

    Divi Matching Portfolio and Projects Project Page Final Design

    Divi Matching Portfolio and Projects Project Page Mobile Final Design

    Final Result

    Now let’s take a look at our matching portfolio and project pages.

    Portfolio Page

    Divi Matching Portfolio and Projects Portfolio Page Final Design

    Divi Matching Portfolio and Projects Portfolio Mobile Final Design

    Project Page

    Divi Matching Portfolio and Projects Project Page Final Design

    Divi Matching Portfolio and Projects Project Page Mobile Final Design

    Final Thoughts

    By using dynamic content in your designs, you can easily create templates that allow you to quickly add new pages and content to your website without having to design the page layout each time. This works great for portfolio and project content, but you can use the same principles to create any kind of page template you would like! For another portfolio tutorial, check out this article to learn how to create a scrollable portfolio navigation list. Do you use dynamic content or templates on your website? We would love to hear from you in the comments!

    The post How to Create Matching Portfolio & Projects with Divi appeared first on Elegant Themes Blog.

  • Divi SEO Agency Theme – Divi Child Theme Overview

    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.

    Divi SEO Agency Theme Divi Child Theme Overview Install-2

    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 Divi Child Theme Overview Install-1

    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 Divi Child Theme Overview Home V1 Header

    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 Divi Child Theme Overview Home V1-7

    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 Divi Child Theme Overview Home-V1-6

    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 Divi Child Theme Overview Home-V1-5

    Divi SEO Agency Theme Home V1 Social Proof

    This section features company logos for social proof.

    Divi SEO Agency Theme Divi Child Theme Overview Home V1-4

    Divi SEO Agency Theme Home V1 Team

    Divi SEO Agency Theme Divi Child Theme Overview Home V1-3

    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

    Divi SEO Agency Theme Divi Child Theme Overview Home V1-2

    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 Divi Child Theme Overview Home V1-1

    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.

    Divi SEO Agency Theme Divi Child Theme Overview Home V2-1

    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 Divi Child Theme Overview Home V2-2

    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.

    Divi SEO Agency Theme Divi Child Theme Overview Home V3-2

    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 Divi Child Theme Overview Home V3-1

    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.

    Divi SEO Agency Theme Divi Child Theme Overview Home V4-2

    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 Divi Child Theme Overview Home V4-1

    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 Divi Child Theme Overview Landing-1

    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 Divi Child Theme Overview Coming Soon

    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 Divi Child Theme Overview About Us

    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 Divi Child Theme Overview Our Team

    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 Divi Child Theme Overview Single Team

    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 Divi Child Theme Overview Our Process

    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 Divi Child Theme Overview Pricing

    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 Divi Child Theme Overview FAQ

    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.

    Divi SEO Agency Theme Divi Child Theme Overview Header 1

    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 Divi Child Theme Overview Header 2

    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 Divi Child Theme Overview Footer

    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 Divi Child Theme Overview Services V1

    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 Divi Child Theme Overview Services V2

    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 Divi Child Theme Overview Services V3

    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 Divi Child Theme Overview Services List

    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 Divi Child Theme Overview Single Service

    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.

    Divi SEO Agency Theme Divi Child Theme Overview Portfolio

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

    Divi SEO Agency Theme Divi Child Theme Overview Portfolio 2

    Divi SEO Agency Theme Divi Child Theme Overview Portfolio 3

    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 Divi Child Theme Overview Portfolio 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 Divi Child Theme Overview Portfolio Project

    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 Divi Child Theme Overview Blog Grid

    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 Divi Child Theme Overview Blog Listing

    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 Divi Child Theme Overview Blog Grid Sidebar

    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 Divi Child Theme Overview Single Post

    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 Divi Child Theme Overview Single Category

    Divi SEO Agency Theme Contact Page

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

    Divi SEO Agency Theme Divi Child Theme Overview Contact

    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.

    Divi SEO Agency Theme Tutorial

    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 Plugin Highlight: Divi SuperTabs

    Divi SuperTabs is a third-party plugin for Divi that adds a tab module to the Divi Builder. Although the Divi Builder already has a tab module, this plugin offers some unique design options and features that allow you to create more complex tabs for your Divi website. In this plugin highlight, we’ll see what Divi SuperTabs can do and help you decide if this is the right plugin for your website.

    Let’s get to it!

    Installing Divi SuperTabs

    Installing Divi SuperTabs is simple and straightforward. Navigate to the plugin page on your WordPress dashboard, then click upload plugin. Upload the ZIP file for the plugin, then activate the plugin once it is installed.

    Divi Plugin Highlight Divi SuperTabs Install

    Divi SuperTabs Module

    A new module is added to the Divi Builder called SuperTabs. This module allows you to add complex and customizable tabs to your Divi layout. Let’s look at the main features.

    Divi Plugin Highlight Divi SuperTabs Add Module

    Divi SuperTabs Tab Settings

    Under the content tab for the SuperTabs settings, you can add your tabs. Each tab also has its own settings menu, allowing you to customize the design of each individual tab.

    Divi Plugin Highlight Divi SuperTabs New Tab

    Tab Settings – Content

    Within each tab’s settings, you can add the tab content such as the title, subtitle, and tab content.

    Divi Plugin Highlight Divi SuperTabs Tab Content

    In the Layout section, you can select from a variety of layouts for the content in your tab. In the example above, I used the Image Left, Text, Button layout.

    Divi Plugin Highlight Divi SuperTabs Tab Layout

    Alternatively, you can select the library option to use any Divi Library layout in a tab, allowing you to create more complex designs using other Divi modules.

    Divi Plugin Highlight Divi SuperTabs Library Layout 2

    To use a library item with Divi SuperTab, save your desired layout to the Divi Library and make sure to add it to the “Tabs Content” category.

    Divi Plugin Highlight Divi SuperTabs Add To Library

    Then, select Library under the tab layout settings and add your Divi Library layout.

    Divi Plugin Highlight Divi SuperTabs Library Layout

    Also under the content tab of the tab settings, you can add an icon to your tab. SuperTab allows you to use Divi’s default icons, FontAwesome’s icons, and even upload your own custom icons.

    Divi Plugin Highlight Divi SuperTabs Tab Icon

    You can also set a tab to link to a URL so that the link opens when the tab is selected. This is a handy way to link to external websites alongside your tab content. You can also set a link for the entire module as well under the Link settings.

    Divi Plugin Highlight Divi SuperTabs Tab Link

    Finally, you can set a unique background for your tab. The background settings include all of Divi’s default background options (color, gradient, image, video, pattern, and mask). In this example, I added a simple color background to this tab.

    Divi Plugin Highlight Divi SuperTabs Tab Background

    Tab Settings – Design

    Under the design tab of the tab settings, you can find many options to completely customize the look of your tab. When you customize the design this way, your changes are only applied to the individual tab you are editing, not the rest of the tabs. The design options within the individual tab settings are the same as the design options within the SuperTabs settings, so the main difference is whether you want your design to apply to every tab or only apply to a single tab.

    With the design settings, you can edit the look of the navigation, tab, content, layout, text, sizing, spacing, etc. We’ll go over all of the design options in detail later on in this article.

    Divi Plugin Highlight Divi SuperTabs Tab Design Settings

    Tab Settings – Advanced

    Under the Advanced tab, you have all of the default Advanced Divi options including Custom CSS, Conditions, Visibility, Transitions, Position, and Scroll Effects.

    Divi Plugin Highlight Divi SuperTabs Tab Advanced Settings

    Divi SuperTabs Content Tab

    Now that we have covered the settings for the individual tabs within the Divi SuperTabs module, let’s explore the general settings for the SuperTabs module, starting with the content tab. As we already covered, here is where you add each of your tabs.

    Arrow

    With this option, you can add an arrow to your tabs that will display on the active tab. You can see an example of this above. The arrow color can be customized in the design tab.

    Divi Plugin Highlight Divi SuperTabs Arrow

    Link

    This option is a default Divi module option allowing you to link the module to a URL.

    Background

    You can add a background to the module with the Background option. When you add a background this way, the color spans the tab navigation and the content area. In this example, I added a yellow background to the module. There are other background options in the Design tab, which allow you to add different colors for the tabs and content area. We’ll go over those design options in the next section.

    Divi Plugin Highlight Divi SuperTabs Background

    Divi SuperTabs Design Tab

    The design tab is where this plugin really shines. There are many options for you to customize every aspect of the SuperTabs module. Let’s take a look.

    Nav Settings

    Under the Nav settings, you can change the navigation placement, alignment, and subtitle placement. In the example above, the navigation placement is set to Left. You can also make the tabs sticky so that they stick to the top of the page as you scroll through the tab content.

    Divi Plugin Highlight Divi SuperTabs Nav Settings

    Also under the nav settings, you can completely customize the nav spacing by changing the nav width, margin, padding, and gutter. In this example, I removed the left padding and changed the nav width to 20%. Finally, you can customize the colors and overall design of the navigation bar by changing the background color, adding rounded corners, or adding a border. I changed the navigation bar background to green.

    Divi Plugin Highlight Divi SuperTabs Nav Settings 2

    Tab Settings

    In the tab settings, you can customize the tab padding, the active tab background color, and the inactive tab background color. You can also change the icon placement, alignment, margin, and size. Finally, you can choose to hide the icon or title, add rounded corners, or add a border.

    In the example below I changed the active tab background color to a lighter green and changed the icon placement to left and added an icon margin.

    Divi Plugin Highlight Divi SuperTabs Active Tab Background

    Arrow Settings

    In the arrow settings, you can change the arrow color. I changed it to a lighter green to match the active tab background color.

    Divi Plugin Highlight Divi SuperTabs Arrow Settings

    Content Settings

    Here you can customize the overall design for the content in your tabs. You can add padding, rounded corners, and a border. I added some padding to the content section to bring a better balance to the overall design.

    Divi Plugin Highlight Divi SuperTabs Content Settings

    Layout

    In the layout settings, you can set the nav bar to be inset, displaying within the frame of the tab.

    Divi Plugin Highlight Divi SuperTabs Inset

    Nav Item Text

    Here you can customize the nav item font, font weight, style, color, size, spacing, line height, and shadow. Here I changed the nav item font color to white, This also changes the icon color.

    Divi Plugin Highlight Divi SuperTabs Nav Font

    Active Nav Item Text

    The Active Nav Item Text settings have the same settings as the nav item text settings, but these options apply only to the nav item when it is active (selected). Here I changed the active nav item text color to orange.

    Divi Plugin Highlight Divi SuperTabs Active Nav Text Color

    Sub Title Text

    Here you can customize the subtitle text design. The options are the same as the nav text options.

    Divi Plugin Highlight Divi SuperTabs Subtitle Text

    Active Tab Sub Title Text

    And in this section you can customize the active subtitle text design. Again, we have the same customization options as the last three sections, but these settings only apply to the subtitle when it is active.

    Other Design Settings

    In addition to the unique settings we covered, there are also other default options such as sizing, spacing border, box shadow, filters, transform, and animation.

    Divi Plugin Highlight Divi SuperTabs Design Settings

    Divi SuperTabs Advanced Tab

    The Advanced tab for Divi SuperTabs is pretty standard. You can add custom CSS to customize the module even more, and you can use the other settings such as conditions, visibility, transitions, position, and scroll effects to bring your SuperTabs design to the next level.

    Divi Plugin Highlight Divi SuperTabs Advanced

    Divi SuperTabs Examples

    Here are a few examples of how you can use Divi SuperTabs.

    Pricing Table

    The first example is a pricing table. The content is from the Device Repair layout pack. I saved each of the pricing tables to the Divi Library and used the Library layout feature to add the content to each tab. This makes it easy to add more complex content layouts in the tabs.

    Divi Plugin Highlight Divi SuperTabs Example 1

    How It Works

    The second example uses the tabs to organize different steps of a process. This layout was made using the Estate Planning layout pack. I used the individual tab settings to set a different tab color and background for each of the tabs.

    Divi Plugin Highlight Divi SuperTabs Example 2

    Features

    The final example uses the Divi Home Staging Layout Pack. I used SuperTabs to organize some of the features being highlighted on the page. Additionally, I used custom icons to add some visual interest to the tabs.

    Divi Plugin Highlight Divi SuperTabs Example 3

    Purchase Divi SuperTabs

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

    Final Thoughts

    Divi SuperTabs is a feature-packed plugin for the Divi Builder that allows you to create complex tabs for your Divi website. This plugin’s strong suit is definitely the ability to import layouts from your Divi library as a tab, allowing you to add complex tab content containing other Divi modules. Additionally, the customizability of the plugin is great. With all of the settings available you can customize and fine-tune the tabs to achieve the exact look you want.

    Overall Divi SuperTabs is very easy to set up and use, and you can create great-looking tabs to organize the information on your website. If you feel limited by Divi’s native tabs module or want to use Divi Library content within your tabs, this plugin might be a great option for you.

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

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

  • 3 Eye-Catching Gradients You Can Apply to Your Fullwidth Header Module with Divi’s Gradient Builder

    Divi’s Fullwidth Header Module makes it easy to build dynamic header sections for your website without having to add multiple modules for each component. With the Fullwidth Header Module, you can add and customize the look of your text, images, background, spacing, and more — all from one module. When used in combination with Divi’s built-in background gradient settings, you can create eye-catching designs to promote your business or service.

    In this tutorial, we will show you how to create three unique fullwidth header layouts with gradient backgrounds.

    Let’s get started!

    Sneak Peek

    Here is a preview of what we will design.

    Gradient 1

    Divi Fullwidth Header Gradient Background Layout 1 Final Design

    Divi Fullwidth Header Gradient Background Layout 1 Final Design Mobile

    Gradient 2

    Divi Fullwidth Header Gradient Background Layout 2 Final Design

    Divi Fullwidth Header Gradient Background Layout 2 Final Design Mobile

    Gradient 3

    Divi Fullwidth Header Gradient Background Layout 3 Final Design

    Divi Fullwidth Header Gradient Background Layout 3 Final Design Mobile

    What You Need to Get Started

    Before we begin, install and activate the Divi Theme and make sure you have the latest version of Divi on your website.

    Now, you are ready to start!

    Let’s Get Started!

    Gradient 1

    Create a New Page with a Premade Layout

    Let’s start by using a premade layout from the Divi library. For this design, we will use the Food Recipes Home Page from the Food Recipes Layout Pack.

    Add a new page to your website and give it a title, then select the option to Use Divi Builder.

    Divi Fullwidth Header Gradient Background Layout 1 Use Builder

    We will use a premade layout from the Divi library for this example, so select Browse Layouts.

    Divi Fullwidth Header Gradient Background Layout 1 Browse Layouts

    Search for and select the Food Recipes Home Page layout.

    Divi Fullwidth Header Gradient Background Layout 1 Search Layout

    Select Use This Layout to add the layout to your page.

    Divi Fullwidth Header Gradient Background Layout 1 Use Layout

    Now we are ready to build our design.

    Recreate the Hero Section Using the Fullwidth Header Module

    First, we are going to start by recreating the hero section at the top of this layout using a Fullwidth Header Module. Add a new fullwidth section to the page, right below the current hero section.

    Divi Fullwidth Header Gradient Background Layout 1 Add Fullwidth Section

    Next, add a Fullwidth Header Module to the fullwidth section.

    Divi Fullwidth Header Gradient Background Layout 1 Fullwidth Header Module

    Now that our header module is in place, let’s update the header content in the Text section of the Content tab.

    • Title: New Recipes Every Day
    • Button #1: Browse Recipes
    • Button #2: Download the Cookbook

    Divi Fullwidth Header Gradient Background Layout 1 Content

    • Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec diam ultricies, scelerisque arcu quis, mattis purus. Morbi tellus nibh, sollicitudin a gravida quis, commodo eget eros.

    Divi Fullwidth Header Gradient Background Layout 1 Body

    Under Background, remove the default background color and add the background image.

    Divi Fullwidth Header Gradient Background Layout 1 Background Image

    Move to the design tab and open the title text settings. Customize the settings as follows:

    • Title Font: Cormorant Garamond
    • Title Weight: Bold

    Divi Fullwidth Header Gradient Background Layout 1 Title Font

    Next, set the title text size and line height.

    • Title Text Size: 64px
    • Title Line Height on Desktop: 1.5em

    Divi Fullwidth Header Gradient Background Layout 1 Title Size

    To optimize the design for mobile devices, we need to decrease the size of the title line height on mobile. Select the responsive settings, then set the mobile line height.

    • Title Line Height on Mobile: 1em

    Divi Fullwidth Header Gradient Background Layout 1 Mobile Line Height

    Now let’s customize the body font options. Here are the settings:

    • Body Font: Cormorant Garamond
    • Body Font Weight: Medium

    Divi Fullwidth Header Gradient Background Layout 1 Body Font

    • Body Text Size: 24px
    • Body Line Height: 1.8em

    Divi Fullwidth Header Gradient Background Layout 1 Line Height

    Customize Button Styles

    Next, open the button one settings. Enable custom styles, then set the text size.

    • Use Custom Styles for Button One: Yes
    • Button One Text Size: 14px

    Divi Fullwidth Header Gradient Background Layout 1 Button Styles

    Add a background color to the button.

    • Button One Background: #FF7864

    Divi Fullwidth Header Gradient Background Layout 1 Button Background

    Customize the button border settings:

    • Button One Border Width: 8px
    • Button One Border Color: #FF7864
    • Button One Border Radius: 0px

    Divi Fullwidth Header Gradient Background Layout 1 Button Border

    Next, customize the font and disable the button icon.

    • Button One Font: Montserrat
    • Button One Font Weight: Medium
    • Button One Font Style: TT (Capitalized)
    • Show Button One Icon: No

    Divi Fullwidth Header Gradient Background Layout 1 Button Font

    Next, we will customize button two. The design is mostly the same as button one but with different colors. To skip some repetitive steps, let’s copy the button one styles to button two, then customize the design from there.

    First, right-click on the button one settings and copy the button one styles.

    Divi Fullwidth Header Gradient Background Layout 1 Button Styles

    Next, right-click on the button two settings and paste the button one styles.

    Divi Fullwidth Header Gradient Background Layout 1 Paste Styles

    Change the text color and background color for button two.

    • Button Two Text Color: #726D64
    • Button Two Background: #CBDBD2

    Divi Fullwidth Header Gradient Background Layout 1 Button 2 Background

    Change the button two border color as well.

    • Button Two Border Color: #CBDBD2

    Divi Fullwidth Header Gradient Background Layout 1 Button 2 Border Color

    Now that our buttons are complete, open the spacing settings and set the top and bottom padding.

    • Padding-Top: 10%
    • Padding-Bottom: 10%

    Divi Fullwidth Header Gradient Background Layout 1 Padding

    Finally, open the Custom CSS settings under the advanced tab. Select the responsive settings because we will only add the custom CSS for the desktop design. Add custom CSS to the Body CSS section.

    padding-right: 40%;

    Divi Fullwidth Header Gradient Background Layout 1 Body CSS

    Add the Gradient to the Fullwidth Header Module

    Now our fullwidth header design is complete and we can add the gradient. Navigate back to the content tab and open the background settings. Select the gradient tab and add the gradient as follows:

    • 0%: rgba(116,170,159,0.42)
    • 1%: rgba(79,127,108,0.35)

    Divi Fullwidth Header Gradient Background Layout 1 Background Gradient

    Next, customize the gradient settings:

    • Gradient Type: Elliptical
    • Gradient Position: Bottom Right
    • Repeat Gradient: Yes
    • Place Gradient Above Background Image: Yes

    Divi Fullwidth Header Gradient Background Layout 1 Gradient Settings

    Finally, delete the old header section from the original layout.

    Divi Fullwidth Header Gradient Background Layout 1 Delete Section

    Final Design

    Here is the final design for our first gradient header. As you can see, the repeated gradient with the subtle transparent colors creates an interesting background for this header section without overpowering the background image.

    Divi Fullwidth Header Gradient Background Layout 1 Full Design

    Divi Fullwidth Header Gradient Background Layout 1 Final Design Mobile

    Gradient 2

    Create a New Page with a Premade Layout

    For our next design, we will use the Nutritionist Landing Page from the Nutritionist Layout Pack.

    Add a new page to your website and give it a title, then select the option to Use Divi Builder.

    Divi Fullwidth Header Gradient Background Layout 2 Use Builder

    Since we are using a premade layout from the Divi Library, select Browse Layouts.

    Divi Fullwidth Header Gradient Background Layout 2 Browse Layouts

    Search for and select the Nutritionist Landing Page layout.

    Divi Fullwidth Header Gradient Background Layout 2 Find Layout

    Select Use This Layout to add the layout to your page.

    Divi Fullwidth Header Gradient Background Layout 2 Use Layout

    Now we are ready to build our design.

    Recreate the Hero Section Using the Fullwidth Header Module

    We are going to be recreating the existing hero section using the Fullwidth Header Module. Start by adding a fullwidth section to the page, below the existing hero section.

    Divi Fullwidth Header Gradient Background Layout 2 Fullwidth

    Next, add the Fullwidth Header Module to the section.

    Divi Fullwidth Header Gradient Background Layout 2 Add Module

    Under the content tab, add the text for the module as follows:

    • Title: Nutritionist
    • Subtitle: Specialized Food Coaching
    • Button #1: Get Started For Free
    • Button #2: Contact Me

    You can also remove the body text at this step, although we remove it later on in the tutorial.

    Divi Fullwidth Header Gradient Background Layout 2 Content

    Open the image settings. Set the logo image to the “Established 1990” image and set the header image to the graphic of the leaves.

    Divi Fullwidth Header Gradient Background Layout 2 Header Images

    Next, move to the Design tab. Set the text and logo alignment to center.

    • Text & Logo Alignment: Center

    Divi Fullwidth Header Gradient Background Layout 2 Alignment

    Customize the Title font as follows:

    • Title Font: Merriweather
    • Title Font Style: TT (Capitalized)

    Divi Fullwidth Header Gradient Background Layout 2 Title Font

    To optimize the design for tablet and mobile, we will use the responsive settings to add different title text sizes.

    • Title Text Size – Desktop: 70px
    • Title Text Size – Tablet: 50px
    • Title Text Size – Mobile: 30px

    Divi Fullwidth Header Gradient Background Layout 2 Title Text Size

    Next, set the title letter spacing and line height.

    • Title Letter Spacing: 5px
    • Title Line Height: 1.4em

    Divi Fullwidth Header Gradient Background Layout 2 Spacing Line Height

    Open the subtitle settings and customize the font.

    • Subtitle Font: Montserrat
    • Subtitle Font Weight: Medium
    • Subtitle Font Style: TT (Capitalized)

    Divi Fullwidth Header Gradient Background Layout 2 Subtitle Settings

    We will also set responsive text sizes for the subtitle. The sizes are as follows:

    • Subtitle Text Size – Desktop and Tablet: 18px
    • Subtitle Text Size – Mobile: 12px

    Additionally, set the subtitle letter spacing and line height.

    • Subtitle Letter Spacing; 5px
    • Subtitle Line Height: 1.5em

    Divi Fullwidth Header Gradient Background Layout 2 Subtitle Sizing

    Customize Button Styles

    Move on to the Button One settings. Enable custom styles and set the text size.

    • Use Custom Styles for Button One: Yes
    • Button One Text Size: 13px

    Divi Fullwidth Header Gradient Background Layout 2 Button One

    Add a background color.

    • Color 1 Background: #15C39A

    Divi Fullwidth Header Gradient Background Layout 2 Button Background

    Next, set the border width and radius, and the letter spacing.

    • Button One Border Width: 0px
    • Button One Border Radius: 100px
    • Button One Letter Spacing: 2px

    Divi Fullwidth Header Gradient Background Layout 2 Button Border

    Modify the font settings as follows:

    • Button One Font: Montserrat
    • Button One Font Weight: Medium
    • Button One Font Style: TT (Capitalized)
    • Show Button One Icon: No

    Divi Fullwidth Header Gradient Background Layout 2 Button Font

    Finally, add padding to the button.

    • Button One Padding–Top: 16px
    • Button One Padding–Bottom: 16px
    • Button One Padding–Left: 30px
    • Button One Padding–Right: 30px

    Divi Fullwidth Header Gradient Background Layout 2 Button Padding

    The styles for Button Two are largely the same as Button One, so we will copy the Button One Styles to Button Two and then make a small change to the colors.

    First, right-click on the Button One settings and copy the styles.

    Divi Fullwidth Header Gradient Background Layout 2 Copy Styles

    Then, right-click on the Button Two settings and paste the Button One styles.

    Divi Fullwidth Header Gradient Background Layout 2 Paste Styles

    Change the Button Two background.

    • Button Two Background: #BAB66F

    Divi Fullwidth Header Gradient Background Layout 2 Button 2 Background

    Next, navigate to the Spacing settings and set the padding as follows:

    • Padding-Top: 10%
    • Padding-Bottom: 0px

    Divi Fullwidth Header Gradient Background Layout 2 Spacing

    open the Animation section under the Design tab and set the module to fade.

    • Animation Style: Fade

    Divi Fullwidth Header Gradient Background Layout 2 Animation

    Add the Gradient to the Fullwidth Header Module

    Move to the content tab and open the background settings. First, remove the existing background color.

    Divi Fullwidth Header Gradient Background Layout 2 Remove Background Color

    Next, add the background image.

    Divi Fullwidth Header Gradient Background Layout 2 Background Image

    Move to the gradient tab and add the background gradient.

    • 35%: #FFC77F
    • 56%: #F2D57D
    • 90%: rgba(247,242,145,0.88)

    Divi Fullwidth Header Gradient Background Layout 2 Gradient

    Set the Gradient Type and Gradient Position.

    • Gradient Type: Circular
    • Gradient Position: Top

    Divi Fullwidth Header Gradient Background Layout 2 Gradient Type Position

    Remove the body text if you haven’t already.

    Divi Fullwidth Header Gradient Background Layout 2 Remove Body

    Finally, delete the original hero section above.

    Divi Fullwidth Header Gradient Background Layout 2 Delete Layout

    Custom CSS

    Now all of our basic settings are in place, but we need to go in with some custom CSS to complete the design and modify some of the header images. Move over to the Advanced tab and open the Custom CSS section.

    First, let’s customize the header image CSS. We will use responsive options to set different CSS for different device sizes. These settings will move the center leaf image up and behind the header text and also adjusts the size and margins. Add the following custom CSS to the desktop settings.

    transform: translateY(-22em);
    width: 25%;
    z-index: -1;
    position: relative;
    margin-bottom: -8em;
    

    Divi Fullwidth Header Gradient Background Layout 2 Header Image CSS

    Next, add the following custom CSS to the tablet settings of the header image section.

    transform: translateY(-22em);
    width: 40%;
    z-index: -1;
    position: relative;
    margin-bottom: -8em;
    

    Divi Fullwidth Header Gradient Background Layout 2 Custom CSS Tablet

    Finally, add the following custom CSS to the mobile settings of the header image section.

    transform: translateY(-24em);
    width: 75%;
    z-index: -1;
    position: relative;
    margin-bottom: -8em;
    

    Divi Fullwidth Header Gradient Background Layout 2 Header Image Mobile CSS

    We will also add custom CSS to the logo section. These settings will be responsive as well.

    First, add the following custom CSS to the desktop settings of the logo section.

    width: 40%;

    Divi Fullwidth Header Gradient Background Layout 2 Logo CSS

    Next, add the following custom CSS to the tablet settings of the logo section.

    width: 60%;

    Divi Fullwidth Header Gradient Background Layout 2 Logo Tablet CSS

    Then add the following custom CSS to the mobile settings of the logo section.

    width: 60%;

    Divi Fullwidth Header Gradient Background Layout 2 Logo Mobile CSS

    Finally, add the following custom CSS to the subtitle section.

    padding-bottom: 30px;

    Divi Fullwidth Header Gradient Background Layout 2 Subtitle CSS

    For the last step in this design, we need to add the rounded bottom divider. Open the fullwidth section settings and navigate to the design tab. Open the Dividers settings and add a bottom divider.

    • Dividers: Bottom
    • Divider Style: Curved
    • Divider Color: #FFFFFF

    Divi Fullwidth Header Gradient Background Layout 2 Divider Style

    Final Design

    And here is the final design for this header section.

    Divi Fullwidth Header Gradient Background Layout 2 Full Design

    Divi Fullwidth Header Gradient Background Layout 2 Final Design Mobile

    Gradient 3

    Create a New Page with a Premade Layout

    For our final gradient header design, we will use the SaaS Landing Page layout from the SaaS Layout Pack.

    Add a new page to your website and give it a title, then select the option to Use Divi Builder.

    Divi Fullwidth Header Gradient Background Layout 3 Use Builder

    We are using a premade layout from the Divi library, so select Browse Layouts.

    Divi Fullwidth Header Gradient Background Layout 3 Browse Layouts

    Search for and select the SaaS Landing Page layout.

    Divi Fullwidth Header Gradient Background Layout 3 Find Layout

    Select Use This Layout to add the layout to your page.

    Divi Fullwidth Header Gradient Background Layout 3 Use layout

    Now we are ready to build our design.

    Recreate the Hero Section Using the Fullwidth Header Module

    First, add a fullwidth section below the existing header section.

    Divi Fullwidth Header Gradient Background Layout 3 Fullwidth Section

    Select and add the Fullwidth Header Module to the section.

    Divi Fullwidth Header Gradient Background Layout 3 Add Module

    Open the module settings and add the following text:

    • Title: Divi Business Management Software
    • Button #1: All Features
    • Button #2: Sign Up Today
    • Body: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

    Divi Fullwidth Header Gradient Background Layout 3 Content Settings

    Under the images section, add the header image.

    Divi Fullwidth Header Gradient Background Layout 3 Header Image

    We will come back to the content tab to add our background later. For now, delete the original header section above.

    Divi Fullwidth Header Gradient Background Layout 3 Delete Section

    Open the fullwidth header settings and navigate to the design tab. First, center the text and logo alignment.

    • Text & Logo Alignment: Center

    Divi Fullwidth Header Gradient Background Layout 3 Text Logo Alignment

    Open the image settings and add a box shadow to the header image.

    • Image Box Shadow: Bottom

    Divi Fullwidth Header Gradient Background Layout 3 Box Shadow

    Next, open the title text settings and customize the font.

    • Title Font: Nunito Sans
    • Title Font Weight: Bold
    • Title Text Alignment: Center

    Divi Fullwidth Header Gradient Background Layout 3 Title Font

    Change the color, size, and line height as well.

    • Title Text Color: #FFFFFF
    • Title Text Size: 45px
    • Title Line Height: 1.3em

    Divi Fullwidth Header Gradient Background Layout 3 Title Text Settings

    We want a smaller font size on mobile devices, so select the responsive settings for the Title Text Size option and add a different font size.

    • Title Text Size – Mobile: 38px

    Divi Fullwidth Header Gradient Background Layout 3 Mobile Text Size

    Move on to the Body Text section and customize the font as follows:

    • Body Font: Nunito Sans
    • Body Text Color: #FFFFFF

    Divi Fullwidth Header Gradient Background Layout 3 Body Font Color

    Set the Body Line Height.

    • Body Line Height: 1.8em

    Divi Fullwidth Header Gradient Background Layout 3 Line Height

    Customize Button Styles

    Next, let’s customize Button One. Enable custom styles then change the text size and color.

    • Use Custom Styles for Button One: Yes
    • Button One Text Size: 13px
    • Button One Text Color: #FFFFFF

    Divi Fullwidth Header Gradient Background Layout 3 Button Styles

    This button will have a gradient background. Add the gradient as follows:

    • 0%: #3d72e7
    • 100%: #53a0fe
    • Gradient Direction: 243deg

    Divi Fullwidth Header Gradient Background Layout 3 Button Gradient

    Next, change the button border settings.

    • Button One Border Width: 0px
    • Button One Border Radius: 26px
    • Button One Letter Spacing: 1px

    Divi Fullwidth Header Gradient Background Layout 3 Button Border

    Change the button font settings.

    • Button One Font: Nunito Sans
    • Button One Font Weight: Ultra Bold
    • Button One Font Style: TT (Capitalized)
    • Show Button Icon: No

    Divi Fullwidth Header Gradient Background Layout 3 Button Font

    Finally, add button padding.

    • Button One Padding-Top: 15px
    • Button One Padding-Bottom: 15px
    • Button One Padding-Left: 30px
    • Button One Padding-Right: 30px

    Divi Fullwidth Header Gradient Background Layout 3 Button Padding

    Once again, the Button Two design is very similar to the Button One design, just with different colors. We’ll skip the repetitive design steps by copying the Button One styles. To do so, simply right-click on the Button One setting and copy the Button One styles.

    Divi Fullwidth Header Gradient Background Layout 3 Copy Button

    Then, right-click on the Button Two settings and paste the Button One styles.

    Divi Fullwidth Header Gradient Background Layout 3 Paste Button Styles

    Now change the Button Two Text Color and background color.

    • Button Two Text Color: #4078ea
    • Background Color: #FFFFFF

    Divi Fullwidth Header Gradient Background Layout 3 Button Color Background

    Move to the Spacing section and add some top padding.

    • Padding-Top: 8%

    Divi Fullwidth Header Gradient Background Layout 3 Padding Top

    Next, navigate to the Animation settings and set the animation style as follows:

    • Animation Style: Zoom
    • Animation Direction: Up

    Divi Fullwidth Header Gradient Background Layout 3 Animation

    Finally, change the animation intensity and starting opacity.

    • Animation Intensity: 8%
    • Animation Starting Opacity: 100%

    Divi Fullwidth Header Gradient Background Layout 3 Animation Settings

    Add the Gradient to the Fullwidth Header Module

    Now that the basic design is complete, we can add our background gradient. Move over to the Content tab and open the Background settings. Our background will consist of a combination of a gradient, an image, and a mask. First, add the background gradient.

    • 22%: #5b40d1
    • 50%: #4161d4
    • 73%: #53a0fd
    • 100%: #4bc4fc
    • Gradient Type: Elliptical
    • Gradient Position: Center

    Divi Fullwidth Header Gradient Background Layout 3 Gradient Settings

    Next, add the background image. We will use the same background image that was used for the original header design. You should see this in your media library with the title geometric-bg-overlay-01.jpg. Use the overlay setting to blend the image with the gradient background.

    • Background Image Blend: Overlay

    Divi Fullwidth Header Gradient Background Layout 3 Background Image

    Now add the background mask.

    • Mask: Caret
    • Mask Color: #FFFFFF
    • Mask Transform: Horizontal
    • Mask Transform: Rotate
    • Mask Transform: Invert
    • Mask Aspect Ratio: Landscape
    • Mask Size: Stretch to Fill

    Divi Fullwidth Header Gradient Background Layout 3 Background Mask

    Next, use the responsive settings to customize the background mask for tablet and mobile devices. Let’s start with the tablet design.

    • Mask Aspect Ratio: Portrait
    • Mask Size: Custom Size
    • Mask Width: 100%
    • Mask Height: 60%
    • Mask Position: Bottom Center
    • Mask Vertical Offset: 140%

    Divi Fullwidth Header Gradient Background Layout 3 Tablet Mask

    Finally, modify the mobile design.

    • Mask Aspect Ratio: Portrait
    • Mask Size: Custom Size
    • Mask Width: 100%
    • Mask Height: 60%
    • Mask Position: Bottom Center
    • Mask Vertical Offset: 110%

    Divi Fullwidth Header Gradient Background Layout 3 Tablet Mobile

    Final Design

    Here is the final design for this section.

    Divi Fullwidth Header Gradient Background Layout 3 Final Design Full

    Divi Fullwidth Header Gradient Background Layout 3 Final Design Mobile

    Final Result

    Now let’s take a look at all three of our gradient header modules.

    Gradient 1

    Divi Fullwidth Header Gradient Background Layout 1 Final Design

    Divi Fullwidth Header Gradient Background Layout 1 Final Design Mobile

    Gradient 2

    Divi Fullwidth Header Gradient Background Layout 2 Final Design

    Divi Fullwidth Header Gradient Background Layout 2 Final Design Mobile

    Gradient 3

    Divi Fullwidth Header Gradient Background Layout 3 Final Design

    Divi Fullwidth Header Gradient Background Layout 3 Final Design Mobile

    Final Thoughts

    The Fullwidth Header Module is easy to customize and offers a lot of flexibility when it comes to the look and layout of your header design. When combined with unique design elements like gradients, you can create a truly stand-out design to bring your website visitors’ attention to the services that you offer. For 5 more creative Fullwidth Header tutorials, check out this article. Do you utilize the Fullwidth Header Module on your Divi website? Let us know in the comments!

    The post 3 Eye-Catching Gradients You Can Apply to Your Fullwidth Header Module with Divi’s Gradient Builder appeared first on Elegant Themes Blog.

  • Divi Plugin Highlight: Divi Shop Builder

    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.

    Divi Plugin Highlight Divi Shop Builder Upload

    Once the plugin is installed, activate the plugin.

    Divi Plugin Highlight Divi Shop Builder Activate

    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.

    Divi Plugin Highlight Divi Shop Builder Woo Shop Module

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

    Divi Plugin Highlight Divi Shop Builder Shop First Load

    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.

    Divi Plugin Highlight Divi Shop Builder Add New

    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.

    Divi Plugin Highlight Divi Shop Builder Choose Component

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

    Divi Plugin Highlight Divi Shop Builder Component Settings

    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.

    Divi Plugin Highlight Divi Shop Builder Product View Type

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

    Divi Plugin Highlight Divi Shop Builder Order

    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.

    Divi Plugin Highlight Divi Shop Builder Description Length

    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.

    Divi Plugin Highlight Divi Shop Builder Badge Position

    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.

    Divi Plugin Highlight Divi Shop Builder Display Settings

    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.

    Divi Plugin Highlight Divi Shop Builder Background

    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.

    Divi Plugin Highlight Divi Shop Builder Overlay

    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.

    Divi Plugin Highlight Divi Shop Builder Image

    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.

    Divi Plugin Highlight Divi Shop Builder Star Rating

    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.

    Divi Plugin Highlight Divi Shop Builder New Badge

    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.

    Divi Plugin Highlight Divi Shop Builder Button

    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.

    Divi Plugin Highlight Divi Shop Builder Quantity

    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.

    Divi Plugin Highlight Divi Shop Builder Product Container

    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.

    Divi Plugin Highlight Divi Shop Builder Product Description

    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.

    Divi Plugin Highlight Divi Shop Builder Sorting Dropdown

    Results Count

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

    Divi Plugin Highlight Divi Shop Builder Results Count

    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.

    Divi Plugin Highlight Divi Shop Builder Pagination

    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.

    Divi Plugin Highlight Divi Shop Builder View Cart

    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.

    Divi Plugin Highlight Divi Shop Builder Grid List Button

    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.

    Divi Plugin Highlight Divi Shop Builder No Products Design

    Text

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

    Divi Plugin Highlight Divi Shop Builder Text

    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.

    Divi Plugin Highlight Divi Shop Builder Title Text

    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.

    Divi Plugin Highlight Divi Shop Builder 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.

    Divi Plugin Highlight Divi Shop Builder Old Price

    Category Text

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

    Divi Plugin Highlight Divi Shop Builder Category

    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.

    Divi Plugin Highlight Divi Shop Builder In Stock

    Out of Stock Text

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

    Divi Plugin Highlight Divi Shop Builder Out of Stock

    Available On Backorder Text

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

    Divi Plugin Highlight Divi Shop Builder Backorder

    Sale Badge Text

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

    Divi Plugin Highlight Divi Shop Builder Sale Badge

    Sale Price Text

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

    Divi Plugin Highlight Divi Shop Builder Sale Price

    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.

    Divi Plugin Highlight Divi Shop Builder Custom CSS

    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.

    Divi Plugin Highlight Divi Shop Builder Filters

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

    Divi Plugin Highlight Divi Shop Builder Filter Error

    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.

    Divi Plugin Highlight Divi Shop Builder Enable Filtering

    Content Tab

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

    Divi Plugin Highlight Divi Shop Builder New Item

    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.

    Divi Plugin Highlight Divi Shop Builder Filters

    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.

    Divi Plugin Highlight Divi Shop Builder Filter Settings

    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.

    Divi Plugin Highlight Divi Shop Builder Advanced Filter Settings

    Tag Filter

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

    Divi Plugin Highlight Divi Shop Builder Tag Filter

    Search Filter

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

    Divi Plugin Highlight Divi Shop Builder Search

    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.

    Divi Plugin Highlight Divi Shop Builder Rating

    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.

    Divi Plugin Highlight Divi Shop Builder Price Filter

    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.

    Divi Plugin Highlight Divi Shop Builder Stock

    Sale Filter

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

    Divi Plugin Highlight Divi Shop Builder Sale

    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.

    Divi Plugin Highlight Divi Shop Builder Attribute

    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.

    Divi Plugin Highlight Divi Shop Builder Selected Filters

    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.

    Divi Plugin Highlight Divi Shop Builder Filter Buttons

    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.

    Divi Plugin Highlight Divi Shop Builder Shop Page Design

    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.

    Divi Plugin Highlight Divi Shop Builder Cart Contents

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

    Divi Plugin Highlight Divi Shop Builder Cart Labels

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

    Divi Plugin Highlight Divi Shop Builder Empty Cart

    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.

    Divi Plugin Highlight Divi Shop Builder Cart Design

    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.

    Divi Plugin Highlight Divi Shop Builder Cart Final Design

    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.

    Divi Plugin Highlight Divi Shop Builder Cart Total Content

    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.

    Divi Plugin Highlight Divi Shop Builder Cart Totals Design

    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.

    Divi Plugin Highlight Divi Shop Builder Woo Commerce Notices

    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.

    Divi Plugin Highlight Divi Shop Builder Notices Designed

    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.

    Divi Plugin Highlight Divi Shop Builder Billing Content

    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.

    Divi Plugin Highlight Divi Shop Builder Billing Design

    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.

    Divi Plugin Highlight Divi Shop Builder Coupon Content

    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.

    Divi Plugin Highlight Divi Shop Builder Coupon Design

    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.

    Divi Plugin Highlight Divi Shop Builder Checkout Order Content

    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.

    Divi Plugin Highlight Divi Shop Builder Checkout Order Design

    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.

    Divi Plugin Highlight Divi Shop Builder Shipping Content

    Design Tab

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

    Divi Plugin Highlight Divi Shop Builder Shipping Design

    And here is the full design for the checkout page.

    Divi Plugin Highlight Divi Shop Builder Checkout Page Design

    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.

    Divi Plugin Highlight Divi Shop Builder Account Content

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

    Divi Plugin Highlight Divi Shop Builder Dashboard

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

    Divi Plugin Highlight Divi Shop Builder Orders

    This is an example of a downloads page.

    Divi Plugin Highlight Divi Shop Builder Downloads

    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.

    Divi Plugin Highlight Divi Shop Builder Account Navigation

    Account User Image Module

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

    Divi Plugin Highlight Divi Shop Builder Account User Image

    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.

    Divi Plugin Highlight Divi Shop Builder Account Username

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

    Divi Plugin Highlight Divi Shop Builder Account Details

    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 Plugin Highlight Divi Shop Builder Thank You

    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.

    Divi Plugin Highlight Divi Shop Builder Demo 1

    Coffee Cart and Checkout Layouts

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

    Divi Plugin Highlight Divi Shop Builder Coffee Cart

    And here is the checkout layout.

    Divi Plugin Highlight Divi Shop Builder Coffee Checkout

    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.

    Divi Plugin Highlight Divi Shop Builder Food

    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.

    Divi Shop Builder Tutorial

    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.

  • Stella Coaching & Online Course Child Theme – Divi Child Theme Overview

    The Stella Coaching & Online Course Child Theme is a child theme for Divi specifically designed for coaches and course creators. The theme features pages for a blog, course, quiz, and store, and also has several marketing pages for you to promote your services and lead magnets. Stella is clean, elegant, and thoughtfully designed to help you convert more customers. In this post, we’ll take a look at the Stella Coaching & Online Course Child Theme to help you decide if it’s the right Divi child theme for you.

    Let’s get started!

    Installing Stella Coaching & Online Course Child Theme

    First, open your WordPress dashboard and navigate to the add plugins page. We will install the child theme through the plugin page, not the theme page. Click Upload Plugin, then select the plugin .ZIP file from your computer. Then click Install Now and activate the plugin once it finishes installing.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Add Plugin

    Once activated, you will see the Stella Installer in your WordPress menu bar. From this page, you can import all of the child theme content, site structure, settings, plugins, custom CSS, and more, just with one button. Click Begin Site Import to start the import process.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Import

    You will see a progress bar as the child theme is installed.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Import 2

    Once your import is complete, you can delete the plugin.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Import 3

    Stella Coaching & Online Course Child Theme Pages

    Stella comes with 25 pages, including WooCommerce shop pages, course pages, blog pages, and a quiz for capturing leads. Let’s take a look at each of the pages, starting with the home page.

    Stella Coaching & Online Course Child Theme Pages

    Header and Introduction

    The first section on the home page is a large header image and introduction text. The header image is styled with a rounded corner, and the text is styled with different sizes and some icons to create a compelling introduction to the site. This section also includes a call-to-action button.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Home 1

    Quiz

    The next section on the home page introduces a quiz built with the free version of Interact. The layout features text with some bullet points, a large image to the right, and another image at the top that moves with the page. Additionally, the round text above the large image rotates while you are on the page.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Home 2

    Services

    The services section of the home page is where you can feature two services you offer. You can add an image and a brief description of the service, and there is a button leading customers to the services page.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Home 3

    Testimonials

    Next, the testimonials section has space for two quotes with a button leading to the testimonials page. This section uses elegant typography and a large parallax image.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Home 4

    Blog

    The latest news section features three recent blog posts with the featured image, a short blurb from the post, and a button to read the full article.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Home 5

    Freebie

    This section of the home page features a freebie offer and requires users to enter their name and email address to receive the freebie.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Home 6

    Call to Action

    The final section of the home page features some call-to-action text with a button.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Home 7

    Stella Coaching & Online Course Child Theme About Page

    The about page begins with a section for your about text. It also features a styled image to the right of the text. Underneath, there are three numbered sections where you can map out a timeline or journey that is relevant to your service or to who you are. This section is styled with three images, as well as a quote block.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview About

    This page also has a section for recent blog posts, as well as the two lead magnets that were featured on the home page – the quiz and the freebie with the email sign-up. The page ends with a call-to-action section to compel users to view the services page.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview About 2

    Stella Coaching & Online Course Child Theme Services Page

    The services page starts with a brief introductory text where you can summarize your offerings. Then, there are two dedicated sections where you can go over the details of your services. Each section has areas for text, an image, bullet points, a testimonial quote, and a button to apply for the service.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Services 1

    Below, there is a section to invite visitors to join a community Facebook group. This section also features an image, a testimonial quote, and a call-to-action button. Finally, the page features the freebie lead magnet that was on the home page.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Services 2

    Stella Coaching & Online Course Child Theme FAQ Page

    The FAQ page is formatted with a brief introduction and a large image at the top. Each of the FAQs is placed in a dropdown accordion. When the question is selected, the question is revealed in the dropdown accordion. Below the FAQ section is a short contact form for visitors to submit any questions you might not have addressed on the FAQ page. The last section on this page is the invitation to join a community Facebook group.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview FAQ

    Stella Coaching & Online Course Child Theme Raves (Testimonials) Page

    The raves page features customer testimonials in styled block quotes alongside images. Below is a section highlighting customer success stories, with a brief introductory text and a testimonial video for each customer. This is a great way to show social proof in an engaging and compelling way. There is another testimonial quote section after this, on a large parallax image background. Once again, the page ends with an invitation to join a community Facebook group.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Testimonials

    Stella Coaching & Online Course Child Theme Sales Page

    The sales page starts with a large header image and some short text where you can introduce your service, with round rotating text over the image. In the next section, you can highlight a problem your customer has that your services solve. This section also has two blurbs where you can highlight some problems your customer might relate to. In the following section, you can discuss how you solve the customer’s problem and how you can help. This section is designed with three blurbs with checkmarks next to them, a large image, and a call-to-action button.

    The next section features a text area for a general overview of the service, a call-to-action button, and an image with the round rotating text over it. There is a testimonial blurb after this for social proof, and another section is where you can highlight additional details or features of your service.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Sales 1

    This section has different forms of social proof to go alongside your service. First is an “as seen in” section with logos, then you have another testimonial section over a large image. The next section features customer success stories with some statistics, a large testimonial video, smaller testimonial quotes with customer images, and a call-to-action button.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Sales 2

    This section features the service pricing, with three different pricing tiers and an image, details, and a call-to-action button for each tier. There is a FAQ section after this, with a similar design to the FAQ page we covered earlier. Then there is a section featuring a large video and another call-to-action button. There is another pricing section with the same layout as above but with different colors. The page ends with an about section with a large image, a call-to-action button to book a call, and a 30-day satisfaction guarantee.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Sales 3

    Stella Coaching & Online Course Child Theme Email Sign-Up Page

    The email sign-up page is where you can go into detail about your freebie and prompt users to sign up with their email. The page starts with a brief introduction of the product, with an image and rotating round text above. Next is the email sign-up form, styled with some text at the top and an image to the right. In the following section, you can give some additional details about what your visitors will receive when they sign up with their email. Then there are some customer testimonials alongside images for social proof. Finally, there is another email sign-up form.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Email Sign Up

    Stella Coaching & Online Course Child Theme Email Sign Up Thanks Page

    This is where visitors will be redirected after signing up with their email. The page starts with some text letting them know their freebie is on the way and a video. Below are recent posts from the blog and an invitation to join the community Facebook group.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Email Sign Up Thanks

    Stella Coaching & Online Course Child Theme Lead Magnet Delivery Page

    This page is where users receive the freebie they signed up for. The page includes some introductory text and a video, some bullet points encouraging users to get the most out of their freebie, text explaining the next steps, and customer testimonials. This page also ends with an invitation to join the community Facebook group.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Lead Magnet Delivery

    Stella Coaching & Online Course Child Theme Quiz Page

    This page features an interactive quiz made with Interact. This is a great idea to engage your website visitors. The page is styled with an image and rotating round text.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Quiz

    Stella Coaching & Online Course Child Theme Quiz Results Page

    The quiz results page is specific to the quiz outcome and explains the results in depth. The layout begins with some short introductory text next to an image. Then there is some explanatory text with a video and some action steps for that result. The page ends with a prompt to sign up for the email freebie.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Quiz Results

    Stella Coaching & Online Course Child Theme Contact Thanks Page

    The contact thanks page is where users will be redirected after submitting a contact form. This page features a short text section, contact information, a video, recent blog posts, the freebie sign-up form, and an invitation to join the community Facebook group.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Contact Thanks

    Stella Coaching & Online Course Child Theme Store Page

    The store in Stella is built with WooCommerce. The store page layout is pretty straightforward, with introductory text and an image at the top, and the products below. The product images are featured as well as the product title and price, and there are category filters at the top. On the right, there is space to promote a blog post.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Stores

    Stella Coaching & Online Course Child Theme Product Page

    The product page features breadcrumbs at the top, along with the product title and price. The product image is on the left and you can hover to zoom in. On the right is the description text and the add to cart button. Below you can see the description in one tab and reviews in the other. The page ends with recent posts from the blog.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Product

    Stella Coaching & Online Course Child Theme Cart Page

    The cart page is very simple and has a pink header with a cart icon with the cart content below.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Cart

    Stella Coaching & Online Course Child Theme My Account Page

    The “my account” page allows users to log in to your website and manage recent orders, shipping and billing addresses, and password and account details. The page also has a contact form and an invitation to join the community Facebook group.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Account

    Stella Coaching & Online Course Child Theme Course Layout Page

    Stella uses LifterLMS for the course pages. The course layout page introduces the course and the course instructor. It also lists the course cost, a button to enroll, and the table of contents for the course. On the right sidebar, you can also see a table of contents for the course and navigate to each section.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Course Overview

    Stella Coaching & Online Course Child Theme Lesson Layout Page

    The page features a large video with some text underneath and a button to mark the section complete. Below, you have a button to go back to the course or to move to the next lesson. On the right is a short text section introducing the instructor and an overview of the course. You can click on the links in the overview to move to the next section. Finally, there is a progress bar at the bottom.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Lesson

    Stella Coaching & Online Course Child Theme Dashboard Page

    The dashboard page allows course members to sign in and view their enrolled courses, grades, certificates, achievements, notifications, and order history. You can also edit account information and redeem a voucher from this page. There is a contact form below this section and an invitation to join the community Facebook group.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Dashboard

    Stella Coaching & Online Course Child Theme Blog Landing Page

    The blog landing page includes some welcome text and an image, a search bar, and blog categories. It also features trending posts and then lists recent posts with a large featured image, a couple of lines of text from the post, the category, and a button to read more.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Blog Landing

    Stella Coaching & Online Course Child Theme Blog Archive Page

    The blog archive page features an image and a search bar at the top with links to the different blog categories. Below the recent posts are listed, with a large featured image, title and category, a couple of lines of preview text, and a button to read more. The page ends with a freebie sign-up form.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Blog Archive

    Stella Coaching & Online Course Child Theme Single Post Page

    The single post page features the title and category at the top and then the large featured image with the blog content below. There are links to navigate to the previous and the next post, and a comment section below. On the right side, there is an image and author introduction as well as social media icons and a grid of four recent images from Instagram. Finally, there is a search bar and links to some recent posts. The page ends with a freebie sign-up form.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Blog Post

    Stella Coaching & Online Course Child Theme Contact Page

    The contact page features some introduction text and contact information alongside a large image. Below is a simple contact form. The page ends with an invitation to sign up for a freebie and join the community Facebook group.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Contact

    Stella Coaching & Online Course Child Theme Header

    The header is simple but elegant and features a logo on the left and menu items to the right. The secondary menu bar features a call-to-action with a button to sign up for the freebie.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Header

    Stella Coaching & Online Course Child Theme Footer

    The footer features the logo and some brief text as well as social media icons. There is a menu with some quick links, and on the right is a grid with recent Instagram images. At the very bottom of the page is a secondary footer bar with a quick links menu.

    Stella Coaching and Online Course Child Theme Divi Child Theme Overview Footer

    Where to Purchase the Stella Coaching & Online Course Child Theme

    Stella Coaching & Online Course Child Theme is available from the Divi Marketplace. It costs $165 for unlimited website usage and one year of support and updates.

    Stella Child Theme Tutorial

    Final Thoughts

    The Stella Coaching & Online Course Child Theme may be an excellent option for your website if you are an online coach or course creator. The child theme is preformatted with every page you would need, and features beautiful typography, colors, and call-to-actions to help you convert your visitors into customers. I like how a lot of the placeholder text throughout the child theme tells you what sort of content to place there, making it easy to replace the content and make the website your own while still keeping your content cohesive with the design of the pages.

    We would love to hear from you! Have you tried Stella Coaching & Online Course Child Theme? Let us know what you think about it in the comments!

    The post Stella Coaching & Online Course Child Theme – Divi Child Theme Overview appeared first on Elegant Themes Blog.

  • Using Basic Captcha vs ReCaptcha in Divi’s Contact Form Module

    Do you have a contact form on your website? If so, you may have noticed spam messages being submitted through your form. Captcha is a great solution to prevent unwanted spam messages from being submitted. The purpose of Captcha is to ensure that the visitor filling out your contact form is actually human and not a computer program. There are many different types of Captcha tests. Some of the most common methods of Captcha tests require users to type in the letters and numbers they see in a distorted image. They also let you calculate a simple math equation, or select images containing a certain object, like a bicycle or stop sign. More recent and advanced methods of Captcha protection work behind the scenes to verify the user is not a bot, giving legitimate users a seamless experience while blocking the bots.

    Divi’s Contact Form Module comes with two different types of Captcha protection for your website: Basic Captcha and ReCaptcha. In this post, we will discuss the differences between Divi’s Basic Captcha and ReCaptcha and go over some pros and cons so that you can better understand when to use these options on your website.

    Let’s get started!

    Using Basic Captcha vs ReCaptcha in Divi’s Contact Form Module

    What is Captcha, And Does my Contact Form Need it?

    First, let’s get a better understanding of what Captcha is and why you should include it in your contact form. Captcha stands for “Completely Automated Turing Test to Tell Computers and Humans Apart.” As the name describes, it is a challenge-response test that can be implemented on your contact form to test whether you are a computer or a human. If you pass the Captcha test, it assumes you are human and allows you to submit the form. If you do not pass the test, Captcha assumes you are a computer and does not allow you to submit the form in order to prevent spam messages from being sent.

    It is a good idea to enable captcha spam protection on your contact form module, as it greatly reduces the number of spam messages you will receive, and helps keep your website safe and secure. Not to mention, if you have lots of spam messages in your inbox, it can be easy to miss legitimate inquiries sent from your website visitors! Divi offers two built-in options to add Captcha to your contact form, Basic Captcha and ReCaptcha. Let’s take a closer look at these two methods and some of their key differences.

    Using Basic Captcha in Divi’s Contact Form Module

    Divi’s basic Captcha is a simple math equation that users are required to solve before they can submit the form. It is very easy to add the basic Captcha requirement to your contact form module and it does not require any additional setup.

    Add the Basic Captcha Requirement

    First, open the contact form module settings. Under the Content tab, navigate to the Spam Protection section. Set Use Basic Captcha to “Yes”.

    • Use Basic Captcha: Yes

    Divi Basic Captcha Contact Form Use Basic Captcha

    Now basic Captcha is enabled for your contact form and users will be required to solve the math equation before submitting the form.

    Divi Basic Captcha Contact Form

    If the user submits an incorrect answer, they will see an error message at the top of the form.

    Divi Basic Captcha Contact Form Error

    Use Cases for Basic Captcha

    Using Divi’s built-in Basic Captcha is a great way to reduce the number of spam submissions you get through your contact form. The setup is as easy as clicking a button, and it does not require you to sign up for an external service. However, Basic Captcha can cause issues with accessibility since it relies on the user having to calculate a math problem, and there is a risk that bots will get past this form since it is simpler and uses less robust methods to detect if the user is a human or a bot.

    While Basic Captcha is a great option for a quick and easy solution to the spam messages you might get through the contact form, there are some drawbacks, especially when compared to the more advanced Captcha options available. If you are interested in a more robust option to prevent spam messages, read on to learn about ReCaptcha!

    Using ReCaptcha for Divi’s Contact Form Module

    Google ReCaptcha is the other spam protection option built into Divi. Unlike other Captcha options you may have seen, ReCaptcha runs completely in the background while the user is on your page. Based on the user’s activity, ReCaptcha generates a score between 0-1, with 0 being very likely a bot and 1 being very likely a human. When you set up ReCaptcha you set a minimum score threshold that determines whether a user will be allowed to submit the contact form or not. The default threshold score is 0.5, so any user below a score of 0.5 (likely a bot) will be blocked. The great thing about ReCaptcha is that your legitimate website visitors will not have to go through a test to decipher letters and numbers or calculate equations in order to submit the form. All they need to do is fill out the contact form and click submit!

    Generating the ReCaptcha Site Key and Secret Key

    In order to add the ReCaptcha requirement to your contact form, we will first need to generate a ReCaptcha v3 Site Key and Secret Key. This requires a Google account.

    First, sign in to the ReCaptcha Admin Console with your Google account and click the plus button to add a new site.

    Divi Basic Captcha vs ReCaptcha Contact Form Add ReCaptcha Site

    Add a label, select the option for ReCaptcha v3, then add your website domain.

    Divi ReCaptcha Contact Form Register

    If needed, add email addresses to the owner section and accept the terms of service. If you would like to receive alert emails, check the “Send alerts to owners” checkbox. Then click submit.

    Divi ReCaptcha Contact Form Register

    On the next page, you will be able to copy the site key and secret key. We will use this when adding ReCaptcha to the contact form.

    Divi ReCaptcha Contact Form Site Key Secret Key

    Add the ReCaptcha Requirement

    Once your site has been registered with ReCaptcha and the site key and secret key have been generated, we can add the ReCaptcha requirement to the contact form.

    Under the Content tab, in the contact form module settings, navigate to the Spam Protection section. Set Use A Spam Protection Service to “Yes”. Then click “Add”.

    Divi ReCaptcha Contact Form Setup

    Enter a name for your account (or leave it at Default), then enter your site key and secret key and click submit.

    Divi ReCaptcha Contact Form Settings

    Finally, you can adjust your minimum score threshold if you want. We will leave ours at 0.5, which is the default. You can always come back and adjust this threshold based on your analytics.

    Divi ReCaptcha Contact Form Minimum Score

    Now your form is protected with ReCaptcha! Legitimate users will not be required to go through any sort of test, and they will just see a small and unobtrusive ReCaptcha banner at the bottom right corner of the screen.

    Use Cases for ReCaptcha

    Of the two built-in Captcha options that comes with Divi’s contact form module, the ReCaptcha option is the most robust and advanced. It is also the most user-friendly option, allowing your site visitors to fill out the contact form without having to do math or decipher letters, which can be confusing and cause frustration. Even though it involves a few more steps than the Basic Captcha option, it may be worth setting up in order to have seamless protection for your contact form and improve your user experience.

    Final Thoughts

    Adding a Captcha requirement to your form is a good practice to follow on your website in order to prevent bots from sending in submissions. Divi’s contact form module comes with two built-in options that make it easy to implement these security measures. Basic Captcha is an easy way to add Captcha protection to your Divi contact form and blocks users who cannot solve the math requirement. ReCaptcha provides a better user experience by running seamlessly in the background. This makes the form easier to fill out and reduces errors, meaning fewer frustrated users abandoning their attempts at contact. Both options are effective in reducing the spam that comes through your contact form, and Divi makes it easy to use whichever option fits your needs best.

    Do you use Basic Captcha or ReCaptcha in your contact form? We would love to hear about your experience. Let us know in the comments!

    The post Using Basic Captcha vs ReCaptcha in Divi’s Contact Form Module appeared first on Elegant Themes Blog.

  • EMPIRE – Divi Child Theme Overview

    The Empire Child Theme is a Woocommerce-based eCommerce website theme for online stores. It uses Divi as its main theme. The design is clean and modern with beautiful typography and impactful images. The child theme comes with 10+ pages and 3 dark mode pages. In this post, we’ll take a look at the Empire Divi child theme to help you decide if it’s the right Divi child theme for you.

    Let’s get started!

    Installing Empire Divi Child Theme

    Installing the Empire Divi Child Theme is simple and straightforward. First, upload the theme to your WordPress website, then activate the theme.

    Empire Divi Child Theme Add Theme

    Once the theme is activated, you will see a new tab in your WordPress dashboard called “Empire Demo Content Importer”. Select the Easy Demo Import tab and start the import. This will automatically import the layouts to your website and install the recommended plugins.

    Empire Divi Child Theme Import Options

    Empire Divi Child Theme Pages

    Empire comes with 10+ layouts and 3 dark mode layouts. We’ll go through each page and discuss the designs.

    Empire Divi Child Theme Homepage

    Let’s take a look at the Empire Divi child theme homepage layout. The homepage includes a header, CTA sections, videos, images, number counters, and much more. Throughout the page, there are loading animations, hover effects, and parallax image effects to achieve an eye-catching, engaging website design. Let’s take a look at each section on the home page.

    Empire Divi Child Theme Home Layout

    Hero

    The hero section is the first component on the home page. It features some text and a button. The logo and menu are at the top of this section, and the menu is sticky at the top as you scroll down the page.

    Empire Divi Child Theme Home Hero

    CTA Section

    This call to action section has a title and some text content below. It also has a button to prompt users to action.

    Empire Divi Child Theme Home

    Services

    This section features text on the left side and an image on the right. The text on the left is formatted to fit the theme so all you need to do is replace it with your own content. There is a quote section to highlight some text as well. This section also has two buttons.

    Empire Divi Child Theme Home

    Video

    The video section has a purple overlay when you hover over it, highlighting the video in a unique way. There is an image background to this section as well.

    Empire Divi Child Theme Home

    CTA Section

    Another call to action here, with some stylized text on an image background and a button below.

    Features

    The features section has two versions: a light and a dark version. These sections can be used to show off your services or offerings, and highlight what makes your business unique. Below this section, there are four number counter modules that count as you scroll to the section.

    Empire Divi Child Theme Home

    CTA with Video Background

    This section is a call to action with a video background and a dark overlay. It is an eye-catching design to draw your website visitor’s attention.

    Empire Divi Child Theme Home

    Image Layout

    The next section is a simple grid image layout with some text and a button in the top left corner.

    Empire Divi Child Theme Home

    Text and Video

    In this section, there is some featured text with a repeating background video below.

    Empire Divi Child Theme Home

    Image Hover Reveal

    This is one of the more unique sections in the Empire Divi child theme. There are many images in a grid layout. When you hover over any of the images, text appears with an animation delay with an overlay background.

    Empire Divi Child Theme Home

    Video Layouts

    Here are three more video section layouts. The first section has a full-width video preview. When you hover over the video, there is a purple overlay.

    Empire Divi Child Theme Home

    The second video section includes some text on the left side as well as a button. When you hover over the video, there is a purple overlay.

    Empire Divi Child Theme Home

    The third video section is on an image background with a dark overlay and has space for some text below. Like the others, this one also has a purple overlay on hover.

    Empire Divi Child Theme Home

    Testimonials

    There are two designs for a testimonial section, one light and one dark. Both are testimonial sliders so that you can showcase multiple testimonials.

    Empire Divi Child Theme Home

    This is another simple text and image section with a fullwidth parallax image above. There is also a button below the text in this section.

    Empire Divi Child Theme Home

    CTA Section

    Here is another CTA section. It features two images, one of them with a purple overlay and some text, and a button.

    Empire Divi Child Theme Home

    Blurbs

    This section features a large image and six blurbs with an icon and some text. You can use this section to highlight some of your features or offerings.

    Empire Divi Child Theme Home

    CTA Section

    Another CTA section, featuring a heading and a button. The background image has a parallax effect.

    Empire Divi Child Theme Home

    Video and Text

    Here you have a background video that plays automatically as well as some text.

    Empire Divi Child Theme Home

    Image and Text

    Here are some more layouts with text, images, and buttons. The section below has an image background with an overlay.

    Empire Divi Child Theme Home

    Empire Divi Child Theme Home

    Store

    The store layout section includes a section for some featured products with a button to go to the store. There are images that link to product categories, as well as some more featured products below. Finally, there is a section to display customer reviews.

    Empire Divi Child Theme Home Store

    Blog

    The blog section has some recent posts displayed with a link to view the full blog. Each post also has a featured image.

    Empire Divi Child Theme Home Page Variations

    Empire comes with a couple of homepage variations. There is a dark mode, which has darker backgrounds for most of the sections.

    Empire Divi Child Theme Home Dark

    There is also a homepage variation with a video header. The rest of the content on this page is variations of the layouts we covered above.

    Empire Divi Child Theme Home Video Header

    The other homepage variation features a split header with a transparent overlay on the right side with the header text and a button. Like the other variation, the rest of the layouts on this page are variations of the layouts already covered.

    Empire Divi Child Theme Split Header

    Empire Divi Child Theme Interior Page

    The interior page is one of the premade layouts that comes with the Empire Divi child theme. It features a header with an image background, a section for text with some buttons, a couple of CTA sections, a testimonial section, and some images which are used as buttons to guide the user to another page.

    Empire Divi Child Theme Interior

    Empire Divi Child Theme Services Page

    The services page is set up so that you can highlight your service offerings with little blurbs.

    Empire Divi Child Theme Services

    The page includes some text, a services display with icons, CTAs, and a pricing table.

    The services page also has a dark mode variation, pictured above.

    Empire Divi Child Theme Services Dark

    Empire Divi Child Theme Team Page

    The team page features large images for all of your team members. For each team member, their name and title are listed and there is space for a short bio. Below, their email address and social media links are listed.

    Empire Divi Child Theme Team

    Also on this page is a section to highlight any open roles you might have.

    Empire Divi Child Theme Job Board

    Empire Divi Child Theme Contact Page

    The contact page is fairly simple, with a short blurb of text and a contact form, as well as information for help and support and the address.

    Empire Divi Child Theme Contact

    There is a dark mode version of the contact page as well.

    Empire Divi Child Theme Contact Dark

    Empire Divi Child Theme Blog Page

    The blog page for this theme is very simple, with a large image showcasing the featured image, and the post title, date, and excerpt below.

    Empire Divi Child Theme Blog

    Empire Divi Child Theme Blog Post

    The blog post page is also a simple design, with the featured image set at the very top with the menu bar as well as the title, author, and date listed over the image.

    Empire Divi Child Theme Blog Post

    Empire Divi Child Theme Shop

    Empire is an eCommerce-focused theme that uses WooCommerce. The shop page features an image header, some featured products, a link to open a shop category, and reviews.

    Empire Divi Child Theme Shop

    Empire Divi Child Theme Product Page

    The product page has an image header with the product title and subtitle. Then you have your product, with photos on the left-hand side. On hover, you can zoom in to see the product photos up close. On the right side is the product information including the product name, price, description, size, color, and a button to add to the cart.

    Empire Divi Child Theme Product

    Below this section, there are some modules where you can display additional photos, descriptions, information about the measurements and materials, features, and reviews. At the bottom of the page, you can find related products.

    Empire Divi Child Theme Product Features

    When you add a product to your cart, the shopping cart sidebar appears where you can see the products in your cart, see your total cost, and choose to open the cart, go to checkout, or continue shopping. While this window is open, the rest of the website is faded with a black overlay.

    Empire Divi Child Theme Pop Out Cart

    Empire Divi Child Theme Cart Page

    The cart page is fairly standard and lists the content of the cart, a place to enter a coupon code, the cart total, and a button to proceed to checkout. Contact information is listed on the right side.

    Empire Divi Child Theme Cart

    Empire Divi Child Theme Header

    The header for the Empire Divi child theme is built with the WordPress menu customizer. The menu consists of a logo on the left, menu items with some drop-down options, and a call to action button on the right.

    Empire Divi Child Theme Header

    Empire Divi Child Theme Footer

    The footer for the Empire Divi child theme is built with the Divi Theme Builder.

    Empire Divi Child Theme Footer Layout

    The footer consists of a logo and a text area for a short description. It also includes a section for social media icons, copyright information, and links to legal pages. In the middle, there is a menu section, and on the right, there is the contact information and a call-to-action button.

    Empire Divi Child Theme Footer

    Empire Divi Child Theme Video Tutorials

    The Empire Divi child theme also comes with a page of 13 video tutorials. This is a very helpful resource so that you can learn how to further customize the child theme.

    Empire Divi Child Theme Video Tutorials

    Where to Purchase the Empire Divi Child Theme

    The Empire Divi child theme is available in the Divi Marketplace for $59. It includes unlimited website usage and one year of support and updates.

    Empire Divi Child Theme Purchase

    Final Thoughts

    The Empire Divi Child Theme is a great child theme to use if you need an eCommerce website with lots of content layout options for you to use. It has a simple but elegant design and uses different motion effects throughout the site to draw your attention and highlight content on the page. The installation is quick and easy, so the only setup required is to replace the content with your own and set up your WooCommerce shop. Overall, I would recommend this theme for anyone who wants to set up an eCommerce website with Divi without having to design the website from scratch.

    We would love to hear from you! Have you tried the Empire Divi Child Theme? Let us know what you think about it in the comments!

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

  • Divi Plugin Highlight: Homepage 25 Divi Layout Pack

    Homepage 25 Divi Layout Pack is a layout pack with 25 different homepage layouts that work with the Divi builder. The layout packs are built with different types of businesses in mind, but all layout packs can be completely customized and are flexible enough to fit whatever type of site you need to design. In this post, we’ll take a look at all of the layouts that come with this layout pack to help you decide if this is the right product for you.

    Let’s get started!

    Installing Homepage 25 Divi Layout Pack

    Homepage 25 Divi Layout Pack comes as a ZIP file containing Divi Builder .json files. To install the slider layouts, start by unzipping the file. Then, open your page in the Divi Builder.

    Click the portability option at the bottom of the page and select the import tab. Select the .json file for your desired homepage layout and begin importing the layout. Once the layout has been imported, all you need to do is replace the content with your own and you’re done!

    Homepage 25 Divi Layout Pack

    Let’s take a look at each of the 25 layouts you get with the Homepage 25 Divi Layout Pack.

    Architect Layout

    The architect layout starts with a large header image with text, followed by an about us section with links to read more and an informational video. Next is a list of services and a list of projects, which both feature some hover effects. There is a why choose us section with skill bars, and then a list of logos. The footer for the page is kept simple, with address, phone, email, and social media information listed. The page also uses lots of slide-in effects for the content on the page.

    Divi Product Highlight Homepage 25 Divi Layout Pack Architect

    Auto Repair Layout

    The auto repair layout has a large header image with a white border and text alongside a CTA button. The about us section features some round images and some text next to checkmarks that have a subtle hover effect. Next is the services section. Each service has an image and title, and there is a hover effect for each card in this section. Next under the “our works section” is a gallery with images you can click on to view full-screen. Finally is the contact section with address, phone, and email information as well as a footer bar with some links and copyright information.

    Divi Product Highlight Homepage 25 Divi Layout Pack Auto Repair

    Beauty Salon Layout

    The beauty salon layout features an elegant layout with lots of loading animations. The page begins with a large header with a CTA with the address, email, and phone information listed conveniently below. Following this is the services section, with some introductory text and a list of services over images that have a hover darken effect. There is a button to view pricing information and a 25% off offer with a button to view. Below this, there are two customer reviews and a list of logos. Finally, there is a reservation form and the footer features social media links.

    Divi Product Highlight Homepage 25 Divi Layout Pack Beauty Salon

    Business Layout 1

    Business Layout 1 begins with a header section with some text, a phone number, and a contact form overlaying a large photo background. There is an about us section with text, a photo and icon, and a CTA button. Next, the services section features three services with a description, a photo, and a CTA. There is a pricing table and a why choose us section with icons and CTA buttons. The layout also features a gallery section and a FAQ section. The footer features contact information and opening hours over a large image.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 1

    Business Layout 2

    Business Layout 2 has a header image with social media icons, text, a CTA button, and three blurb modules that concisely convey company information above the fold. The services section features three services with a photo, some text, and a CTA button. The about section has text and a CTA button on the left, with two photos on the right along with a number representing the years in business. There is a large gallery strip following this, as well as an FAQ section. The last section on the page is a contact form alongside contact information. This layout also features lots of loading animation throughout the design.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 2

    Business Layout 3

    The third business layout has a large header image with some text, a CTA button, and some blurb icons on the right. The about us section below features some text, a customer testimonial, and a photo. The services section has a similar design to Business Layout 2. There is a gallery section following this, as well as customer reviews and FAQs. The footer features contact information and opening hours as well as a contact form.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 3

    Business Layout 4

    Business Layout 4 has a simpler header with text and a blue banner below with text and a CTA button. The about section features text, an image, a CTA button, and a phone number. The services section displays each service with an image and a line of text. There is a why choose us section in this layout with blurb modules and a nice hover effect. Next is a pricing table and a gallery section, then some customer reviews. Finally, the last section features a contact form and social media icons.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 4

    Business Layout 5

    The fifth business layout has a simple header image with some text and a CTA button. The about section has an image on the left with a button over it, and about text on the right. The services section features three services with an image, a button, and some text. There is a pricing table, a why choose us section with blurb modules, a gallery, and a FAQ section. Finally, the page ends with some contact information. The page features several hover effects and animations throughout.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 5

    Business Layout 6

    Business Layout 6 begins with a large image header with text and a CTA button within a white border. The about section features some text, a CTA button, and two circular images. There are six cards listed in the services section, each with an image and some text. Following this is the gallery section, then customer reviews and FAQs. Finally, the contact information is listed at the bottom of the page.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 6

    Business Layout 7

    The seventh business layout has a large header with a CTA button and three blurb modules with an icon and contact information as well as open hours. The about section has text, a customer review, and a circular image. The services section spans the width of the screen, with each box containing text and a CTA button for more information about each service. The why choose us section features some text and arrows with hover effects, a round image, a CTA button, and a phone number. Then there is a pricing table, a gallery section, and FAQs. Finally, the page ends with a contact form alongside some contact information.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 7

    Business Layout 8

    This layout features a box over the large header image that contains some text and a CTA button. The about us section is simple as well, with a button over the large image and some text on the right. The services section features an icon over each image and has space for some text and a CTA button for each service. The pricing table features space for 4 different pricing plans and includes an icon for each plan as well as text and a CTA button. The why choose us section displays some blurb modules with large icons overlaying a background image. Finally, the page has a gallery section, a review section, an FAQ section, and ends with a contact form and social media links.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 8

    Business Layout 9

    Business Layout 9 features a simple header with text and a CTA button. The about us page features some text, a button, and an image on the right side. Next, the services section lists some text, a CTA button, and an image with an overlaid icon. There is also a pricing table and a why choose us section with blurb modules in this layout, followed by a gallery section, customer reviews, and FAQs. Lastly, the page ends with contact information and opening hours.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 9

    Business Layout 10

    Finally, the last business layout features a header image with the header text on a colored background. The about section has some text, a CTA button, and an image. The services section features three cards, one for each service, with text and a CTA button. The pricing table is the 4-tier pricing table we saw in Layout 8, followed by the why choose us section with blurb modules with icons. The layout also has a gallery section, customer reviews, and FAQs. And finally, the layout ends with some social media links and a contact form.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 10

    Dance Studio Layout

    The dance studio layout features a pink and grey color palette and uses engaging photography throughout the layout. The header features an icon and heading text on a pink background over a darkened image. The about section features text, a CTA button, and an image. There are three boxes below with an icon that list three dance styles. The dance course section is a collage-style section with images and cards with course information and a CTA button on them. The dance classes section features two cards with two sets of class information listed. Finally, there is a client review slider and the page ends with a contact form and contact information.

    Divi Product Highlight Homepage 25 Divi Layout Pack Dance Studio

    Fashion Store Layout

    The fashion store layout features a split-style header with text and a CTA button on the left side and an image on the right. Following this is a list of logos and large images that link to different shop pages. There are some logos and text below that represent different store services such as free shipping and customer support. Next is a recent products section that uses the Woo Products module that works with WooCommerce. There is another split image/text section promoting daily discounts with a CTA button, followed by testimonials and an email sign-up form to receive a discount.

    Divi Product Highlight Homepage 25 Divi Layout Pack Fashion Store

    Fitness Layout

    This layout uses a black, white, and green color scheme with dark images. The header features a large background image, some text, a CTA button, and social media links. The about section features text, a CTA button, and two images with some hover effects. The services section highlights three services with images, a CTA link, and some text. There is a section with information about the trainers, with some text and a CTA alongside a large image, followed by some number counters representing information about the gym. Next is a section featuring membership benefits, with some text and a CTA button. There is a fitness services section utilizing blurb modules with a large icon and description text. Then is a section for membership plans, with another large image alongside text and a CTA. Finally, there are three testimonials and the page finishes with a newsletter subscription form and contact information.

    Divi Product Highlight Homepage 25 Divi Layout Pack Fitness

    Furniture Shop Layout

    The furniture shop layout begins with a large image with header text and an arrow with a button to explore popular categories. Below is the categories section with large image cards linking to each category. There are some icons below this with shop feature such as free shipping and customer support. Following this is an introduction to a collection, with a large image and some description text. Next is the new products section, which uses the Woo Products module. Next is an image with some text advertising a discount, and then the discover more section with linked images to discounts and top-rated products. There is an email subscription form, and the page ends with blurb modules featuring contact information.

    Divi Product Highlight Homepage 25 Divi Layout Pack Furniture Shop

    Gardener Layout

    The gardener layout begins with a large image of flowers with social media icons, header text, and a CTA button. Overlaid are three blurb modules featuring three services. The about section features text and a CTA button on the left, with an icon and image on the right. Next is the why choose us section with arrows and text with a hover effect. The our works section features a gallery, and the page ends with a contact form and contact information listed.

    Divi Product Highlight Homepage 25 Divi Layout Pack Gardener

    Green Energy Layout

    The green energy layout begins with a large header image with header text, three checkmarks next to some company qualities, and a CTA button. The about us section has some text and a CTA button next to an image with a hover effect. Next, there are three cards representing three types of green energy. The services section features three services, each with an image, an icon, description text, and a button. There is a why to go green section that has a large image and a box with some text and a button. Following this is a how we work section with some icons on the right and description text on the left. There are some number counters below this representing relevant data. After this is a testimonial section on a large image background, then a why choose us section with a skill graph. Finally, the footer has social media icons, links to some internal pages, and copyright text.

    Divi Product Highlight Homepage 25 Divi Layout Pack Green Energy

    Gym Layout

    The gym layout uses a black, blue, and white color scheme with lots of loading animations. The header is a large image with header text and a button, and there are two additional buttons at the bottom of the header. Next is the services section, with description text, a CTA button, and an image for each service. The our trainers section features an image with text on the right, along with a CTA button. Below is information about the gym, classes, and online workouts. Then there is a section with a large image that features the fitness services, followed by another section with text to describe membership plans. The why choose us section has a skill bar graph, customer testimonials, and four number counter modules. This is followed by an FAQ section and a contact section with a contact form and contact information.

    Divi Product Highlight Homepage 25 Divi Layout Pack Gym

    Handyman Layout

    This layout features a header with heading text, a CTA button, and blurb modules with contact information. The about us section features text, a round image, and a customer testimonial. The services are presented on colored backgrounds with text and a CTA button. Next is the why choose us section, with arrows and text, a CTA button, a phone number, and a round image. The our works section is a gallery section, followed by a contact form, contact information, and a footer bar.

    Divi Product Highlight Homepage 25 Divi Layout Pack Handyman

    Interior Designer Dark Layout

    This is the dark version of the interior designer layout. The header features a large image with heading text and a CTA button. The about us section features an icon, text, and an image with a label over it. The our services section is laid over an image and also features an icon. The why choose us section displays some customer reviews, a CTA button, and an image. Following this is the our works section, which is a gallery module. The how we work section features three steps, each with a photo, description, and CTA button. Finally, there is contact information, a contact form, and a footer bar.

    Divi Product Highlight Homepage 25 Divi Layout Pack Interior Dark

    Interior Designer Light Layout

    And this is the light version of the interior designer layout. The layout is the exact same as the dark version, but the primary background color is light.

    Divi Product Highlight Homepage 25 Divi Layout Pack Interior Light

    Photography Layout

    The photography layout uses a black and white color scheme and black and white filters on the photos. There is a large header image with text and social media icons, followed by some about text. There are four photos that represent and link to four different styles of photography and some additional text below this. The how we work section also has a large photo, text, and a CTA button. There is a featured works section with a CTA button and a gallery, and then the page ends with a contact form and contact information.

    Divi Product Highlight Homepage 25 Divi Layout Pack Photography

    Travel Agency Layout

    Our final layout is the travel agency layout. This layout features a large header image with headwear text and a CTA button. Overlaying the header is a newsletter subscription sign-up form. Following this is a list of icons, then some introduction text and three different cards with an image, text, and a button. Then there are three linked images that feature activities you could book, with some description text. The why choose us section has some text and then an image with a link and some more text. Next are some testimonial blurbs. Finally, the page ends with a button to a contact form and an image.

    Divi Product Highlight Homepage 25 Divi Layout Pack Travel Agency

    Purchase Homepage 25 Divi Layout Pack

    Homepage 25 Divi Layout Pack is available in the Divi Marketplace. It costs $19.99 for unlimited website usage and lifetime updates. The price also includes a 30-day money-back guarantee.

    Final Thoughts

    Homepage 25 provides several beautiful home page layouts for your next design project. Each layout is unique and is styled for a specific industry, but every design can be totally customized to fit whatever you need. Keep in mind that these home page layouts only contain the one page and all contain CTA links to various sub-pages, which you will have to design yourself. Nonetheless, if you are looking to get a head start on your next design project with a home page template, this product will surely help you out.

    We would love to hear from you! Have you tried Homepage 25 Divi Layout Pack? Let us know what you think about it in the comments!

    The post Divi Plugin Highlight: Homepage 25 Divi Layout Pack appeared first on Elegant Themes Blog.

  • Divi Product Highlight: Slider Mega Pack

    Slider Mega Pack is a Divi layout pack with 50 slider layouts for your next web design project. The sliders are all built with Divi modules and can be easily customized with your own content and styles. In this product highlight, we’ll take a look at the layouts Slider Mega Pack has to offer and help you decide if it’s the right product for you.

    Let’s get started!

    Installing Slider Mega Pack

    Slider Mega Pack comes as a ZIP file containing Divi Builder .json files. To install the slider layouts, start by unzipping the file. Next, open your desired page in the Divi Builder.

    Divi Product Highlight Slider Mega Pack Install

    Click the portability option at the bottom of the page and select the import tab. Select the .json file for your desired slider layout and then begin importing the layout. Once the layout has been imported, all you need to do is replace the text and images and you’ll have a beautiful slider on your page!

    Divi Product Highlight Slider Mega Pack Install-32

    Slider Mega Pack Fullwidth Slider Layouts

    Slider Mega Pack comes with 32 fullwidth slider layouts. The fullwidth slider layouts are ideal for showcasing large images alongside some text and can be a great way to capture your visitor’s attention. It’s also a great way to share information or showcase some features of your service. All of these sliders have different layouts and designs, so you are sure to find a slider that will work for you! Let’s take a look at each of the 32 fullwidth slider layouts.

    Slider Mega Pack Layouts 1, 2

    The first slider layout is a text slider and features a photo background with a dark overlay over the left side of the photo. The text and the button change on each slide.

    The second slider layout is the same as the first layout, except the dark overlay and the text are on the right side.

    Divi Product Highlight Slider Mega Pack Slider Layout 2

    Slider Mega Pack Layout 3

    The third slider layout has a vignette effect on the image and features changing text and buttons in the middle. There are navigation dots at the bottom as well as previous and next buttons on each side.

    Divi Product Highlight Slider Mega Pack Slider Layout 3

    Slider Mega Pack Layout 4

    This slider features multiple images on a blurred background of the image, with navigation arrows on each side and navigation dots at the bottom.

    Divi Product Highlight Slider Mega Pack Slider Layout 4

    Slider Mega Pack Layout 5

    Slider layout 5 also features multiple images on a blurred background of the same image. It has navigation arrows to the bottom left as well as navigation dots on the right side.

    Divi Product Highlight Slider Mega Pack Slider Layout 5

    Slider Mega Pack Layout 6

    The sixth slider layout features changing text on a blurred transparent square over a parallax photo background. Navigation arrows to each side and navigation dots on the bottom.

    Divi Product Highlight Slider Mega Pack Slider Layout 6

    Slider Mega Pack Layout 7

    Layout 7 is similar to layout 6, with a parallax background and text slides. Navigation arrows are at the bottom left corner and the navigation dots are on the right side.

    Divi Product Highlight Slider Mega Pack Slider Layout 7

    Slider Mega Pack Layouts 8, 9, 10

    Slide layouts 8,9, and 10 feature text over multiple images that have a zoom-in effect. In these layouts, the navigation arrows are on each side and navigation dots are at the bottom of the slider. The text in Layout 8 is centered.

    The text in Layout 9 is left-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 9

    And the text in Layout 10 is right-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 10

    Slider Mega Pack Layouts 11, 12, 13

    Layouts 11, 12, and 13 feature a large image with text and a button on each slide, with navigation arrows to each side and navigation dots at the bottom. Layout 11 is center-aligned.

    Slider 12 is left-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 12

    And slider 13 is right-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 13

    Slider Mega Pack Layouts 14, 15, 16

    These layouts 14, 15, and 16 all have a greyscale effect on the photo and a parallax effect as you scroll. There is a bold underline over the header text. The text is center-aligned for layout 14.

    Slider 15 is right-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 15

    And slider 16 is left-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 16

    Slider Mega Pack Layouts 17, 18

    Layouts 17 and 18 feature a large image with slide text in a dark overlay box. For Layout 17, the text is on the left and the navigation is on the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 17

    For layout 18, the navigation is on the left and the text is on the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 18

    Slider Mega Pack Layouts 19, 20, 21

    Sliders 19, 20, and 21 all feature a greyscale photo overlay and have a zoom-in effect. There are no navigation buttons. Slider 19 is left-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 19

    Slider 20 is right-aligned.

    And the text in slider 21 is centered.

    Divi Product Highlight Slider Mega Pack Slider Layout 21

    Slider Mega Pack Layouts 22, 23, 24

    These layouts are the same as the three above, except the photos have a zoom-out effect. Layout 22 has left-aligned text.

    Divi Product Highlight Slider Mega Pack Slider Layout 22

    Layout 23 has right-aligned text.

    Divi Product Highlight Slider Mega Pack Slider Layout 23

    And Layout 24 has centered text.

    Divi Product Highlight Slider Mega Pack Slider Layout 24

    Slider Mega Pack Layouts 25, 26

    Slider layouts 25 and 26 have a large image that zooms in and text over a dark overlay box. Layout 25 has the text aligned to the left and navigation icons on the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 25

    Slider layout 26 has the text aligned to the right and the navigation icons on the left.

    Divi Product Highlight Slider Mega Pack Slider Layout 26

    Slider Mega Pack Layouts 27, 28

    The next two layouts are the same as the two above but the image zooms out instead. Slider layout 27 has text aligned to the right and navigation icons to the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 27

    Layout 28 has navigation icons to the left, text to the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 28

    Slider Mega Pack Layouts 29, 30

    These two sliders feature a large image that zooms in and a different style of navigation icons. Layout 29 features the text on the left and the navigation icons on the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 29

    Layout 30 features the text on the right and the navigation icons on the left.

    Divi Product Highlight Slider Mega Pack Slider Layout 30

    Slider Mega Pack Layouts 31, 32

    These next layouts are the same as layouts 29 and 30 but the image zooms out. Layout 31 has text on the left and navigation on the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 31

    Layout 32 has text on the right, navigation on the left.

    Divi Product Highlight Slider Mega Pack Slider Layout 32

    Slider Mega Pack Fullwidth Post Slider Layouts

    The Slider Mega Pack also comes with 18 post sliders. These sliders showcase posts from your blog and display the post information and a button to read the post. It uses the post’s featured image as the background image for the slide. You can select a category of posts to display, or simply display your most recent posts. Like the regular sliders above, all of the post sliders are completely customizable and come in a variety of layouts, alignments, and styles.

    Slider Mega Pack Layouts 33, 34

    These sliders use a greyscale image effect and a parallax effect. Text is on the left and navigation is on the right with layout 33.

    Navigation is on the left and text is on the right with layout 34.

    Divi Product Highlight Slider Mega Pack Slider Layout 34

    Slider Mega Pack Layouts 35, 36, 37

    Layouts 35, 36, and 37 feature a large featured image with navigation arrows on each side and navigation dots below. The image has a zoom-in effect. The text is centered in Layout 35.

    Divi Product Highlight Slider Mega Pack Slider Layout 35

    In this layout, the text is left-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 36

    And in this layout the text is right-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 37

    Slider Mega Pack Layouts 38, 39, 40

    These slider layouts are the same as the three layouts above, but the image zooms out instead. Layout 38 is centered.

    Layout 39 is left-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 39

    And layout 40 is right-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 40

    Slider Mega Pack Layouts 41, 42

    These layouts feature a parallax image with text on one side and navigation arrows on the other. For layout 41 the text is to the left.

    Divi Product Highlight Slider Mega Pack Slider Layout 41

    For layout 42 the text is to the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 42

    Slider Mega Pack Layouts 43, 44

    Layouts 43 and 44 are similar to the layouts above but the image zooms in. In layout 43, the text is left-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 43

    The text is right-aligned in layout 44.

    Divi Product Highlight Slider Mega Pack Slider Layout 44

    Slider Mega Pack Layouts 45, 46

    45 and 46 are again a similar design to the layouts above, but the image zooms out instead. 45 has left-aligned text.

    Divi Product Highlight Slider Mega Pack Slider Layout 45

    And layout 46 has right-aligned text.

    Divi Product Highlight Slider Mega Pack Slider Layout 46

    Slider Mega Pack Layout 47, 48

    Layouts 47 and 48 feature a dark overlay square for the post title and navigation arrows. The image zooms in. Layout 47 has the text on the left and arrows on the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 47

    Layout 48 has the text on the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 48

    Slider Mega Pack Layout 49, 50

    Finally, slider layouts 49 and 50 are similar to layouts 47 and 48, but the images zoom out. Layout 49 has the text on the left.

    Divi Product Highlight Slider Mega Pack Slider Layout 49

    And layout 50 has right-aligned text.

    Divi Product Highlight Slider Mega Pack Slider Layout 50

    Purchase Slider Mega Pack

    Slider Mega Pack is available in the Divi Marketplace. It costs $9.99 for unlimited website usage and lifetime updates. The price also includes a 30-day money-back guarantee.

    Final Thoughts

    Slider Mega Pack comes with 50 prebuilt slider layouts with beautiful transitions, effects, and navigation layouts that can be easily customized with the Divi Builder. If you are looking for some unique slider layouts that are customized beyond the standard Divi options, this product might be just right for you. We would love to hear from you! Have you tried Slider Mega Pack? Let us know what you think about it in the comments!

    The post Divi Product Highlight: Slider Mega Pack appeared first on Elegant Themes Blog.