EDITS.WS

Tag: Divi Tutorial

  • How to Set Up Your Divi Contact Form

    A contact form is a great feature to add to a website. As a business owner, you could use a contact form to allow potential customers to send a message. As an influencer, setting up a contact form on a website can open doors for brand deals. A contact form has a variety of uses from collecting information from website visitors to allowing viewers to connect. Of course, inside Divi, you can find a customizable Contact Form Module that you can use for the websites you build.

    Let us go through several things to consider as you embark on setting up a contact form in Divi. We will be using the Contact Page Layout from within the Print Designer Layout Pack.

    Adding Your Fields: Let’s Get Organized

    There isn’t a one-size-fits-all solution when it comes to setting up a contact form in Divi. Nevertheless, you do need to have an idea of what the purpose of your form will be. The types of fields that you’ll use within the Divi Contact Form Module will assist you in ensuring that you are collecting the relevant data from your website visitors. The Divi Contact Form Module comes equipped with six (6) field types that you can use within your form.

    The Divi Contact Form Module Fields

    Input Field: The input field is one of the most common form fields that you will use in your form. It allows users to enter short answers to questions. An example of an input field could be “First Name”.

    Email Field: A pretty self-explanatory field, the email field allows you to collect an email address within your form. You may need to add this field to your form if you intend to reach out to the user who submitted the form.

    Text Area: Similar to the input field, the text area field allows users to input in text. However, the text area field allows them to write quite a bit more than within an input field. An example of when you might use a text area field might be if you are looking to collect information about a project that a client may want to send to you.

    Checkboxes: Checkboxes allow users to make multiple selections from a list of options that you provide. You could use a checkbox field if you needed a custom field to select several different flavors for the cake they will be ordering through your contact form.

    Radio Buttons: Like a checkbox, a radio button provides users with a variety of choices to make a selection from. Unlike checkboxes, a radio button allows users to make only one selection out of the options that you have provided for them.

    Select Dropdown: A dropdown field allows website users to make a selection from a select list of options. Though checkboxes, radio buttons, and dropdowns all provide users with the option of selecting from a list of items, their uses will depend on the question that you are asking as well as the answer you are hoping to receive from them.

    Field options for the Divi Contact Form Module

    Planning Your Form Offline

    Now that you know a little bit about the different types of fields that can be used within the Divi contact form module, it’s time to plan out what your form fields will be. You can use something as simple as pen and paper, or even a Google Doc to first determine the purpose of your form. From your purpose, you’ll be able to plan out what the necessary fields would be for you to add to your form. After that, you’ll need to select the appropriate field for that question.

    As an example, you wouldn’t use the text area field to simply collect the name on a form. Similarly, you wouldn’t use the dropdown field to collect someone’s email address. Careful planning with your form will set you up for success when building your website. This will also create a good user experience for potential website viewers.

    Deciding Which Fields We Want To Make Mandatory

    After you’ve decided on the fields that you’d like to add to your form, consider the fields users must fill in to submit your form. Why would you want to make a field mandatory you ask? Let’s go back to our contact form plan that we created with pen and paper. If we are an influencer, we would want to have the name of the person who is reaching out to us. We would want to make the name field mandatory so that we can properly address the person who is sending us a potential brand deal.

    Alternatively, we may want to make the email address field mandatory as well. This will allow you  to reach back out to this person. However, we may want to make the telephone field optional, in case they have an international number or we don’t want to get too personal and intrusive. In this case, you’d make the name fields and the email address fields mandatory in your form to ensure that you can properly communicate with the person once they have filled out and submitted their form.

    Setting up mandatory fields within the Divi Contact Form Module

    Setting up Our Email Address

    We now know what fields we’ll be using within our form and we know which fields we need to make mandatory so that we can collect the relevant information from users. Next up, we need to set up our email address. By default, all form entries from a Divi contact form will be emailed to the email address that you input within the email section under the content tab. It’s important to have an email address that you’ll easily have access to to collect the entries from this form. You would enter in said email address within the content tab of the contact form module. You can add multiple email addresses to the email field by separating them with a comma.

    Setting up the email address to receive submissions from the Divi Contact Form Module

    Creating a Message Pattern

    Next, you want to be able to properly read the content of the form submission that was just sent to you. To do this, you’ll need to keep track of the field ID that you used for each of the form fields that you created. You can easily find the field ID of each form field by editing the form field. The message pattern textbox allows you to control the content of the email that you receive as the website owner. Using the field ID, you can craft a clear and coherent message to yourself.

    Creating a message patten while setting up the Divi Contact Form Module

    Security: How To Prevent Spam

    For as long as can be remembered, spam has been a problem on the internet, and your website may get its fair share. However, there are spam protection services available that can help make your life a bit easier. The Divi Contact Form Module is able to integrate into reCaptcha. reCaptcha is an internet service that protects forms and websites from pesky spammers. You can connect your account to the form module. Usually, a small arrow will appear on the frontend of your site to show that your site is protected.

    Spam protection while setting up the Divi Contact Form Module

    Adding a Success Message

    After the form has been submitted, there are several other factors to bear in mind. Firstly, You can decide to have a success message briefly shown to those who have successfully submitted the form. You can determine this message by filling out the success message field within the text dropdown in the content tab. Alternatively, you can enable the redirect URL switch to have the user sent to an entirely different page all together. The choice is yours. Please bear in mind however the overall purpose and use of your form.

    Setting up a success message and post submit processes for the Divi Contact Form Module

    Making Sure the Design Matches Your Website

    By default, your Divi contact form will come with a white background and will inherit the button style that has been set for it via the Customize tab under Appearance > Customize. However, you shouldn’t let that stop you from having a rad contact form!

    Some of the ways that you can make your contact form stand out include:

    • Adding a border: Adding a colored border to your form fields can add interest.  This can in turn encourage more people to fill out your form. If you’re using your form to collect leads, product orders, etc. This is a great thing!
    • Changing the focus color: You can change the focus color of your form fields. When someone clicks into a field, it will now have a different styling. This is another way to build interest in your form.
    • Playing with the length of the field
    • Adding hover effects to the submit button: It is recommended to style all buttons across your website based on their use and importance. This also applies to your contact forms’ submit button! Don’t neglect to style this field. You can even go a step further and add some hover and animation effects to it!

    At the end of the day, it is ideal that you should customize and style your contact form to match the rest of the branding of your website.

    If you’d like, you can add a title to your form. This will take on the default heading styling of your website. However, you can use the design tab within the contact form module to style this differently. It’s always a good idea to maintain your branding on the various modules throughout your website. You can also consider changing the wording of the submit button to something other than the word submit.

    Ending Thoughts on Setting up Your Divi Contact Form

    Having a contact form on your website can greatly encourage your users to interact with you. From taking orders to collecting feedback, your contact form provides a means for communication between you and your site visitors By styling it, correcting, securing it, and making it simple for you to collect information, using the Divi contact form module on your site today can help you have a better website, blog and online store.

    The post How to Set Up Your Divi Contact Form appeared first on Elegant Themes Blog.

  • 5 Ways to Style the Avatar in Divi’s Comments Module

    The comments section of your blog posts — or pages — in WordPress allows you to have meaningful discussions with users and readers of your site. There was a time when the comments section of our favorite websites was a place to connect with one another. With the slow demise of some social media platforms, many are turning back to creating blogs. With this in mind, we can use this opportunity to beautify our comments section.

    In today’s tutorial, we’re focusing on styling the comment avatar in Divi. However, let’s take a look at some of the other elements of Divi’s Comments Module that we can style.

    Elements of Divi’s Comments Module

    Divi’s Comments Module has quite some elements. One can use the module to both showcase comments and submit comments. The module also shows how many comments have been submitted, along with the name and photo of the comment submitter. Here’s a look at the various elements of the module:

    A breakdown of the Divi Comments Module and its various components

    In order, here’s what each numbered section corresponds to:

    1. Name of the comment author
    2. The comment itself
    3. The avatar of the comment author
    4. Metadata of the comment (date, time posted etc.)
    5. Reply button
    6. Submit a comment form

    Within the Design Tab of the Comments Module, you can see that we have many options that we can use interchangeably to style the various aspects of the module.

    Settings within the Comments Module Design Tab

    Styling the Comment Avatar in Divi

    Within the Comments Module settings, we’ll be spending most of our time in the Design and Advanced tab. We will be using the built-in features to lay the framework for styling the comment avatar in Divi. Afterward, we will use a few snippets of CSS to bring our vision to life. For this tutorial, we will be using freebies that are available in the Divi Resources section of our blog. When it comes to styling any aspect of your site, it’s imperative to draw inspiration from the design that you’ve created. This helps there to be cohesion in your work and causes you to build stronger brand awareness with your audience.

    You can see how we plan on doing this through the examples below:

    First Example: Divi Stone Factory

    Divi Stone Factory Blog Layout with Comments Avatar Styled

    Second Example: Divi Consultant

    Divi Consultant Blog Layout with Comments Avatar Styled

    Third Example: Home Care

    Divi Home Care Blog Layout with Comments Avatar Styled

    Fourth Example: Divi NGO

    Divi NGO Blog Layout with Comments Avatar Styled

    Fifth Example: Divi Data Science

    Divi Data Science Blog Layout with Comments Avatar Styled

    For each of these examples, we pull inspiration from assets and designs that are already within the layout template. By doing this we ensure that as we are styling the comment avatar in Divi, we are still speaking to the overall design of our chosen layout.

    Let’s jump into the first example!

    Styling the Comment Avatar in Divi ft. Divi Stone Factory

    Firstly, you will need to follow the instructions in this blog post to download and install the Blog Post Template for the Divi Stone Factory Layout Pack.

    Identifying Inspiration Before Styling the Comment Avatar in Divi

    A major key in this tutorial is to become familiar with drawing inspiration from a design and applying that to the styling throughout a layout. In our case, we’ll be taking inspiration from the way that the featured image is styled. Let’s bring the same idea to our Comments Avatar.

    Divi Stone Factory comment avatar design inspiration from featured image styling

    Open Comments Module Settings

    Once your layout is installed, scroll down to the Comments module and open the settings.

    Entering the comments module settings menu

    Add Border to Avatar Image

    Navigate to the Design tab. Click on the Image tab. Scroll down to Image Border Styles and select the first icon for All Borders. Next, add an Image Border Width of 10px and an Image Border Color of #FFFFFF. We also want to keep the Image Border Style at Solid.

    Adding a border to the comments avatar

    Image Settings:

    • Image Border Styles: All borders
    • Image Border Width: 10px
    • Image Border Color: #FFFFFF
    • Image Border Style: Solid

    Add Image Box Shadow

    Add an Image Box Shadow to your avatar. Adjust the Horizontal and Vertical Position to -10px.  Next, make the Shadow Color #000000.

    Avatar box shadow settings

    Image Box Settings:

    • Image Box Shadow: Shadow #4
    • Box Shadow Horizontal Position: -10px
    • Box Shadow Vertical Position: -10px
    • Shadow Color: #000000

    Add Custom CSS

    Taking a look at our avatar as it stands now, it slightly overlaps the comment body. We’re also missing a thinner border around the image. We’re going to add this in with CSS in the Advanced tab of the Comments settings modal.

    Finishing touches for comment avatar

    Navigate to the Advanced tab within the Comments Module settings. Add the following snippets of CSS to the Comment Meta, Comment Content, and Comment Avatar

    Custom CSS

    Comment Meta:

    margin-left: 15px;

    Comment Content: 

    margin-left: 15px;

    Comment Avatar:

    border: 1px solid #000000;

    Custom CSS for the Stone Factory Comment Module's Avatar

    A left margin is added to the comment content and meta so that the added border to the avatar doesn’t cover the comment text and meta information. We add another border to the comment avatar to replicate the design that was found with the featured image.

    With all that said, let’s move on to example number two with the Divi Consultant Layout Pack!

    Example Two: Styling the Comment Avatar in Divi with the Divi Consultant Blog Post Template

    For our second example, we’ll be taking our inspiration for the comment avatar from a design element that is used within this layout pack.

    Design inspiration within the Divi Consultant Layout Pack

    Changing Avatar Shape with CSS Borders

    Firstly, we’re going to scroll down to the Comments Module and enter into the settings menu. Secondly, we’re going to navigate to the Design tab. Within the Design tab, let’s click on the Image tab to start making our border changes. Firstly, let’s make Rounded Corners on our avatar with a value of 55px. This will make our avatar a circle. Next, we’ll add a 2px, solid border in black.

    Adding rounded corners to make our avatar a circle

    Image Settings:

    • Image Rounded Corners: 55px, all corners, linked
    • Image Border Styles: All borders
    • Image Border Width: 2px
    • Image Border Color: #000000

    Adding an Accent to Our Avatar

    Now, we’re going to add a cute blue accent to our avatar. We will be using the Box Shadow setting to create a circle that’ll appear behind each avatar. Notice how this calls back to the inspiration that we took from the image used within the header. To do this, we’ll keep on scrolling through the Image tab till we get to the Image Box Shadow. Here, we’re going to select the first option, which is a soft glow. However, we’re going to adjust the settings to turn this into a circle!

    Adding an accent to our avatar by using Box Shadow settings

    Box Shadow Settings:

    • Image Box Shadow: Shadow #1
    • Box Shadow Horizontal Position: -30px
    • Box Shadow Vertical Position: -30px
    • Box Shadow Blur Strength: 0px
    • Box Shadow Spread Strength: -28px
    • Shadow Color: #3093fb

    Luckily, in this example, there was no need to use any custom CSS! Our avatar was styled completely using settings found natively within the Divi Builder.

    Divi Home Care: Our Third Example of Styling the Avatar within the Divi Comments Module

    In our third example, we’ll be using the Divi Home Care Blog Post Layout. Looking at the call-to-action section within this layout, let’s imitate the orange and yellow boxes for our comments avatar.

    Divi Home Care design inspiration for our avatar

    Shaping Our Comments Avatar with Rounded Corners

    The use of rounded corners will give our avatar an interesting shape. However, we will only apply rounded corners to the top left and top right corners. Both of these will be receiving a radius of 25px. The bottom right and bottom left corners will remain untouched with a radius of 0px. Make sure that you have unchecked the link icon within the border-radius box. This will allow us to have different settings for each corner of our image.

    Adjusting rounded corners to create unique shapes for our avatar

    Image Border Settings:

    • Image Rounded Corners: 25 px 25px 0px 0px (clockwise, unlinked)
    • Image Border Styles: All borders

    Adding a Border

    Now, we’re going to add a border. This will call to the Email Optin module in the header of this Blog Post Template.

    Styling the avatar's border

    Let’s notice something. After we’ve added our border settings, the border now overlaps over the comment body as well as the comment author and meta information. We’re going to rectify this by using a few lines of CSS within the Advanced tab of the module.

    Adding custom CSS to make comment readiable

    Custom CSS

    Comment Meta:

    margin-left: 15px;

    Comment Content:

    margin-left: 15px;

    These two simple lines of code help to add some breathing room around our avatar image… while also allowing us to read the comments clearly!

    Styling the Comment Avatar in Divi ft. Divi NGO

    For our fourth example, we’ll be using the Divi NGO Blog Post Template. Notice the styling of the avatar’s profile photo. This is what we’ll be emulating for the avatar within our Comment Module.

    Pulling inspiration for our tutorial from elements within the layout pack

    Adding Rounded Corners to Our Avatar

    Similar to some of our previous examples, we’ll be employing the use of Divi’s Rounded Corner features to style our avatar. In our case, we’ll be making all the corners of this avatar 20px.

    Creating rounded corners for our Divi NGO comments avatar

    Image Settings:

    • Image Rounded Corners: 20px (all corners, linked)

    Adding a Box Shadow

    The second part of this styling is to add a solid, opaque box shadow behind our avatar. We’ll be using the same color as the author’s photo, to keep our branding seamless throughout this template. We’ll be using the fourth box shadow option, and using the default Divi settings for this shadow.

    Adding our box shadow settings to our avatar

    Box Shadow Settings:

    • Image Box Shadow: Shadow #4
    • Box Shadow Horizontal Position: 10px
    • Box Shadow Vertical Position: 10px
    • Box Shadow Blur Strength: 0px
    • Box Shadow Spread Strength: 0px
    • Shadow Color: #347362

    Due to the positioning of the shadow, we won’t be needing any custom CSS on this example either.

    Final Example: Divi Data Science Blog Layout

    Our fifth and last example of styling the comment avatar in Divi will be using the Divi Data Science Blog Layout Pack. As in previous examples, we’ll be drawing our inspiration from the styling of the featured image within this layout pack.

    Featured image inspiration for our Comments avatar

    Therefore, we know that we’ll be adding a thick white border and some box shadow to our Comment avatar.

    Adding a Border to our Comment Avatar

    This avatar will remain a square, however, we will be adding a border to it. Let’s go ahead and scroll down to the Image tab, and add a white border to our image.

    Adding a border to the comment avatar

    Image Border Settings:

    • Image Border Styles: All borders
    • Image Border Width: 10px
    • Image Border Color: #000000
    • Image Border Style: Solid

    Adding Shadow to Our Avatar

    In this tutorial also, we’ll be using the default Divi Box Shadow setting to add a shadow to our Comment avatar. We’ll be using Box Shadow option 3.

    Using the default box shadow settings

    Box Shadow Settings:

    • Image Box Shadow: Shadow #3
    • Box Shadow Horizontal Position: 0px
    • Box Shadow Vertical Position: 12px
    • Box Shadow Blur Strength: 18px
    • Box Shadow Spread Strength: -6px
    • Shadow Color: rgba(0,0,0,0.3)

    To prevent our newly styled avatar from covering up our comment information, we’re going to add a few lines of CSS to clean our design up.

    Cleaning up the Comment avatar with custom CSS

    Custom CSS:

    Comment Body:

    margin-top: 50px;

    Comment Meta: 

    margin-left: 15px;

    Comment Content: 

    margin-left: 15px;

    Bringing it All Together

    The comment avatar is a small piece of a module that can be customized deeply with CSS and Divi’s native tools. Don’t forget to look to your design to draw inspiration from. Through this inspiration, endless designs can be created that speak for your brand!

    The post 5 Ways to Style the Avatar in Divi’s Comments Module appeared first on Elegant Themes Blog.

  • Download a FREE Blog Post Template for Divi’s Chocolatier Layout Pack

    Hey Divi Creators! Thanks for joining us for the next installment of our weekly Divi Design Initiative where each week, we give away brand new freebies. This time around we’re building upon the Chocolatier Layout Pack with a brand new blog post template that matches the rest of the pack perfectly. Hope you enjoy it!

    divi layout

    Check Out The Chocolatier
    Blog Post Template Below

    Get it for free today!

    Desktop View

    The Divi Chocolatier Blog Template in desktop view

    Tablet/Mobile View

    The Divi Chocolatier Blog Template in tablet and mobile view

    Download The Blog Post Template For The Chocolatier Layout Pack

    To lay your hands on the free Chocolatier Blog Post Template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

    How to Upload The Template

    Go to Divi Theme Builder

    To upload the template, navigate to the Divi Theme Builder in the backend of your WordPress website.

    Opening the Divi Theme Builder to Import the Divi Conference Category Layout

    Upload Website Template

    Then, in the top right corner, you’ll see an icon with two arrows. Click on the icon.

    Importing the Header and Footer Layout into the Divi Theme Buidler

    Navigate to the import tab, upload the JSON file that you could download in this post, and click on ‘Import Divi Theme Builder Templates’.

    Import settings for the header and footer layout pack

    Save Divi Theme Builder Changes

    Once you’ve uploaded the file, you’ll notice a new template with a new body area that has been assigned to All Posts. Save the Divi Theme Builder changes as soon as you want the template to be activated.

    Save the imported blog post layout within the Divi Theme Builder

    How to Modify The Template

    Open Post Template

    To modify the template’s elements, start by opening the template.

    Begin editing the blog post body template within the Divi Builder

    Inside the Body Layout Editor, you can edit the design on the front end using the Divi Builder just like you would with a normal Divi page.

    Since this is a template that has been assigned to all posts for the site, there is a post content module that is necessary for displaying the post content. You will need to keep that module in place, but you can adjust the post content module’s design elements, which will design the post content that is displayed dynamically.

    You can edit the titles, fonts, color etc. of the Post Content Module that will affect the body text in the Divi Chocolatier Blog Page Template

    About the Layout

    This blog post template has a few dynamic elements that will work with your blog posts immediately. Our entire post header is made up of dynamic elements including a featured image, the post excerpt, the post category and the post title. This content won’t need updating, but you can tweak the design of each of those elements if needed.

    Other dynamic elements include the following:

    • Post Author Name: We use a Text Module to show the first and last name of the post author
    • Post Author Bio: Again, we use a Text Module to show the author bio
    • Post Author Photo: An Image Module is in use to bring in the author profile photo from Gravatar
    • Comments: A comment form with a comments section

    Here is a quick illustration that identifies the elements of the Divi Chocolatier blog post template.

    Divi Chocolatier Blog Post Template Breakdown

    Update Static Content Modules

    There are some elements on this post template may need your immediate attention before using it live on your own website. For this post template, you may want to consider updating the Text and  Button modules that are used as call-to-actions above the comments section.

    New Freebies Every Week!

    We hope you’ve enjoyed the Chocolatier Layout Pack and the blog post template freebie that goes along with it. We look forward to hearing your opinions in the comment section below. Make sure you check back next week for more freebies!

    The post Download a FREE Blog Post Template for Divi’s Chocolatier Layout Pack 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.

  • How to Set up WordPress Projects for Divi’s Filterable Portfolio Module

    The Filterable Portfolio Module for Divi is a great module to display your WordPress projects. Projects are easy to create and manage within WordPress. Once you’ve created them, Divi’s Filterable Portfolio Module displays any number of projects based on your selections. Your website’s visitors can easily sort them by category to see the work that interests them.

    In this post, we’ll see how to set up WordPress projects for Divi’s Filterable Portfolio module.

    Let’s get started!

    Filterable Portfoliio Module Preview

    First, let’s see what we’ll build in this tutorial.

    Desktop

    Portfoliio Preview

    Phone

    Portfoliio Preview

    Setting Up WordPress Projects

    Projects is a custom post type that’s built into WordPress. It works like any post type, but it has its own editor, list, categories, tags, etc. The Projects post type is great for creating portfolios to showcase your work. To use them properly, it’s important to know how to set them up with proper categories and tags.

    To view or create projects, go to Projects in the WordPress dashboard. You’ll see a menu with All Project, Add New, Categories, and Tags. Let’s look at each one.

    All Projects

    The Projects menu includes several options. All Projects opens when you select the Projects link. This screen lists all your projects with the title, author, categories, tags, comments, and date. You can perform edits on each project individually, do bulk edits, and create a new project.

    Setting Up WordPress Projects

    Add New

    To create a new project, select Add New in either the All Projects screen or the Projects dashboard menu. This opens the project editor. It works the same as a regular post type and includes the title, body content, categories, tags, featured image, excerpt, and the discussion options.

    Setting Up WordPress Projects

    Categories

    Categories work the same as regular post categories, except they are specific to projects. The Projects post type is the only post type that will use these categories. Existing categories for other post types are not available to the project post type. You’ll need to create them specifically for the Projects post type.

    When creating categories, be sure to use categories that are relevant to the project and provide a good overall description. Think of them as the broad topic the project would fall under. Don’t go too broad, though.

    For example, if you were creating categories for home repair, you might have separate categories for electrical, plumbing, construction, etc. Home Repair wouldn’t be the category in this case, since it’s the topic of the website. Home Repair might be a topic for a larger company that did new construction, repaired old construction, worked with both industrial and residential construction, etc. So, the categories need to fit the website.

    For my examples, I’ve created the categories to describe the types of photography this website would offer. They answer the question “what type of photography?”

    For my examples, I’ve created the categories:

    • Weddings
    • Proposals
    • Anniversary
    • Proms
    • Graduation

    Each of these categories describes the specific type of photography the client might look for. Ideally, each project would fit into one category.

    To create a category, simply fill in the fields and click Add New Category. Category fields include the name, slug, parent category, and description. You can also view and edit categories from the list.

    Setting Up WordPress Projects

    Tags

    Like categories, tags work the same way as regular post categories, but they’re created specifically for the Projects post type. Create tags that help describe the item within the category. They can help narrow down the topic.

    For our Home Repair example, you might use Appliances as a category and Gas and Electric as the tags. Use as many tags as you need.

    For my examples, I created six tags:

    • Inside
    • Outside
    • High School
    • Company
    • Church
    • Family

    These tell the client a little more about each photo shoot. We could go even further if we wanted to describe the type of crowd as large or small, the type of photos as color or black and white, and lots more.

    The tag editor includes the name, slug, and description. You can edit them from the list.

    Setting Up WordPress Projects

    Projects Example

    In this example, I’ve added a title, some body content including a description and photos, a category, a tag, and a featured image. I’ve selected Weddings as the category and Outside as the tag. I’m using the tag as a description of the wedding. I could add more tags if needed.

    Setting Up WordPress Projects

    Divi’s Filterable Portfolio Module

    Once you’ve created your projects, Divi’s Filterable Portfolio Module can display them. Users can filter the projects by categories to see the specific projects they’re interested in. You can select the categories, the number to display, and lots more. The module displays projects in fullwidth and grid layouts, so there are several designs to choose from.

    For this example, I’ve selected the grid layout, so all the projects are visible at once. It displays the filter with categories. Each project shows the featured image, title, and category.

    Divi’s Filterable Portfolio Module

    The Filterable Portfolio Module displays the filter at the top. The filter displays the categories and they’re clickable. Your visitors can view all categories or select a specific category. This example shows the Wedding category.

    Divi’s Filterable Portfolio Module

    Styling Divi’s Filterable Portfolio Module

    Next, let’s see how to style the Filterable Portfolio Module. For my examples, I’m adding a projects section to the landing page in the free Photography Studio Layout Pack that’s available within Divi.

    Alternatively, you could style your project pages as a Divi Theme Builder template that you could assign to any project you wanted. For more information, see the post How to Create a Dynamic Portfolio Project Template with Divi & ACF.

    Here are the first few sections of the layout. I’ll add the portfolio after the hero section. I’ll use design cues from the layout itself.

    Divi’s Filterable Portfolio Module

    Add a Section

    First, add a new Section under the hero section.

    Divi’s Filterable Portfolio Module

    Open the Section’s settings, scroll down to Background, and change the Background Color to black. Close the Section’s settings.

    • Background Color: #000000

    Divi’s Filterable Portfolio Module

    Add a Row

    Next, add a single-column Row.

    Divi’s Filterable Portfolio Module

    Add a Filterable Portfolio Module

    Finally, add the Filterable Portfolio Module from the list of modules.

    Divi’s Filterable Portfolio Module

    Filterable Portfolio Module Content

    For the Post Count, enter 4 into the field. Next, select the Categories you want to display in the Filterable Portfolio Module. By default, the module shows the Title, Categories, and Pagination. I’m leaving these at their default settings.

    • Post Count: 4
    • Categories: desired categories

    Divi’s Filterable Portfolio Module

    Filterable Portfolio Module Layout

    Next, go to the Design tab. The first section is Layout. The module displays in fullwidth by default, but I want to show the projects in a grid. Change the Layout to Grid. We’ll leave the image and overlay at their defaults.

    • Layout: Grid

    Divi’s Filterable Portfolio Module

    Filterable Portfolio Module Title Text

    Scroll down to Title Text. Use H2 for the Heading Level and change the Font to Inter, the Style to Bold, and the Color to #ff5a17.

    • Heading Level: H2
    • Font: Inter
    • Style: Bold
    • Color: #ff5a17

    Divi’s Filterable Portfolio Module

    Change the Size to 14px, the Letter Spacing to 1px, and the Line Height to 1.4em.

    • Size: 14px
    • Letter Spacing 1px
    • Line Height: 1.4em

    Divi’s Filterable Portfolio Module

    Filterable Portfolio Module Filter Criteria Text

    Next, scroll down to Filter Criteria Text. Change the Font to Inter, the Style to bold, and change the Color to black. This gives the filter a style that matches the layout and stands out from the portfolio.

    • Font: Inter
    • Style: Bold
    • Color: #000000

    Divi’s Filterable Portfolio Module

    Leave the Font Size at 14, which is the default setting. Change the Line Height to 1.4em.

    • Size: 14px
    • Line Height: 1.4em

    Divi’s Filterable Portfolio Module

    Filterable Portfolio Module Meta Text

    Next, scroll down to Meta Text. Change the Font to Inter and change the Color to white.

    • Font: Inter
    • Color: #ffffff

    Divi’s Filterable Portfolio Module

    Change the Line Height to 1.4em.

    • Line Height: 1.4em

    Divi’s Filterable Portfolio Module

    Filterable Portfolio Module Pagination

    Finally, scroll down to Pagination. Change the Font to Inter and the Color to white. Close the module and save your settings.

    • Font: Inter
    • Color: #ffffff

    Divi’s Filterable Portfolio Module

    Filterable Portfolio Module Results

    We now have a filterable portfolio that looks great within the layout. Here’s a look at how it looks filtered to show one category. Following this, we’ll see how it looks within the larger image of the layout.
    Divi’s Filterable Portfolio Module

    Desktop

    Portfoliio Preview

    Phone

    Portfoliio Preview

    Ending Thoughts on Setting up Divi’s Filterable Portfolio Module

    That’s our look at how to set up WordPress projects for Divi’s Filterable Portfolio Module. Creating projects is as simple as creating any content in WordPress. Once you’ve created your projects, add Divi’s Filterable Portfolio Module to any page or template to showcase your work anywhere on your website. The filter provides an extra layer of usability for your visitors as they can quickly see the types of work they’re looking for.

    We want to hear from you. Have you set up WordPress projects for your Divi Filterable Portfolio? Let us know about it in the comments.

    The post How to Set up WordPress Projects for Divi’s Filterable Portfolio Module appeared first on Elegant Themes Blog.

  • How to Create a Scroll Container for Your Divi Comments Module

    The comments section of a blog post allows readers to engage with others. It also allows users to be able to create conversations with people who are ingesting your comment. For those special posts that drum up a lot of noise, the comments section can get pretty hectic! You may want to find a way to make a long comments section easier to navigate. Consider creating scrollable comments in Divi!

    By creating a scroll container for your Divi Comments Module, you can minimize the amount of scrolling readers of your blog need to undergo. Thus, they have a better experience with your site. It’s important to consider factors of user experience when you are building your site, and by adding a scrollable comment in Divi you’re making your readers have an easier time enjoying your site which is always a good thing.

    Why Comments Are a Good Thing

    Before we head into the tutorial, let’s take a quick look at comments in general. In Divi, we have a Comments Module. This module allows users of your site to leave a comment on a page or post. The module also allows people to read past comments that have been left behind on a post by other readers of your site. When a post is engaging, it can encourage people to want to leave their thoughts, opinions, and questions with the author (a.k.a you) under the post. This is an example of what that looks like from the Elegant Themes blog:

    A sample of the Elegant Themes comments section

    This is the comments section on the 3 Best Voice Search Plugins for WordPress post on our blog. In it, you can see that several readers have left feedback, thanks, and more. The post’s author has also taken the time to respond to readers. This kind of engagement is good for your blog and website because it shows that you are providing value to you readers. In addition, it helps you build a stronger bond with those who use and visit your site. Now that we’ve seen comments in the wild, let’s see how we can manage the comments section in our own blog posts using Divi’s Comments Module.

    Scrollable Comments in Divi: An Overview

    For this tutorial, we’ll be using the Blog Post Template from Divi’s Software Layout Pack. Here’s a quick overview of the template:

    The Software Blog Post Template... Very long!

    Notice how there are a few comments on this post? We can make this part of our blog page easier to navigate by adding a vertical scrollbar. For this tutorial, we’ll be adding a vertical scrollbar to the row that is holding the Comment Module. Then, we’ll use a little bit of CSS to style said scrollbar so it looks different than the main scrollbar for the page. Ready? Let’s get into it!

    Scrollable Comments in Divi: The Tutorial

    Before we get started on creating scrollable comments in Divi with the Comments Module, you’re going to need to install the Software Blog Post Template. Follow the instructions within that blog post to install your Blog Post Template.

    Enter the Comments Row Settings

    Once your template is installed and edited to your satisfaction, we’re going to enter into the row that is holding the Comments Module. Scroll down to the section that contains the Comments Module. Hover over the row (green outline), and click on the gear icon. This will open up the settings module for the row.

    Enter the row settings

    Set Row Max Height

    Before we begin styling or activating the scrolling, we need to adjust the max height for the row. To do this, we click on the Design tab. Next, we click on the Sizing tab. We then enter a Max Height of 550px to the Max Height option.

    Adding max height to row

    Enter Row Advanced Settings

    After setting the max height of the row, we’re going to click on the Advanced tab within the modal box. It is here that the scrolling magic happens! Take note of the Vertical Overflow option which is further down the Advanced tab. We’ll be coming back to that soon.

    Enter the Advanced tab within the row settings modal box

    Activate the Vertical Scrollbar with Vertical Overflow

    Scroll down util you arrive at Vertical Overflow. Click on the dropdown and select Scroll.

    Activate vertical scrollbars by setting the Vertical Overflow to Scroll

    While we have our vertical scrollbar, we can spruce it up a bit with some almighty CSS and padding.

    Adding Padding to Prevent Overlap

    To prevent our newly added scrollbar from overlapping with our buttons within our comments section, we’re going to add some padding to the right and left-hand sides of our row. To do this, navigate to the Design tab of the Row Settings modal. Next, scroll down to Spacing. Click the link icon between the Left and Right Padding text boxes. We’re going to add a padding of 55px to each side of the row.

    Adding padding to row to prevent scrollbar from overlapping over Comments Module

    Since we’ve added some breathing space to our scrollbar, let’s now make it pretty with some custom CSS.

    Add a CSS ID to the Row

    Moving back to the Advanced tab of the row, scroll to the top. Add your CSS ID – for this tutorial, we’ll be using scrollie – that we’ll be calling within the Custom CSS section in the Body Template Settings.

    Add CSS ID to row to prepare for styling scrollable comments in Divi

    Add Custom CSS to Style Scrollbars

    Now, we’ll be entering into the Custom CSS for our Blog Post Template. This will ensure that our CSS will be active on each blog post within our website as this template is applied to All Blog Posts within the Divi Theme Builder. To enter the Custom CSS setting for our body template, click on the three dots within the purple button in the bottom center of the builder. Next, select the gear icon.

    Entering page settings for Custom CSS

    Add Custom CSS to Style Scrollable Comments in Divi

    We want to style the scrollbar for our scroll container to differentiate it’s use from the main scrollbars of our browsers window. To do this, we’ll be using some CSS. Once you are within the Body Template Settings, select the Advanced Tab. Next, scroll down to the Custom CSS tab.

    Entering the Advanced section of the Body Page Template

    Once we’re in the Custom CSS section of the Body Page Template, copy and paste the following CSS code:

    /* Custom Scrollbar CSS */
