EDITS.WS

Tag: Divi modules

  • How to Add Labels Above the Fields in Divi’s Contact Form Module

    The Divi Contact Form Module makes it easy for website visitors to get in touch with you and for you to collect information from your visitors.

    By default, the Divi Contact Form Module field labels are displayed inside the input fields. However, sometimes, you might want to display the labels above the contact form fields. In this tutorial, we’ll show you how to accomplish that with a little bit of CSS.

    What We’ll Accomplish

    Our goal today is to go from this:

    To this:

    Let’s get to work!

    How to Add Labels Above the Fields in Divi’s Contact Form Module

    For this demonstration, we will use the Contact page design from the Free Whiskey Distillery Layout Pack. If you’re unfamiliar with how to load premade layout packs, check out this blog post: How to Use a Premade Layout Pack on Your Divi Website.

    There are two ways we can input custom CSS on your Divi website: via the Theme Customizer, which will affect all contact forms across your website, or per page in the page’s settings which will affect individual contact forms. First, we’ll try the per-page method, and then I’ll show you how to add the CSS globally.

    Navigate to Your Page

    First, navigate to your contact form page and enable the Visual Builder.

    Expand the Divi toolbar at the bottom of the page and click the gear icon to bring up the page’s settings. Then navigate to Advanced > Custom CSS and copy and paste the CSS code.

    This is the CSS code you’ll have to copy and paste into the Custom CSS box:

    /* Displays titles above the fields */
.et_pb_contact_form_label {
    display: block;
}

/* Hides placeholder text */
.et_pb_contact_form_container .input::placeholder {
    color: transparent;
}

/* Hides duplicate titles on checkboxes and radios */
.et_pb_contact_field_options_title {
    display: none;
}

    Here’s what we got so far. You’ll notice that our font styling doesn’t carry over, and there is now a duplicate title above the dropdown field.

    So to fix that, we’ll add some font styling CSS to the code and a few more lines of code to remove the duplicate title above the dropdown field.

    Here’s the updated final code:

    /* Displays titles above the fields */
.et_pb_contact_form_label {
    display: block;
    font-family: 'Playfair Display';
    color: #E7E2BC;
    font-size: 15pt;
    font-style: italic;
    margin-bottom: 15px;
}

/* Hides placeholder text */
.et_pb_contact_form_container .input::placeholder {
    color: transparent;
}

/* Hides duplicate titles on checkboxes and radios */
.et_pb_contact_field_options_title {
    display: none;
}


/* Remove title above dropdown */
.et_pb_contact_field[data-type=select] .et_pb_contact_form_label {
    display: none;
}

    And here is the final result!

    Doing This Globally

    Adding the code globally will affect all contact forms on your website. If you want the changes to apply to a specific contact form only, you’ll need to add a CSS ID to the module in the advanced tab. After doing so, place the “#” + your CSS ID in front of every CSS class you’re targeting in the code.

    There are three places you can add the CSS code to take effect globally. To your child theme’s style.css stylesheet:

    Or the Custom CSS block in Divi > Theme Options:

    Or to the Theme Customizer:

    And that’s it!

    More Resources

    There are so many ways you can style the contact form module to make it all your own. Check out these other tutorials on the contact form to get started!

    The post How to Add Labels Above the Fields in Divi’s Contact Form Module appeared first on Elegant Themes Blog.

  • How to Create Gradient Dividers with Divi’s Divider Module

    Divi’s Divider Module provides several methods to create interesting dividers. One of the most interesting and unique is the ability to create gradient dividers. In this post, we’ll discuss how to create gradient dividers with the Divi Divider Module. We’ll look at how the gradient dividers work and see three examples to help you create your own.

    Let’s get started!

    Preview

    Desktop Gradient Divider Example One

    Desktop Gradient Divider Example One

    Phone Gradient Divider Example One

    Phone Gradient Divider Example One

    Desktop Gradient Divider Example Two

    Desktop Gradient Divider Example Two

    Phone Gradient Divider Example Two

    Phone Gradient Divider Example Two

    Desktop Gradient Divider Example Three

    Desktop Gradient Divider Example Three

    Phone Gradient Divider Example Three

    Phone Gradient Divider Example Three

    How to Create Gradient Dividers with Divi’s Divider Module

    There are several ways to create a divider with Divi’s Divider Module. By default, the module displays a divider line. We can disable this and use the module’s Background settings to create a divider that we can style with the module’s Background options. This includes colors, gradients, images, etc. Rather than showing the divider, we’ll style the divider’s container and create a styled divider.

    Hide Divider

    The process is simple. First, add a Divider Module to your layout and then hide the divider in the content tab.

    How to Create Gradient Dividers with Divi’s Divider Module

    Divider Background

    Next, select the type of background you’d like to display in the Background settings in the Content tab. For this post, we’ll focus on the Background Gradient settings.

    How to Create Gradient Dividers with Divi’s Divider Module

    Add Sizing and Spacing

    Use the Sizing and Spacing options in the Design tab to control the height and width of the divider’s container to create a styled divider in just about any size or shape. Utilize width and height, max width and max height, module alignment, and top and bottom padding to create the size you want.

    How to Create Gradient Dividers with Divi’s Divider Module

    Add Border Radius

    Add Border options, such as Border Radius, to further style the shape. You can adjust the corners together or independently to create interesting shapes. You can also add Border Width, Styles, etc., to create a unique design.

    How to Create Gradient Dividers with Divi’s Divider Module

    Gradient Divider Examples

    Now, let’s create three gradient dividers using the concepts we just discussed.

    Gradient Divider Example One

    For our first gradient divider, we’ll use the landing page from the free Home Baker Layout Pack that’s available within Divi. The artwork in this layout pack has strong dark outlines with sharp gradients, all in shades of brown. We’ll mimic this with our gradient using colors from the layout pack.

    For our first example, we’ll use the Divider Module that is already in place in the hero section. This one is simple, but it adds a lot visually.

    For reference, here’s the layout before we add the Divider Module.

    Gradient Divider Example One

    Visibility

    In the Divider Module’s Visibility settings, select No for Show Divider.

    • Show Divider: No

    Gradient Divider Example One

    Gradient

    Scroll down to Background and select the Background Gradient tab. For this one, we’ll add five Gradient Stops. We’ll leave the rest of the gradient settings at their defaults. Here are the settings for each Gradient Stop.

    Set the first Gradient Stop to 0px and its Color to #dcc087.

    • First Gradient Stop: 0px, #dcc087

    Gradient Divider Example One

    Place the second Gradient Stop at 16px and its Color to #e6b060.

    • Second Gradient Stop: 16px, #e6b060

    Gradient Divider Example One

    Place the third Gradient Stop at 22px and its Color to #f19d33.

    • Third Gradient Stop: 22px, #f19d33

    Gradient Divider Example One

    The fourth Gradient Stop almost sits on top of the third Gradient Stop. Place it at 31px and set its Color to #f49826.

    • Fourth Gradient Stop: 31px, #f49826

    Gradient Divider Example One

    Set the last Gradient Stop at 48px and its Color to #3b261e.

    • Fifth Gradient Stop: 48px, #3b261e

    Gradient Divider Example One

    Change the Gradient Unit to Pixels. We now have the colors we’re looking for. Now, we just need to optimize the size.

    • Gradient Unit: Pixels

    Gradient Divider Example One

    Sizing

    Next, go to the Design tab. Under Sizing, set the Width to 100%. Set the Height to 40px for all three device sizes. Close the module and save your settings.

    • Width: 100%
    • Height: 40px

    Gradient Divider Example One

    Gradient Divider Example Two

    For our second gradient divider, we’ll use the landing page from the free Online Course Layout Pack that’s available within Divi. This one includes lots of rounded edges and even has a circle with a gradient that overlaps an image.

    We’ll use this as our starting point for the design and create a new gradient divider. We’ll add a new Divider Module to the Chapter 1 section just to add a graphic.

    For reference, here’s the layout before we add the Divider Module.

    Gradient Divider Example Two

    Right Column Spacing

    First, open the Column settings that contain a description of the first chapter. This is the Right Column in the Row. Go to the Design settings and scroll down to Spacing. Change the Top Padding from 100px to 50px.

    • Top Padding: 50px

    Gradient Divider Example Two

    Add a Divider Module

    Next, add a new Divider Module under the Button Module for the chapter description.

    Gradient Divider Example Two

    Visibility

    Open the Divider Module’s Visibility settings and select No for Show Divider.

    • Show Divider: No

    Gradient Divider Example Two

    Gradient

    Next, scroll down to Background and select the Background Gradient tab. This one has two Gradient Stops. Change the Gradient Direction to 145deg.

    • First Gradient Stop: 0px, #26ff5c
    • Second Gradient Stop: 100px, #2981b6
    • Gradient Direction: 145deg

    Gradient Divider Example Two

    Sizing

    Next, select the Design tab. Under Sizing, change the Width for desktops to 45%. Change tablets to 24vw and phones to 40vw. Change Module Alignment to Center. Set Height to 200px for all devices.

    • Width: 45% desktop, 24vw tablet, 40vw phone
    • Module Alignment: Center
    • Height: 200px

    Gradient Divider Example Two

    Border

    Next, scroll down to Border. We’ll create an arched shape that mimics the images in the layout. Change the Rounded Corners to 400px for the Left and Right Top and 0px for the Left and Right Bottom. Close the module and save your settings.

    • Rounded Corners top left, top right: 400px
    • Rounded Corners bottom left, bottom right: 0px

    Gradient Divider Example Two

    Gradient Divider Example Three

    For our third gradient divider, we’ll use the landing page from the free Podcaster Layout Pack that’s available within Divi. This one has lots of gradient shapes throughout the layout that are made with images and dividers.

    We’ll create a gradient divider with the design cues from those images and other elements. It will combine multiple gradients into one. Our divider will separate the featured episodes from the recent episodes.

    For reference, here’s the layout before we add the Divider Module.

    Gradient Divider Example Three

    New Row

    First, add a new Row above the title. This is where we’ll add the Divider Module.

    Gradient Divider Example Three

    Add Divider Module

    Next, add a Divider Module to the Row.

    Gradient Divider Example Three

    Visibility

    In the Visibility settings, select No for Show Divider.

    • Show Divider: No

    Gradient Divider Example Three

    Gradient

    Scroll down to Background and select the Background Gradient tab. For this one, we’ll use four Gradient Stops. Set the Direction to 90deg.

    • First Gradient Stop: 0px, #f52791
    • Second Gradient Stop: 38px, #3742fb
    • Third Gradient Stop: 70px, f7d043
    • Fourth Gradient Stop: 100px, #fe386f
    • Direction: 90deg

    Gradient Divider Example Three

    Sizing

    Next, go to the Design tab. Under Sizing, set the Height to 60px for desktops, 50px for tablets, and 40px for phones.

    • Height: 60px desktop, 50px tablet, 40px phone

    Gradient Divider Example Three

    Border

    Next, scroll down to Border. Set the Rounded Corners to 0px Top Left, 30px Top Right, 30px Bottom Left, and 0px Top Right. This creates a style that matches the email optin section. Close the module and save your settings.

    • Top Left: 0px
    • Top Right: 40px
    • Bottom Left: 40px
    • Bottom Right: 0px

    Gradient Divider Example Three

    Results

    Desktop Gradient Divider Example One

    Desktop Gradient Divider Example One

    Phone Gradient Divider Example One

    Phone Gradient Divider Example One

    Desktop Gradient Divider Example Two

    Desktop Gradient Divider Example Two

    Phone Gradient Divider Example Two

    Phone Gradient Divider Example Two

    Desktop Gradient Divider Example Three

    Desktop Gradient Divider Example Three

    Phone Gradient Divider Example Three

    Phone Gradient Divider Example Three

    Ending Thoughts

    That’s our look at how to create gradient dividers with Divi’s Divider Module. The gradient option in the Divider Module works great for creating unique gradient dividers. Utilizing the sizing, spacing, and border corner options provides us with the tools to create gradient dividers in many sizes and shapes. With just a few simple settings, we can create unique gradient dividers that are sure to stand out from the crowd.

    We want to hear from you. Do you create gradient dividers with Divi’s Divider Module? Let us know about your experience in the comments.

    The post How to Create Gradient Dividers with Divi’s Divider Module appeared first on Elegant Themes Blog.

  • An Overview of Line Styles in Divi’s Divider Module & How to Style Them

    The divider line in Divi’s Divider Module is a great way to separate elements or add some visual flair to your Divi layouts. The module is easy to use and surprisingly versatile. In this post, we’ll see an overview of the line styles in Divi’s Divider Module and see how to style them. We’ll create six examples to help spark your imagination to style your Divi Divider Module.

    Let’s get started.

    Preview

    Desktop Divider Module Line Style Example One

    Desktop Divider Module Line Style Example One

    Phone Divider Module Line Style Example One

    Phone Divider Module Line Style Example One

    Desktop Divider Module Line Example Two

    Desktop Divider Module Line Example Two

    Phone Divider Module Line Example Two

    Phone Divider Module Line Example Two

    Desktop Divider Module Line Example Three

    Desktop Divider Module Line Example Three

    Phone Divider Module Line Example Three

    Phone Divider Module Line Example Three

    Desktop Divider Module Line Example Four

    Desktop Divider Module Line Example Four

    Phone Divider Module Line Example Four

    Phone Divider Module Line Example Four

    Desktop Divider Module Line Example Five

    Desktop Divider Module Line Example Five

    Phone Divider Module Line Example Five

    Phone Divider Module Line Example Five

    Desktop Divider Module Line Example Six

    Desktop Divider Module Line Example Six

    Phone Divider Module Line Example Six

    Phone Divider Module Line Example Six

    Divider Module Features

    To give the screenshots some color and reference, I’ve added the Text Modules and a colored background from the Portfolio page of the free Photography Studio Layout Pack that’s available within Divi.

    Divi Module Content Tab

    The Divider Module’s Content tab includes the option to display the divider line or not and to give the divider a background color.

    Divi Module Content Tab

    The Background options are the standard options for other Divi modules. It includes a background color, gradient, image, video, pattern, or mask. For this example, I’ve added a pink background color to make it easy to see the space the divider uses. The divider is placed at the top of this space by default.

    Divi Module Content Tab

    Divider Module Design Tab

    The Divider Module Design tab options include Line Color which also includes the Line Style options. Other options include Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation.

    Divider Module Design Tab

    Line Color

    The Line Color setting includes the standard color picker, allowing Divi users to fully customize the color of the divider line.

    Divider Module Design Tab

    Line Style

    The Line Style setting determines the shape of the line. It has 9 options.

    Divider Module Design Tab

    Line Position

    Line Position places the line at the top, middle, or bottom of the divider’s space.

    Divider Module Design Tab

    Divider Module Line Style Options

    The Line Style options work with Sizing (Weight, Width, etc.) to create some interesting dividers. Here’s a look at each Style with a Weight of 20px so they stand out in my images.  After this, we’ll style the divider with various Color, Style, and Size combinations.

    Solid

    Solid displays the divider as a solid line.

    Divider Module Line Style Options

    Dashed

    Dashed cuts the divider line into small dashes.

    Divider Module Line Style Options

    Dotted

    Dotted displays the divider line as dots.

    Divider Module Line Style Options

    Double

    Double displays two divider lines in parallel.

    Divider Module Line Style Options

    Groove

    Groove cuts into the top of the line and makes the top a darker shade of the color we selected.

    Divider Module Line Style Options

    Ridge

    Ridge cuts into the bottom of the line and makes the bottom a darker shade of the color we selected.

    Divider Module Line Style Options

    Inset

    Inset cuts into the top and bottom of the line, making the entire line a darker shade of the color we selected.

    Divider Module Line Style Options

    Outset

    Outset doesn’t cut into the line, essentially giving the same look as Solid.

    Divider Module Line Style Options

    None

    None makes the divider line invisible, showing only its background color.

    Divider Module Line Style Options

    Divider Module Line Sizing Settings

    The Sizing options determine the divider’s weight, height, width, and alignment. Here’s a look at the main settings.

    Divider Weight

    Divider Weight specifies the thickness of the divider line.

    Divider Module Line Sizing Settings

    Width

    Width specifies the width of the divider line. It can be used in combination with Module Alignment to place the line on the left, center, or right of its area.

    Divider Module Line Sizing Settings

    Module Alignment

    Module Alignment places the line on the left, in the center, or on the right of the module’s area.

    Divider Module Line Sizing Settings

    Height

    Height determines the height of the module’s area. The line remains the same size, but the background fills in to take up the space.

    Divider Module Line Sizing Settings

    Divider Module Line Style Examples

    Now, let’s see some examples of these settings working together. For our examples, I’ve added the Divider Module to various locations within the Portfolio page and the Landing page of the free Photography Studio Layout Pack. I’ll use the colors from the layout pack and style the module to fit the area.

    Divider Module Line Style Example One

    For our first example, we’ll place a solid divider line under the page title of the portfolio page. Add the Divider Module under the Text Module.

    Change the Line Color to #ff5a17 and leave the Line Style at the default setting (Solid). Set the Divider Weight to 4px for desktops and tablets and change it to 2px for phones. Set the Width to 30% and the Module Alignment to Center.

    • Line Color: #ff5a17
    • Line Style: Solid
    • Divider Weight: 4px desktop, 2px phone
    • Width: 30%
    • Module Alignment: Center

    Divider Module Line Style Example One

    Divider Module Line Style Example Two

    We’ll place the second divider between portfolio projects under Featured Work. This requires adding a new Row for the Divider Module. The divider will be offset, just to make it look different.

    Change the Line Color to #ff5a17 and the Line Style to Ridge. Set the Divider Weight to 24px for desktops and tablets and to 20px for phones. Change the Width to 76%.

    • Line Color: #ff5a17
    • Line Style: Ridge
    • Divider Weight: 24px desktop and tablet, 20px phone
    • Width: 76%

    Divider Module Line Style Example Two

    Set the Height to 40px to add more space between the next Row.

    • Height: 40px

    Divider Module Line Style Example Two

    Divider Module Line Style Example Three

    We’ll place the third divider line next to the Call-to-Action button for a section labeled Let’s Work Together. This one changes the Row to three columns with a ½ column on the left and two ¼ columns on the right. The Divider Module is placed between the Text Modules and the Button Module. The divider line connects to the button, following design cues from other sections of this layout.

    This one uses the Solid Line Style. Change the Line Color to black and set the Divider Weight to 2px. Set the Width to 128% for desktops, 112% for tablets, and Auto for phones.

    • Line Color: #000000
    • Line Style: Solid
    • Divider Weight: 2px
    • Width: 128% desktop, 112% tablet, Auto phone

    Divider Module Line Style Example Three

    Divider Module Line Style Example Four

    The next three examples use the Photography Studio Landing Page. Our fourth example places a Divider Module under the Button Module in a CTA called Turning Moments Into Art. This one will use the module’s settings to add dots to the area to draw attention.

    Change the Line Color to #ff5a17 and choose Dotted for the Line Style. Set the Divider Weight to 30px. Change the Width to 45% for desktops, 30% for tablets, and 28% for phones.

    • Line Color: #ff5a17
    • Line Style: Dotted
    • Divider Weight: 30px
    • Width: 45% desktop, 30% tablet, 28% phone

    Divider Module Line Style Example Four

    Scroll down to Spacing and add 42px of Left Padding for phones. Leave the Padding for desktops and tablets at the default.

    • Left Padding: 42px phone

    Divider Module Line Style Example Four

    Divider Module Line Style Example Five

    Our fifth example will add a dashed line to a section called Recent Work. Add the Divider Module to the empty column in the top Row.

    Change the Line Color to black and the Line Style to Dashed. Set the Divider Weight to 24px.

    • Line Color: #000000
    • Line Style: Dashed
    • Divider Weight: 24px

    Divider Module Line Style Example Five

    Change the Height to 45px for tablets and phones. Alternatively, you can set the Height to 45px for all devices. Desktops will look the same either way.

    • Height: 45px

    Divider Module Line Style Example Five

    Divider Module Line Style Example Six

    For our last example, we’ll add a Divider Module with a double line under the description in a section called Case Study.

    Change the Line Color to white and the Line Style to Double.

    • Line Color: #ffffff
    • Line Style: Double

    Divider Module Line Style Example Six

    Set the Divider Weight to 6px. Change the Width to 48% for desktops, 22% for tablets, and 36% for phones. Change the Module Alignment to Center.

    • Divider Weight: 6px
    • Width: 48% desktop, 22% tablet, 36% phone
    • Module Alignment: Center

    Divider Module Line Style Example Six

    Results

    Desktop Divider Module Line Style Example One

    Desktop Divider Module Line Style Example One

    Phone Divider Module Line Style Example One

    Phone Divider Module Line Style Example One

    Desktop Divider Module Line Example Two

    Desktop Divider Module Line Example Two

    Phone Divider Module Line Example Two

    Phone Divider Module Line Example Two

    Desktop Divider Module Line Example Three

    Desktop Divider Module Line Example Three

    Phone Divider Module Line Example Three

    Phone Divider Module Line Example Three

    Desktop Divider Module Line Example Four

    Desktop Divider Module Line Example Four

    Phone Divider Module Line Example Four

    Phone Divider Module Line Example Four

    Desktop Divider Module Line Example Five

    Desktop Divider Module Line Example Five

    Phone Divider Module Line Example Five

    Phone Divider Module Line Example Five

    Desktop Divider Module Line Example Six

    Desktop Divider Module Line Example Six

    Phone Divider Module Line Example Six

    Phone Divider Module Line Example Six

    Ending Thoughts

    That’s our overview of line styles in Divi’s Divider Module and how to style them. The various line styles and options provide lots of design possibilities. With just a few settings, Divi users can create small or large dividing lines, add shapes, and lots more. Divi’s Divider Module is a great way to add some visual flair to any Divi website.

    We want to hear from you. Do you style the divider line in your Divi Divider Module? Let us know in the comments.

    The post An Overview of Line Styles in Divi’s Divider Module & How to Style Them appeared first on Elegant Themes Blog.

  • How to Expand Your Map Module on Scroll with Divi’s Scroll Effects

    Adding a map to your website is a great way to show your visitors where you or your business is located. With Divi‘s built-in settings, you have full creative control over the design of your map module and any surrounding design elements. Take your designs to another level by applying scroll effects to your module. With several different types of effects to choose from and settings to fine-tune the effect until you achieve exactly what you want, using scroll effects can help you add eye-catching movement to your website modules. In this post, we will show you how to enlarge your map module on scroll with Divi’s scroll effects.

    Let’s get started!

    Sneak Peek

    Here is a preview of what we will design.

    Layout 1

    Divi Enlarge Map On Scroll With Scroll Effects Layout 1 Final Design Mobile

    Layout 2

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 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!

    How to Enlarge Your Map Module on Scroll with Divi’s Scroll Effects

    Layout 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 Acai Bowl Landing Page from the Acai Bowl Layout Pack.

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

    Divi Enlarge Map On Scroll With Scroll Effects Use Builder

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

    Divi Enlarge Map On Scroll With Scroll Effects Find Layout

    Search for and select the Acai Bowl Landing Page.

    Divi Enlarge Map On Scroll With Scroll Effects Select Layout

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

    Divi Enlarge Map On Scroll With Scroll Effects Use Layout

    Now we are ready to build our design.

    Add the Map Module

    We are going to add the map module to the “Come Visit Us” section on the landing page. Start by adding a new row with a single column.

    Divi Enlarge Map On Scroll With Scroll Effects Row

    Add the map module to the new row.

    Divi Enlarge Map On Scroll With Scroll Effects Add Map

    Add your Google API Key to enable the map if you haven’t already. Then, add a center address to the map. For this tutorial, the address will be San Fransisco, California.

    Divi Enlarge Map On Scroll With Scroll Effects Map API Address

    Next, add a new pin.

    Divi Enlarge Map On Scroll With Scroll Effects Add Pin

    Set the map pin address. Once again, we will set this to San Fransisco, California for this tutorial.

    Divi Enlarge Map On Scroll With Scroll Effects Address

    Design Settings

    Move to the Design tab and open the sizing settings. Set the Height.

    • Height: 300px

    Divi Enlarge Map On Scroll With Scroll Effects Height

    Next, open the border settings and add rounded corners to the map.

    • Rounded Corners: 22px

    Divi Enlarge Map On Scroll With Scroll Effects Rounded Corners

    Add the Scroll Effects

    Now the design of our map module is complete so that we can add the scroll effects. Move to the Advanced tab, then navigate to the Scroll Effects. Under Scroll Transform Effects, select the scaling up and down tab.

    Divi Enlarge Map On Scroll With Scroll Effects Scroll Effects

    Enable Scaling Up and Down. This will allow our map module to increase in size as you scroll down the page.

    Divi Enlarge Map On Scroll With Scroll Effects Enable Scaling

    Let’s fine-tune the scaling settings. Adjust the starting, mid, and ending scale. You can achieve a more subtle scale effect by keeping the numbers relatively close together. If there is a big difference between the numbers, you will achieve a more drastic scale effect.

    • Starting Scale: 80%
    • Mid Scale: 90%
    • Ending Scale: 100%

    Divi Enlarge Map On Scroll With Scroll Effects Scaling

    Finally, set the motion effect to trigger in the middle of the element.

    • Motion Effect Trigger: Middle of Element

    Divi Enlarge Map On Scroll With Scroll Effects Effect Trigger

    Final Design

    Here is the final design for our first layout.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 1 Final Design Mobile

    Layout 2

    Create a New Page with a Premade Layout

    For the second layout, we will use the contact page layout from the same Acai Bowl Layout Pack. Let’s get started.

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

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Use Builder

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

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Use Builder

    Search for and select the Acai Bowl Contact Page.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Find Layout

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

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Use Layout

    Now we are ready to build our design.

    Modify Row Settings

    First, move the row containing the map module to the section above, below the addresses.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Move Map

    Then, modify the row layout to two columns.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Row

    Open the row settings, then open the column 1 settings.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Column Settings

    Add a background color.

    • Background: #442854

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Background

    Finally, navigate to the design tab and open the border settings. Add rounded corners to the bottom left and right corners.

    • Rounded Corners – bottom left: 300px
    • Rounded Corners – bottom right: 300px

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Rounded Corners

    Modify Section Settings

    Open the section settings for the section containing the map module. Navigate to the background settings, then add a background mask.

    • Background Mask: Corner Blob
    • Mask Color: #FFFFFF
    • Mask Transform: Vertical and Invert

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Background Mask

    Add Image

    First, add an image module to the column next to the map module.
    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Image

    Then, add the transparent image of the acai bowl to the module. You should have this in your media library labeled as acai-bowl-34.png if you used the Acai Bowl landing page layout for Layout 1.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Add Image

    We want the image of the acai bowl to rotate as you scroll down the page. Move over to the Advanced tab, then open the Scroll Effects section. Select the Rotating tab and enable rotating.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Rotating

    Next, set the rotation.

    • Starting Rotation: 180
    • Mid Rotation: 90
    • Ending Rotation: 0

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Set Rotating

    Map Design

    Now move over to the map module settings. Under the design tab, open the map settings. Enable the grayscale filter.

    • Use Greyscale Filter: Yes
    • Greyscale Filter Amount (%): 100

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Greyscale

    Next, modify the height under the Sizing tab.

    • Height: 600px

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Height

    Under the Spacing settings, add some margins.

    • Margin-Top: 5px
    • Margin-Bottom: 5px
    • Margin–Left: 5px
    • Margin-Right: 5px

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Margin

    Then add rounded corners to the bottom left and right corners.

    • Rounded Corners – Bottom Left: 300px
    • Rounded Corners – Bottom Right: 300px

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Border Rounded Corners
    Add Scroll Effects

    Now we can finally add the scroll effects to the map so that it enlarges on scroll. Open the Scroll Effects section under the Advanced tab. Then, select the scaling up and down tab and enable scaling up and down.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Scroll Effects

    Finally, customize the scales.

    • Starting Scale: 90%
    • Mid Scale: 95%
    • Ending Scale: 100%

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Scaling

    Final Design

    Here is the final design for layout 2.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Final Design Mobile

    Final Result

    Now let’s take a look at both of our layouts in action.

    Layout 1

    Divi Enlarge Map On Scroll With Scroll Effects Layout 1 Final Design Mobile

    Layout 2

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Final Design Mobile

    Final Thoughts

    By applying Divi’s scroll effects to the map module, you can achieve a unique effect as you scroll down the page and help your map stand out to website visitors. These effects can be applied to any other module on your website as well, so there is no limit to what you can achieve with some creativity! If you are interested in more tutorials related to the map module, check out this article for how to add a fixed map toggle to your Divi page template. And if you want some more design ideas using scroll effects, check out this tutorial for how to add scroll-animated icons to your section backgrounds. How have you applied Divi’s scroll effects to your website? Let us know in the comments!

    The post How to Expand Your Map Module on Scroll with Divi’s Scroll Effects appeared first on Elegant Themes Blog.

  • Using the Divi Fullwidth Map vs Map Module

    Adding a map to your website can make it easy for your website visitors to see where your business is located or to see where an event might be taking place. Divi comes with two built-in options to embed Google Maps to your page design: the fullwidth map module and the regular map module. With the fullwidth map module, you can add a big, eye-catching map that spans the width of your page. You can customize the look of the fullwidth map module using the fullwidth module settings, and it can be a great design element to add to your layout. You can add Divi’s regular map module to any regular section. The design options are endless as you can combine module, row, and section options to create unique layouts for your website.

    In this tutorial, we will show you how to create two different layouts using the fullwidth map module and the regular map module.

    Let’s get started!

    Sneak Peek

    Here is a preview of what we will design.

    Layout 1 – Fullwidth Map Module

    Divi Fullwidth Map VS Map Module Fullwidth Final Design

     

    Divi Fullwidth Map VS Map Module Fullwidth Final Design Mobile

    Layout 2 – Regular Map Module

    Divi Fullwidth Map VS Map Module Regular Final Design

    Divi Fullwidth Map VS Map Module Regular 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!

    Using the Divi Fullwidth Map vs Map Module

    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 Conference About Page from the Conference layout pack.

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

    Divi Fullwidth Map VS Map Module Use Builder

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

    Divi Fullwidth Map VS Map Module Browse Layouts

    Search for and select the Conference About Page layout.

    Divi Fullwidth Map VS Map Module Search

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

    Divi Fullwidth Map VS Map Module Use Layout

    Now we are ready to build our design.

    Layout 1 – Fullwidth Map Module

    For our first layout, we will add the fullwidth map module to the footer, right above the black footer section with all of the links. Instead of adding this element to the page, we will use the theme builder in Divi’s settings to create a footer section for this page, then add the map. Let’s get started.

    First, right-click on the footer section or click the three dots in the section toolbar, then copy the section.

    Divi Fullwidth Map VS Map Module Copy Footer Section

    Then, delete the section from this page.

    Design the Footer Layout with the Theme Builder

    From the WordPress dashboard, navigate to the theme builder section within Divi’s settings. Click Add a New Template.

    Divi Fullwidth Map VS Map Module Add New Template

    For this design, I am only enabling the template for the page with our Conference About Page template.

    Divi Fullwidth Map VS Map Module Template Settings

    Next, click Add Custom Footer and select Build Custom Footer.

    Divi Fullwidth Map VS Map Module Build Custom Footer

    Now that your custom footer settings are open in the theme builder, paste the footer section you copied from the original layout.

    Divi Fullwidth Map VS Map Module Paste Section

    Add a new fullwidth section above the footer layout you pasted.

    Divi Fullwidth Map VS Map Module Insert Fullwidth

    Then, add the fullwidth map module.

    Divi Fullwidth Map VS Map Module Fullwidth Menu Module

    Fullwidth Map Module Settings

    Open the map module settings. If you haven’t already, add your Google API Key so that the map can be displayed. (Learn more about the Google Maps API Key requirement here.)

    Divi Fullwidth Map VS Map Module Google API Key

    We need to add a Map Center Address under the Map settings on the Content tab so that our map is positioned to display a specific location. We will center our map on San Fransisco, California for this layout.

    Divi Fullwidth Map VS Map Module Map Center Address

    We also want to add a pin to the map. Under the Content tab, click Add New Pin.

    Divi Fullwidth Map VS Map Module Add New Pin

    Enter the pin address.

    Divi Fullwidth Map VS Map Module Map Pin Address

    Finally, delete the empty section from the footer layout.

    Divi Fullwidth Map VS Map Module Delete Section

    Fullwidth Map Module Final Design

    Here is the final design with the fullwidth map module.

    Divi Fullwidth Map VS Map Module Fullwidth Final Design

    Divi Fullwidth Map VS Map Module Fullwidth Final Design Mobile

     

    Layout 2 – Regular Map Module

    For our second layout, we will be using the regular map module. Similar to the last design, we will incorporate it into the footer design using the theme builder settings. For this design, we will add a map to the “Where to Stay” section.

    Design the Footer Layout with the Theme Builder

    We’ll follow the same steps as the fullwidth map module layout to create a custom footer design in the theme builder. In a new tab, open the WordPress Dashboard and navigate to the theme builder section within Divi’s settings. You should have the original layout design open in another tab.

    Click Add a New Template.

    Divi Fullwidth Map VS Map Module Add New Template

    Once again, I am only enabling the template for the page with our Conference About Page template.

    Divi Fullwidth Map VS Map Module Template Settings

    Next, click Add Custom Footer and select Build Custom Footer.

    Divi Fullwidth Map VS Map Module Build Custom Footer

    Now that your custom footer settings are open in the theme builder, go back to the tab with the original layout and copy the “Where to Stay” section.

    Divi Fullwidth Map VS Map Module Copy Section

    Paste the “Where to Stay” section in the custom footer layout.

    Divi Fullwidth Map VS Map Module Paste Section

    Go back to the original layout and copy the footer section.

    Divi Fullwidth Map VS Map Module Copy Footer

    Then, paste the footer section below the “Where to Stay” section in the custom footer layout.

    Divi Fullwidth Map VS Map Module Regular Paste Footer

    Delete the “Where to Stay” section and the footer section from the original layout.

    Finally, delete the empty section from the custom footer layout.

    Divi Fullwidth Map VS Map Module Regular Delete Section

    Fullwidth Map Module Settings

    Add a map module below the “Where to Stay” body text.

    Divi Fullwidth Map VS Map Module Regular Map Module

    Then, open the map module settings. Once again, ensure you have added your Google API Key to the Map settings so the map can be displayed.

    Add a Map Center Address so that the map is positioned to a location. For this example, we will set it to San Fransisco, California.

    Divi Fullwidth Map VS Map Module Regular API Map Address

    Next, add a pin to the map.

    Divi Fullwidth Map VS Map Module Regular Add Pin

    Enter the pin address.

    Divi Fullwidth Map VS Map Module Regular Map Pin Address

    Regular Map Module Final Design

    Here is the final design with the regular map module.

    Divi Fullwidth Map VS Map Module Regular Final Design

    Divi Fullwidth Map VS Map Module Regular Final Design Mobile

    Final Result

    Now let’s take another look at our final designs together.

    Layout 1 – Fullwidth Map Module

    Divi Fullwidth Map VS Map Module Fullwidth Final Design

     

    Divi Fullwidth Map VS Map Module Fullwidth Final Design Mobile

    Layout 2 – Regular Map Module

    Divi Fullwidth Map VS Map Module Regular Final Design

     

    Divi Fullwidth Map VS Map Module Regular Final Design Mobile

    Final Thoughts

    The fullwidth map module and the regular map module are an easy way to add an eye-catching design element to your page, not to mention it provides valuable information to your website visitors. You can easily customize these sections using the various module, row, and section settings, and they can be combined with other design elements on the page to create dynamic layouts for your website. If you want to learn more about what the map modules can do, check out this tutorial to add a fixed map toggle to a page template.

    Do you use a fullwidth menu module or a regular menu module on your website? Or both? We’d love to hear from you in the comments!

    The post Using the Divi Fullwidth Map vs Map Module appeared first on Elegant Themes Blog.

  • How to Create a Message Pattern in Your Divi Contact Form Module

    Email Message Patterns are an excellent way to view messages sent through your Divi Contact Forms. You have full control over the layout design and content, so you get the exact information you want in the way you want it. In this post, we’ll see how to create a Message Pattern in your Divi Contact Form Module and explain how to use it.

    What is a Message Pattern?

    The Message Pattern is a template for the email message. It specifies how the message looks and what information it includes when you receive it in email. It can include text that you specify and the content of any of the fields in the form. The Message Pattern is not required, but it is helpful. Simply leave it blank for the default pattern.

    Why Use a Message Pattern?

    Utilizing a message pattern is a great way to streamline your workflow. You’ll have the exact information you want in the layout you want.

    Where to Find the Email Message Pattern

    To find the email Message Pattern field, open the Contact form Module by clicking the dark gray gear icon that appears on hover. For this example, I’m using the Contact page from the free Home Baker Layout Pack that’s available within Divi.

    Where to Find the Email Message Pattern

    Next, scroll down to the section labeled Email. Here, you’ll find two fields. The first is Email Address. This is the address of the message that will be sent. The second field is called Message Pattern. Enter your pattern into this field.

    Where to Find the Email Message Pattern

    When a message is sent to the email address that you’ve imputed into the Email Address field, it normally includes only the content in the Message field. For example, I’ll send this message:

    Where to Find the Email Message Pattern

    The result is an email with who it’s from, as normal, but the body of the content only shows the message itself.

    Where to Find the Email Message Pattern

    How to Create a Message Pattern

    We can adjust the content of the email by creating a Message Pattern. You can add text and specify the fields you want to include. To include a field, add two percent symbols to both sides of the field’s ID. For example, to include the field with the ID-name, use %%name%%. We’ll see how to find the Field ID in the next section.

    You can create a template with text, spaces, and the form content. Add your text around the field names and include spaces for the fields. For example, I am %%name%% and my message is %%message%%.

    When I add this Message Pattern to the example from above, we get a different email. This pattern includes text, field IDs, and extra spaces.

    Here is the message from %%name%%, email %%email%%.

    Message: %%message%%

    How to Create a Message Pattern

    The result is an email with more information and a layout that makes more sense. It’s the same information that was submitted in the form in the section above, but now it shows more of the information and places it in a layout that’s easy to read, which is the layout I created with the Message Pattern.

    How to Create a Message Pattern

    How to Add New Fields

    Each field in the Contact Form Module is a submodule with its own settings. To create a new field, go to the Contact Form Module’s content tab and click Add New Field under all the form’s submodules.

    How to Add New Fields

    Text

    Under Text, enter the Field ID and the Title. The Field ID is the label you’ll use to create the Message Pattern. This is a unique ID and should only use English characters with no special characters or spaces. The Title field can be used to define the content. It doesn’t have to be a unique title or match the Field ID, but it is best if it’s unique to make it easier to understand.

    How to Add New Fields

    Next, scroll down to options and select the Field Type. Choose any settings you want for the field. Click the green check at the bottom or return arrow at the top to return to the regular Contact Form Module settings.

    How to Add New Fields

    Finally, add the new field to the Message Pattern with any text you want to include. Close the module and save your settings.

    How to Add New Fields

    How to Test the Message Pattern

    Finally, test your Message Pattern to ensure it works how you want. Simply fill out the form yourself and go to the email address you used for the email field to view the Message Pattern.

    How to Test the Message Pattern

    You’ll receive the message in your email inbox so you can know if you like the design or not.

    How to Test the Message Pattern

    Creating a Well-Designed Message Pattern

    The Message Pattern should be constructed in a way that you get the most out of it. This is for your use, so design it the way you need to see it.

    Be sure to use whitespace to make the email easier to read and use. The Message Pattern includes all spaces that you add to the pattern. You can use spaces to create the exact layout you want.

    Restaurant Reservation Message Pattern Example

    Let’s see an example of a Message Pattern for a restaurant reservation. For this example, I’m using the landing page from the free Poke Restaurant Layout Pack that’s available within Divi. I’ll replace the reservation button with a new Contact Form Module. We’ll keep the form simple for this example.

    Here’s how the layout looks before adding the Contact Form Module.

    Restaurant Reservation Message Pattern Example

    Change the Title Text

    First, edit the Title Text to show “Make a Reservation.” Highlight the portion of text you don’t want and click the Delete key.

    Restaurant Reservation Message Pattern Example

    Delete Row

    Next, delete the Row with the buttons. We’ll use the style of the left button, but we don’t need these buttons.

    Restaurant Reservation Message Pattern Example

    Add a Contact Form Module

    Next, add a Contact Form Module under the phone number Text Module.

    Restaurant Reservation Message Pattern Example

    Add New Fields

    Now, remove the Message Field and add a new Field by clicking Add New Field.

    Restaurant Reservation Message Pattern Example

    Change the Field ID to Phone, the Title to Phone Number, and use Input Field as the Type. For Allowed Symbols, select Numbers Only. Close the submodule.

    • Field ID: Phone
    • Title: Phone Number
    • Type: Input Field
    • Allowed Symbols: Numbers Only

    Restaurant Reservation Message Pattern Example

    Add another Field, change the Field ID to Guests, the Title to Number of Guests, and use Input Field as the Type. For Allowed Symbols, select Numbers Only. Close the submodule.

    • Field ID: Guests
    • Title: Number of Guests
    • Type: Input Field
    • Allowed Symbols: Numbers Only

    Restaurant Reservation Message Pattern Example

    Add another Field and change the Field ID to Day, the Title to Day of Visit, and use Select Dropdown as the Type. Enter the name of each day for the options. Close the submodule.

    • Field ID: Day
    • Title: Day of Visit
    • Type: Select Dropdown
    • Options: add days

    Restaurant Reservation Message Pattern Example

    Add another Field and change the Field ID to Time and the Title to Time of Visit. Select Radio Buttons for the Type. For the Options, add the possible times. Close the submodule.

    • Field ID: Time
    • Title: Time of Visit
    • Type: Radio Buttons
    • Options: possible times

    Restaurant Reservation Message Pattern Example

    Text

    Now, we’ll adjust the form. Under Text in the Content tab, change the Submit Button text to Book a Table.

    • Submit Button: Book a Table

    Restaurant Reservation Message Pattern Example

    Email

    Next, scroll down to Email and enter the address where you want to receive the email in the Email Address field. Also, create the Message Pattern. I’ll create a pattern that provides the name first, skip a line, and then show the day, time, and number of guests. After this, it will skip a line, show a heading for the contact information and then list the information.

    The Message Pattern looks like this (complete with spaces):

    Reservation for %%name%%

     

    Day: %%day%%

    Time: %%time%%

    Number of Guests: %%guests%%

     

    Contact Information

    %%email%%

    %%phone%%

    Restaurant Reservation Message Pattern Example

    Spam Protection

    Scroll down to Spam Protection and disable it.

    • Use Basic Captcha: No

    Restaurant Reservation Message Pattern Example

    Fields

    Now, let’s style the module. First, go to Fields in the Design tab. Change the Background color to rgba(255,255,255,0) and the Text Color to black.

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

    Restaurant Reservation Message Pattern Example

    For the Fields Padding, add 13px for the Top and Bottom and 30px to the Left and Right. Change the Font to Darker Grotesque and set the Weight to Medium.

    • Fields Padding: 13px Top and Bottom, 30px Left and Right
    • Font: Darker Grotesque
    • Weight: Medium

    Restaurant Reservation Message Pattern Example

    Change the Size to 24px for desktops, 18px for tablets, and 14px for phones. Set the Line Height to 1.4em.

    • Size: 24px desktop, 18px tablet, 14px phone
    • Line Height: 1.4em

    Restaurant Reservation Message Pattern Example

    Button

    Next, scroll down to Button and select Enable Custom Styles for Button. Change the Text Size to 17px, the Text Color to black, and the Background to #f6c85d.

    • Enable Custom Styles for Button
    • Text Size: 17px
    • Text Color: #000000
    • Background: #f6c85d

    Restaurant Reservation Message Pattern Example

    Set the Border Color to #f6c85d and the Button Letter Spacing to 0.16em. Change the Font to Darker Grotesque, the Weight to Ultra Bold, and the Style to TT.

    • Border Color: #f6c85d
    • Button Letter Spacing: 0.16em
    • Font: Darker Grotesque
    • Weight: Ultra Bold
    • Style: TT

    Restaurant Reservation Message Pattern Example

    Change the Button Padding to 12px for the Top and Bottom and 20px for the Left and Right.

    • Button Padding: 12px Top and Bottom, 20px Left and Right

    Restaurant Reservation Message Pattern Example

    Sizing

    Next, scroll down to Sizing, change the Width to 60%, and set the Module Alignment to Center.

    • Width: 60%
    • Module Alignment: Center

    Restaurant Reservation Message Pattern Example

    Border

    Finally, scroll down to Border. Add 5px to the Rounded Corners, 2px to the Border Width, and make the Border black. Close the module, save your settings, and test your form.

    • Inputs Rounded Corners: 5px
    • Border Width: 2px
    • Color: #000000

    Restaurant Reservation Message Pattern Example

    Message Pattern Results

    Here’s how our message looks in the form and in the email that I received.

    Message in the Form

    Message in the Form

    Message in the Email

    Message in the Email

    Ending Thoughts

    That’s our look at how to create a message pattern in your Divi Contact Form Module. Creating Message Patterns is easy to do with Divi’s Contact Form Module, and they’re great for organizing the information within the emails themselves. Following a few simple steps is all you need to create your own email Message Patterns.

    We want to hear from you. Have you created a message pattern in your Divi Contact Form Module? Let us know about your experience in the comments.

    The post How to Create a Message Pattern in Your Divi Contact Form Module appeared first on Elegant Themes Blog.

  • How to Add Multiple Pins to Your Divi Map

    The Divi Map Module makes it easy to embed a Google Map to your Divi website. This is a great way to share your business location on a contact page, in a footer, or on an about page.

    In this post, we’re going to demonstrate how to add multiple location pins to your Divi map. This is a great feature if your business has multiple locations or you’re putting together a local guide to show off your favorite coffee shops, etc.

    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.

    How to Add Multiple Pins to Your Divi Map

    Let’s get into the tutorial! Here’s how to add multiple location pins to your Divi Map.

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

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

    To add a new location pin, click “Add A New Pin”. This will bring up the settings for that new pin. In the Text tab, type in the title and a description text you want to be displayed here. In the Map tab, paste the address for the pin in the Map Pin Address input field and then click find.

    Choosing a Map Center Address

    Choosing a map center address determines how your map is oriented. This is helpful when you want to show multiple pins at once. Below, we have the map center address as San Diego, CA 92104, USA so that it shows all of our pins within that area.

    Divi multiple Google map pins

    Final Thoughts

    And there you have it! You can add as many pins to your map as you’d like. Adding pins to the map module is simple and easy and results in an interactive Google Map that is easy to use for your website visitors.

    The post How to Add Multiple Pins to Your Divi Map appeared first on Elegant Themes Blog.

  • How to Include a Contact Form in Your Divi Footer

    Divi’s footer is a great place to add a contact form. Fortunately, this is easy to do with the Divi Theme Builder. Of course, we don’t want to just add it anywhere as there are a few things to keep in mind for usability. In this post, we’ll see how to include a contact form in your Divi footer. We’ll go through a couple of examples to help you get started.

    Let’s get started!

    Preview

    Desktop Divi Footer Contact Form Example One

    Desktop Divi Footer Contact Form Example One

    Phone Divi Footer Contact Form Example One

    Phone Divi Footer Contact Form Example One

    Desktop Divi Footer Contact Form Example Two

    Desktop Divi Footer Contact Form Example Two

    Phone Divi Footer Contact Form Example Two

    Phone Divi Footer Contact Form Example Two

    About the Contact Form in Your Divi Footer

    Why Include a Contact Form in Your Divi Footer?

    The footer is a location where visitors will look for specific information. This includes ways to contact you. Adding a contact form to the footer not only makes that contact information visual but also simplifies the process.

    Where to Add the Contact Form

    When choosing a location for the contact form, look at the other footer elements to see what would clash for attention.

    It’s best to place the contact form near other contact information, but you don’t want it fighting the email form. Placing two forms next to each other can confuse your visitors. Place the contact form in a different Row or Section from the email form. Add enough whitespace around the contact form so that it stands apart from the rest of the content.

    The example below is from the free Header and Footer Template for Divi’s Stone Factory Layout Pack. This is a great example of how to use a contact form in the footer. This layout includes a contact form and an email form. The contact form is placed with the contact information in a different Row from the links and email form. It’s also a different color than the email form and it’s labeled well, so visitors will know at a glance which form is which.

    Where to Add the Contact Form

    How to Include a Contact Form in Your Divi Footer

    The best way to add a contact form to your Divi footer is by building the footer in the Divi Theme Builder. A contact form can also be added to any existing footer. The process of adding the form is the same.

    Import Your Divi Footer Layout

    In the WordPress dashboard, go to Divi > Theme Builder. Select Add Global Footer if you don’t have a global footer, select Add New Template, or choose the footer template you want to add the contact form to. We’ll import a new footer. For this example, we’ll add a contact form to the Header & Footer for Divi’s Financial Services Layout Pack.

    Select the Portability icon in the upper right corner of the Theme Builder. Navigate to your header and footer template on your computer, select it, and click Import Divi Theme Builder Templates. Save your changes.

    Import Your Divi Footer Layout

    Next, select the Edit icon for the footer template. This will open the footer template in the builder where we’ll make our changes.

    Import Your Divi Footer Layout

    How to Add the Divi Footer Contact Form

    Next, we’ll add the contact form to the footer layout. First, we’ll need to make some adjustments to the layout’s design. We see the layout has two Sections. The top Section has a title to identify that it’s the contact information. This Section includes three types of contact information lined up horizontally.

    We’ll stack the contact information on the right, above the email subscription form. Then, we’ll place a Divi Contact Form Module on the left. This increases the size of this Section and balances the footer with a form on each side.

    How to Add the Divi Footer Contact Form

    Move the Contact Information

    First, drag and drop the Text Modules to the right column. Stack them to show Email on top, Office in the middle, and Phone on the bottom.

    Move the Contact Information

    Adjust the Row

    Next, adjust the Row to show two columns instead of three.

    Adjust the Row

    Add the Contact Form

    Finally, add a Contact Form Module to the left Column.

    Add the Contact Form

    We now have a contact form added to our Divi layout. The contact form balances well with the email form on the other side of the layout. Of course, it works but it won’t fit well with the layout’s design until we style it.

    Add the Contact Form

    How to Style the Divi Footer Contact Form

    Now, let’s see how to style the Divi Contact Form Module to match the layout. We’ll look at two examples, including the one we’ve already started. We’ll use design cues from the layout itself.

    Divi Footer Contact Form Example One

    For this one, we’ll style the form we added in the previous section.

    Text

    Open the Contact Form Module’s settings. Enter the text for the Title and Submit Button.

    • Title: Contact Us Today
    • Submit Button: Get in touch

    Divi Footer Contact Form Example One

    Fields

    Next, go to the Design tab. Change the Fields Background Color to #ffba52 and change the Fields Text Color to #0f1154. Leave the focus colors at their default settings. This allows them to use the same colors as the regular fields.

    • Background Color: #ffba52
    • Text Color: #0f1154

    Divi Footer Contact Form Example One

    Next, change the Fields Font to Montserrat. Set the Weight to Bold and the Size to 16px.

    • Font: Montserrat
    • Weight: Bold
    • Size: 16px

    Divi Footer Contact Form Example One

    Title Text

    Next, scroll down to Title Text. Choose H3 for the Heading Level. The title of this section uses H2, so selecting H3 will build the proper page structure. Select Montserrat for the Font. Select Bold for the Weight and change the Color to #1d4eff.

    • Heading Level: H3
    • Font: Montserrat
    • Weight: Bold
    • Color: #1d4eff

    Divi Footer Contact Form Example One

    Captcha Text

    Next, scroll down to Captcha Text. We’ll make changes to the Captcha Text in this setting, but we’ll also add some CSS to change the field color. Change the Font to Roboto, the Weight to Medium, and the Color to #1d4eff. We’ll add the CSS at the end.

    • Font: Roboto
    • Weight: Medium
    • Color: #1d4eff

    Divi Footer Contact Form Example One

    Button

    Next, scroll down to Button and enable Use Custom Styles for Button. Change the Font Size to 16px, the Font Color to white, and the Background Color to #1d4eff.

    • Use Custom Styles for Button: Yes
    • Size: 16px
    • Text Color: #ffffff
    • Background Color: #1d4eff

    Divi Footer Contact Form Example One

    Set the Border Width and Border Radius to 0px for both. Change the Font to Roboto and the Weight to Medium.

    • Border Radius: 0px
    • Border Width: 0px
    • Font: Roboto
    • Weight: Medium

    Divi Footer Contact Form Example One

    Next, scroll down to Button Padding. Enter 14px for the Top and Bottom Padding and 24px for the Left and Right Padding.

    • Padding: 14px Top and Bottom, 24px Left and Right

    Divi Footer Contact Form Example One

    Captcha Background

    Finally, go to the Advanced tab and scroll down to the Captcha Field. Enter the CSS below into the field. This gives the background a different color from the rest of the form, so users will know it’s different. Now, close the module and save your settings.

    • Captcha Field CSS: 
      background-color:rgba(255,186,82,0.2)

    Divi Footer Contact Form Example One

    Divi Footer Contact Form Example Two

    Let’s look at another example. For this one, I’m using the global footer from the free Header & Footer for Divi’s Podcaster Layout Pack. We’ll replace the contact email with a contact form.

    Divi Footer Contact Form Example Two

    Delete Email Text Module

    First, delete the Contact Us and email Text Modules. We’ll replace the title with the one from the Contact Form Module.

    Divi Footer Contact Form Example Two

    Change Row Column Width

    Next, change the column layout to display two equal columns. This gives us more room for the contact form.

    Divi Footer Contact Form Example Two

    Adjust Column

    Next, we’ll change the Background of the column for the contact form. This gives us more control over the form’s design. Open the settings for the right column.

    Divi Footer Contact Form Example Two

    Scroll down to Background and select the Background Gradient tab. Set the first Gradient Stop’s Color to #f52791 and leave it at its position of 0%. Set the second Gradient Stop’s Color to #3742fb and leave its position at 100%. Change the Direction to 120deg.

    • First Gradient Stop: #f52791, 0%
    • Second Gradient Stop: #3742fb, 100%
    • Direction: 120deg

    Divi Footer Contact Form Example Two

    Next, go to the Design tab. Change the Top and Bottom Padding to 40px and the Left and Right Padding to 30px.

    • Padding: 40px Top and Bottom, 30px Left and Right.

    Divi Footer Contact Form Example Two

    Next, scroll down to Border and adjust the Rounded Corners. Set the Top Left to 0px, the top Right to 15px, the bottom Left to 15px, and the bottom right to 0px. Close the Column and Row settings.

    Rounded Corners:

    • Top Left: 0px
    • Top Right: 15px
    • Bottom Left: 15px
    • Bottom Right: 0px

    Divi Footer Contact Form Example Two

    Add a Contact Form Module

    Next, add a Contact Form Module in place of the Text Modules.

    Divi Footer Contact Form Example Two

    Contact form Content

    Add the Title content.

    • Title: Contact Us

    Divi Footer Contact Form Example Two

    Spam Protection

    Scroll down to Spam Protection and disable it.

    • Use Basic Captcha: No

    Divi Footer Contact Form Example Two

    Fields

    Go to the Design tab. Change the Fields Background Color to rgba(255,255,255,0.12) and change the Text Color to white.

    • Fields Background Color: rgba(255,255,255,0.12)
    • Fields Text Color: #ffffff

    Divi Footer Contact Form Example Two

    Change the Fields Font to Sarabun. Set the Weight to Bold, the Style to TT, and the Letter Spacing to 2px.

    • Fields Font: Sarabun
    • Weight: Bold
    • Style: TT
    • Letter Spacing: 2px

    Divi Footer Contact Form Example Two

    Title Text

    Next, scroll down to Title Text. Change the Title Font to Sarabun, the Weight to Bold, the Style to TT, and the Color to white.

    • Heading Level: H3
    • Fields Font: Sarabun
    • Weight: Bold
    • Style: TT
    • Color: #ffffff

    Divi Footer Contact Form Example Two

    Button

    Next, scroll down to Button and enable Use Custom Styles for Button. Change the Font Size to 14px, the Font Color to white, and the Background Color to black.

    • Use Custom Styles for Button: Yes
    • Size: 14px
    • Text Color: #ffffff
    • Background Color: #000000

    Divi Footer Contact Form Example Two

    Change the Border Width to 0px and Border Radius to 50px. Set the Letter Spacing to 2px, the Font to Sarabun, the Weight to Bold, and the Style to TT.

    • Border Width: 0px
    • Border Radius: 50px
    • Letter Spacing: 2px
    • Font: Sarabun
    • Weight: Bold
    • Style: TT

    Divi Footer Contact Form Example Two

    Next, scroll down to Button Padding. Enter 15px for the Top and Bottom Padding and 45px for the Left and Right Padding. Close the module and save your settings.

    • Padding: 15px Top and Bottom, 45px Left and Right

    Divi Footer Contact Form Example Two

    Results

    Desktop Divi Footer Contact Form Example One

    Desktop Divi Footer Contact Form Example One

    Phone Divi Footer Contact Form Example One

    Phone Divi Footer Contact Form Example One

    Desktop Divi Footer Contact Form Example Two

    Desktop Divi Footer Contact Form Example Two

    Phone Divi Footer Contact Form Example Two

    Phone Divi Footer Contact Form Example Two

    Ending Thoughts

    That’s our look at how to include a contact form in your Divi footer. The Divi Contact Form Module is simple to add to any Divi footer layout and it’s easy to style to match any Divi layout. Following a few design principles will ensure you get the most out of the footer’s space.

    We want to hear from you. Do you include a contact form in your Divi footer? Let us know in the comments.

    The post How to Include a Contact Form in Your Divi Footer appeared first on Elegant Themes Blog.

  • How to Reveal a Hover Background Image in Your Divi Fullwidth Header Module

    Divi’s Fullwidth Header Module has lots of features that add interesting design elements to any Divi website. One example is the ability to reveal a background image when the user hovers over the module. This adds an extra level of detail that most users would not expect. This is easy to do with Divi.

    In this post, we’ll see how to reveal a hover background image in your Divi Fullwidth Header Module. We’ll also create a fullwidth header from scratch based on one of Divi’s free Layout Packs.

    Let’s get started.

    Preview

    First, let’s see a preview of what we’ll build in this post. Since hovering with a mouse isn’t an option for phones, I’ve included the design for phones when the user touches the background.

    Desktop Without Hover

    Desktop Without Hover

    Desktop With Hover

    Desktop With Hover

    Phone Without Hover

    Phone Without Hover

    Phone With Screen Tap

    Phone With Screen Tap

    Build the Hover Background Image Fullwidth Header

    First, let’s build the fullwidth header that we’ll use in the example. Open the Divi Theme Builder and click Add Global Header to build a new template. Choose Build a Global Header to build it from scratch.

    Build the Hover Background Image Fullwidth Header

    Next, add a Fullwidth Section and delete the Regular Section.

    Build the Hover Background Image Fullwidth Header

    Finally, add a Fullwidth Header Module to your new section.

    Build the Hover Background Image Fullwidth Header

    Now, we can create our hover revealed background and style the module. For this example, I’m using design cues from the hero section from the free Financial Services Landing Page that’s available within Divi.

    Create the Hover Background Image

    Before we style the module, let’s start with creating the hover reveal feature for the Fullwidth Header Module. Once we see how to create it and how it works, we’ll style the rest of the module to match our preview example.

    Hover Reveal Background Image

    The hover revealed background has two elements. The first is the background color that shows as normal. We could also use a gradient or image if we wanted. The second is the element that shows when the user hovers over the Fullwidth Header Module. In our case, this is an image, but we could just as easily use a background color or gradient.

    First, scroll down to Background. On the Background Color tab, change the Color to #f0f3fb.

    • Background Color: #f0f3fb

    Hover Reveal Background Imag

    Next, select the Hover State icon. This is a mouse cursor icon. Clicking it opens a set of tabs that allow us to choose between the regular and hover state settings. Select the Hover State tab to change to the hover options. Next, choose the Background Image tab and choose your background image. I’m using the background image from the Financial Services Layout Pack called financial-services-9.

    • Hover State Background Image: financial-services-9

    Hover Reveal Background Imag

    We now have an image that will reveal when the user hovers over the Fullwidth Header Module. All hover state options work in this way.

    Style the Hover Background Image Fullwidth Header Module

    Now that we have our hover background image in place, let’s style the rest of the module.

    Hover Background Image Content

    Let’s start with the content for the fields, body, and buttons. Add your Title, Subtitle, Button One, Button Two, and Body content.

    • Title: Plan Your Financial Future
    • Subtitle: Welcome to Divi
    • Button One: Get Started
    • Button Two: Get a Free Quote
    • Body Content: your content

    Hover Background Image Content

    Hover Background Image Layout

    Next, select the Design tab. Change Logo & Text Alignment to Centered.

    • Logo & Text Alignment: Centered

    Hover Background Image Layout

    Hover Background Image Scroll Down Icon

    Select Show Scroll Down Button. Select the third icon and change the Color to #1d4eff. Leave the Size at its default setting.

    • Show Scroll Down Button: Yes
    • Icon: 3rd
    • Color: #1d4eff

    Hover Background Image Scroll Down Icon

    Hover Background Image Title Text

    Next, scroll down to Title Text. Select H1 for the Heading Level. Choose Montserrat for the Font, set the Weight to bold, and change the Color to #0f1154.

    • Heading Level: H1
    • Font: Montserrat
    • Weight: Bold
    • Color: #0f1154

    Hover Background Image Title Text

    Change the Font Size to 125px for desktops, 40px for tablets, and 24px for phones. Set the Line Height to 110%. This gives us an oversized title that looks great on any screen size.

    • Size: 125px desktop, 40px tablet, 24px phone
    • Line Height: 110%

    Hover Background Image Title Text

    Hover Background Image Body Text

    Next, scroll to Body Text. Change the Font to Roboto, set the Weight to medium, and change the Color to #0f1154.

    • Font: Roboto
    • Weight: Medium
    • Color: #0f1154

    Hover Background Image Body Text

    Change the Font Size to 18px for desktops and tablets, and 14px for phones. Set the Line Height to 180%. This gives the body text plenty of breathing room.

    • Size: 18px desktop and tablet, 14px phone
    • Line Height: 180%

    Hover Background Image Body Text

    Hover Background Image Subtitle Text

    Next, scroll to Subtitle Text. Change the Font to Montserrat. Set the Weight to bold, change the Style to TT, and change the Color to #1d4eff.

    • Font: Montserrat
    • Weight: Bold
    • Style: TT
    • Color: #1d4eff

    Hover Background Image Subtitle Text

    Change the Font Size to 16px for desktops, 14px for tablets, and 12px for phones. Change the Line Spacing to 0.3em and the Line Height to 1.6em. This sets the subtitle apart from both the title and content without taking up much room.

    • Size: 16px desktop, 14px tablet, 12px phone
    • Letter Spacing: 0.3em
    • Line Height: 1.6em

    Hover Background Image Subtitle Text

    Hover Background Image Button One

    Next, scroll down to Button One and enable Use Custom Styles for Button One. Change the Text Size to 18px. Change the Text Color to white and the Background Color to #1d4eff.

    • Use Custom Styles for Button One: Yes
    • Text Size: 18px
    • Text Color: #ffffff
    • Background Color: #1d4eff

    Hover Background Image Button One

    Next, change the Border Width and Radius to 0px. Choose Roboto for the Font and set the Weight to Medium.

    • Width: 0px
    • Radius: 0px
    • Font: Roboto
    • Weight: Medium

    Hover Background Image Button One

    Scroll down to Button One Padding. Add 14px for the Top and Bottom Padding, and 24px for the Right and Left Padding.

    • Padding: 14px Top and Bottom, 24px Left and Right

    Hover Background Image Button One

    Hover Background Image Button Two

    Next, scroll down to Button Two and enable Use Custom Styles for Button Two. Most of these settings are the same as Button One. Change the Text Size to 18px, the Text Color to white, and the Background Color to #00c9c9.

    • Use Custom Styles for Button Two: Yes
    • Text Size: 18px
    • Text Color: #ffffff
    • Background Color: #00c9c9

    Hover Background Image Button Two

    Next, change the Border Width and Radius to 0px. Choose Roboto for the Font and set the Weight to Medium.

    • Width: 0px
    • Radius: 0px
    • Font: Roboto
    • Weight: Medium

    Hover Background Image Button Two

    Scroll down to Button Two Padding. Add 14px for the Top and Bottom Padding, and 24px for the Right and Left Padding.

    • Padding: 14px Top and Bottom, 24px Left and Right

    Hover Background Image Button Two

    Hover Background Image Spacing

    Next, scroll down to Spacing and add 100px Padding to the Top and Bottom. This increases the size of the fullwidth header without using the Fullscreen option in the Layout settings. In my examples, the fullwidth header leaves a little bit of space at the bottom of the screen where the next section shows. Of course, you could use the full-screen setting in place of the padding if you wanted.

    • Padding: 100px Top and Bottom

    Hover Background Image Spacing

    Hover Background Image Box Shadow

    Lastly, scroll down to Box Shadow and choose the 6th Box Shadow option. This gives the header a more unique look. Close the Fullwidth Header Module and save your settings.

    • Box Shadow: 6th

    Hover Background Image Box Shadow

    Results

    Desktop Without Hover

    Desktop Without Hover

    Desktop With Hover

    Desktop With Hover

    Phone Without Hover

    Phone Without Hover

    Phone With Screen Tap

    Phone With Screen Tap

    Ending Thoughts

    That’s our look at how to reveal a hover background image in your Divi Fullwidth Header Module. The hover state for background images is a simple setting, but it can have a huge impact on the site’s design. It’s a great way to get attention. You can take the design even further if you wanted to add Gradient Stops, overlays, change images, and more. I recommend playing around with the Divi Fullwidth Header Module’s hover background settings to see what you can create.

    We want to hear from you. Do you use a hover background image in your Divi Fullwidth Header Module? Let us know about it in the comments.

    The post How to Reveal a Hover Background Image in Your Divi Fullwidth Header Module appeared first on Elegant Themes Blog.

  • How to Use Invisible Dividers to Create Space Between Divi Modules

    Divi’s Divider Module is unique among the modules available within the Divi Builder. It works to serve multiple purposes. Not only does it provide a styled line to add an interesting division between modules, but it’s also used to add whitespace. Many Divi layouts use invisible Divider Modules to create space within the layout. In this post, we’ll see how to use invisible Dividers to create space between Divi modules.

    Why Create Space with Invisible Dividers?

    Invisible dividers are a great way to add whitespace to your layouts. Without whitespace, a layout can become cluttered and visually unappealing. Elements can be easily ignored if they’re too close to other elements. They won’t stand apart, making CTAs go unnoticed.

    Whitespace can help focus attention on certain areas of the screen. When an element has lots of whitespace around it, it stands out. This is especially important for buttons, descriptions, blurbs, or anything you want your visitors to interact with. Whitespace even improves readability, so content is easier to consume.

    Divider Module Settings

    Divider Modules can create vertical and horizontal space in several ways. The amount of space the module takes can be adjusted with Sizing, Margin, and Padding. The result is essentially the same and each of the methods can be used in combination if you need to fine-tune the spacing.

    Divider Module Show Visibility

    The module can show or not show the divider. This allows us to use the module just of space if we want. The size of the space the module takes is different from the visible and invisible divider.

    To make the divider invisible, go to its Content tab. The first section is Visibility. This is enabled by default. Here’s the setting with Visibility enabled. I’ve given the Row a tan background to help visualize the Divider Module.

    Divider Module Show Visibility

    Simply disable it. The divider won’t show, and you can now use the module to add spacing within the Divi layout. All that shows now is the tan background for the Row.

    Divider Module Show Visibility

    Invisible Divider Combined with Sizing

    Like many Divi modules, the Divider Module includes several adjustments to control the size of the module. The first is the Sizing settings. When the Divi Module is set to not show the divider, the Sizing settings Only show:

    • Width
    • Max Width
    • Min Height
    • Height
    • Max Height

    The example below shows the invisible Divider Module. I’ve added a blue background to the module, so it stands out.

    Invisible Divider Combined with Sizing

    Adjusting Height is a great way to control the spacing for the invisible Divider Module. The example below shows a Divider Module with 220px of Height.

    Invisible Divider Combined with Sizing

    Invisible Divider Module Combined with Spacing

    Margin and Padding can also be used to add spacing for the invisible Divider Module. They work the same as with any Divi module.

    This example shows the invisible Divider module with no Height adjustment. I’ve added 50px Top and Bottom Margin. The module still shows the blue background as its normal size, but there’s more margin around the module, as you can tell by the tan background of the Row.

    Invisible Divider Module Combined with Spacing

    This example adds 50px Top and Bottom Padding. The Row is the same size, but the module now takes up more of the Row. The result is essentially the same, so you can try both and see which works best for each situation.

    Invisible Divider Module Combined with Spacing

    This example shows both with 50px Top and Bottom Margin and Padding. The module now takes more of the area. You can use one or the other, but this does help you fine-tune the spacing if there are any issues.

    Invisible Divider Module Combined with Spacing

    Invisble Dividers Examples

    We’ll create two examples from the same layout pack. our examples will add whitespace to give the content some focus or help with alignment. For the examples, I’ll use the landing page and the home page from the free Flower Farm Layout Pack that’s available within Divi. We’ll use a variety of adjustments to see how they work.

    Invisible Dividers Example One

    For our first example, we’ll add space between two Text Modules and a Button Module just so they take up more space in their area. We’ll use two invisible Divider Modules.

    This example uses the Landing Page from the Flower Farm Layout Pack. I’ll add whitespace to the CTA in the Service Section. For reference, here’s a look at this section before adding the invisible Divider Modules.

    Invisible Divider Example One

    First Divider

    Place a Divider Module under the first Text Module.

    Invisible Divider Example One

    Set the module’s Visibility to not show the divider.

    • Show Divider: No

    Invisible Divider Example One

    Select the Design Tab and change the Height to 120px for desktops. Set the Height for tablets and phones to Auto. Close the module’s settings.

    • Height: 120px (desktop), Auto (tablet and phone)

    Invisible Divider Example One

    Second Divider

    Next, place the second Divider Module above the Button Module.

    Invisible Divider Example One

    Set the module’s Visibility to not show the divider.

    • Show Divider: No

    Invisible Divider Example One

    Select the Design tab and scroll down to Spacing. Enter 10% for the Top and Bottom Margin for desktops. Set tablets and phones to Auto. Close the module and save your settings.

    • Margin: 10% Top and Bottom, Auto tablet and phone

    Invisible Divider Example One

    Invisible Dividers Example Two

    For our second example, we’ll use the Call-to-Action section from the layout. This section has a three-column row with a title and button on the left, an image in the middle, and a description on the right. The content for the left and right columns starts at the top of the Row. We’ll use three Divider Modules to add whitespace and center the content. The difference will be minor, but it will have a visual impact on the layout.

    This one uses the Home Page from the Flower Farm Layout Pack. For reference, here’s a look at this section before adding the invisible Divider Modules.

    Invisible Divider Example Two

    First Divider

    Place a Divider Module above the first Text Module in the left column. You might need to drag the Divider Module above the first Text Module after it’s added.

    Invisible Divider Example Two

    Set the module’s Visibility to not show the divider. Close the module’s settings.

    • Show Divider: No

    Invisible Divider Example Two

    Select the Design tab and change the Height to 102px for desktops. Set the Height for tablets and phones to auto. Close the module’s settings.

    • Height (desktop): 102px
    • Height (tablet, phone): Auto

    Invisible Divider Example Two

    Second Divider

    Place the second Divider Module under the Button Module in the left column. At first, it will seem that this one isn’t needed since won’t affect the desktop version, but it will have an impact on tablets and phones.

    Invisible Divider Example Two

    Set the module’s Visibility to not show the divider.

    • Show Divider: No

    Invisible Divider Example Two

    Select the Design Tab. Scroll down to Spacing and add 5px to the Top and Bottom Padding. Close the module’s settings.

    • Padding: 5px Top, 5px Bottom

    Invisible Divider Example Two

    Third Divider

    Finally, place the third Divider Module over the first Text Module in the right column. You might need to drag it into place.

    Invisible Divider Example Two

    Set the module’s Visibility to not show the divider.

    • Show Divider: No

    Invisible Divider Example Two

    Select the Design Tab and change the Height to 194px. Set the Height for tablets to 50px and phones to 40px. Close the module’s settings.

    • Height: 194px (desktop), 50px (tablet), 40px (phone)

    Invisible Divider Example Two

    Invisible Dividers Results

    Desktop Invisible Dividers Example One

    Desktop Invisible Divider Example One

    Phone Invisible Dividers Example One

    Phone Invisible Divider Example One

    Desktop Invisible Dividers Example Two

    Desktop Invisible Divider Example Two

    Phone Invisible Dividers Example Two

    Phone Invisible Divider Example Two

    Ending Thoughts

    That’s or look at how to use invisible dividers to create space between Divi modules. Whitespace is great for highlighting certain elements and improving the readability of a website. The Divider Module provides several options for adding space including Sizing and Spacing, and you can adjust Margin, Padding, or both. You can use any or all of the settings in any combination you want to get the results you need.

    We want to hear from you. Do you use invisible Divider Modules to add whitespace to your Divi layouts? Let us know about your experience in the comments.

    The post How to Use Invisible Dividers to Create Space Between Divi Modules appeared first on Elegant Themes Blog.