/* Firefox */
#scrollie {
scrollbar-width: auto;
scrollbar-color: #000000 #ffffff;
}

/* Chrome, Edge, and Safari */
#scrollie::-webkit-scrollbar {
width: 16px;
}

#scrollie::-webkit-scrollbar-track {
background: #ffffff;
}

#scrollie::-webkit-scrollbar-thumb {
background-color: #000000;
border-radius: 0px;
border: 3px solid #ffffff;
}

    Custom CSS for scrollable comments in Divi

    If you used a different CSS ID, ensure that you’ve updated the code snippet within your website to reflect this. You can edit the CSS or add to it to style your borders in a way that matches your brand and website. In our case, we went with a flat design to match the styling of the Divi Software Layout Pack.

    Save Your Blog Post Template

    Once you’re happy with your CSS edits, remember to save your Blog Page Template. Click on the green Save button on the bottom right-hand side of the bottom menu within the Divi Theme Builder.

    Save your work!

    Once your settings are saved, visit your newly updated comments section on your blog!

    Styled scrollable comments in Divi

    Scrollable Comments in Divi: The Conclusion

    Creating a scroll container for Your Divi Comments Module helps your users to have a better experience with your comments section. User engagement is an important factor to nurture within your blog. By making your Comments Module scrollable, you are providing ease of use for your readers when they come to enjoy your various blog posts.

    The post How to Create a Scroll Container for Your Divi Comments Module appeared first on Elegant Themes Blog.

  • Divi Plugin Highlight: Divi Mega Pro

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

    Divi Mega Pro Builder

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

    Divi Mega Pro Settings

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

    Divi Mega Pro Builder

    Add New

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

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

    Divi Mega Pro Builder

    Display Locations

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

    Divi Mega Pro Builder

    Mega Pro Animation

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

    Divi Mega Pro Builder

    Mega Pro Triggers

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

    Divi Mega Pro Builder

    Mega Pro Display Settings

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

    Divi Mega Pro Builder

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

    Divi Mega Pro Builder

    Custom Close Button Customizations

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

    Divi Mega Pro Builder

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

    Divi Mega Pro Builder

    Mega Pro Additional Settings

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

    Divi Mega Pro Builder

    Mega Pro Background

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

    Divi Mega Pro Builder

    Divi Mega Pro List

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

    Divi Mega Pro Builder

    Adding the Mega Menu

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

    Adding the Mega Menu

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

    Adding the Mega Menu

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

    Adding the Mega Menu

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

    Adding the Mega Menu

    Adding Tooltips

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

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

    Adding Tooltips

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

    Adding Tooltips

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

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

    Adding Tooltips

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

    Adding Tooltips

    Divi Mega Pro Templates

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

    Divi Mega Pro Templates

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

    Divi Mega Pro Templates

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

    Divi Mega Pro Templates

    Where to Purchase Divi Mega Pro

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

    Where to Purchase Divi Mega Pro

    Ending Thoughts

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

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

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

  • How to Add a Button to Your Divi Map Location’s Info Box

    The Divi Map module integrates with Google Maps seamlessly and is an easy way to add an interactive map to your Divi website. This is great for showing your business’s location or creating a local guide of your favorite boutiques and businesses.

    In this post, we’re going to show you how to add a button to the location info box for one of your pinned addresses.

    Design Preview

    First, let’s take a look at what we’re trying to accomplish. With some simple HTML, we’ll be able to accomplish adding a button inside the location info box for a pinned address.

    Let’s dive in!

    What You Need to Get Started

    To get started, you will need to do the following:

    1. Install Divi on your WordPress website.
    2. Add a Page, give it a title, and publish it.
    3. Enable the Visual Builder.
    4. Create your Google API Key.

    Select Build From Scratch

    Once you click the “Use Divi Builder” button the page will reload using Divi’s drag and drop builder interface. Three options will pop up – Build From Scratch, Choose A Premade Layout, and Clone Existing Page. For today’s purposes, select “Build From Scratch”. This will give us a blank slate where we can build our designs.

    Add Your Google API Key

    Before we’ll be able to fully use the map module and its functionalities, you’ll need to add your Google API Key to your Theme Options.

    1. From your WordPress dashboard, go to Divi > Theme Options and paste your Google API Key.
    2. Click “Save Changes”.

    Method 1: How to Add a Button to Your Divi Map Location’s Info Box

    Let’s get into the tutorial! Here’s how to add a button to the location info box.

    Add a Section and Row and the Map Module

    Navigate back to the page you just created and add a section and a one-column row to your page. Then load the module library and click Map. Once added, the module window will pop up with all the settings and functionalities available within the map module.

    Add  a Pin

    Click “Add New Pin” to add a pin to your map. This will bring up that pin’s settings where you can type in a title and add a description text. To add a button in the text area, add the following HTML:

    <a class="et_pb_button" href="#">Get Directions</a>

    The key here is to add the class of et_pb_button that turns a regular text link into a button. Don’t forget to replace the # sign with the URL you want this button to link to.

    Then add your pin’s location in the Map tab in the Map Pin Address field and click find.

    And there you have it! A button appears in the pin’s location info box.

    Method 2: Styling the Button with a Unique CSS Class

    There’s also another way to achieve this and it’s to add a unique CSS class to the HTML to style the button. Here is the HTML you’ll need:

    <a class="get-directions-btn" href="#">Get Directions</a>

    The unique CSS class we added was get-directions-btn. We can use this CSS class to apply unique styles to the button. You can do this by pasting on-page CSS or by using your child theme’s style sheet. In today’s example, we’re going the paste the CSS in our Page Settings.

    To achieve the button style below, copy and paste this CSS in to your Page Settings:

    .get-directions-btn {
  background-color: #1d1d1d!important;
  color: #f9f9f9;
  border-radius: 100px!important; 
  padding: 5px;}

    Final Thoughts

    Adding a button to your pin’s location box offers a clean direction button link that makes it easy for your visitors to get directions fast. You can also style the button using CSS added to your page! With that, the styling options are endless. Have fun customizing!

    The post How to Add a Button to Your Divi Map Location’s Info Box 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.