By now, we’ve all gotten used to the section dividers that are included in Divi. In past tutorials, we’ve also shown you how you can make these section dividers apply to modules and rows. But if you want to use module dividers that are only connected to modules and not other design elements, this post is for you. We’re going to share 6 FREE module dividers that you can use for any kind of Divi website you build. These module dividers will be included in an illustrator file that you’ll be able to download further down this post. This tutorial will also help you to create your own kind of module dividers.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the 6 different module dividers that you’ll be able to download and how they look across different screen sizes.

Desktop

module dividers

Phone

module dividers

Download The Module Dividers for FREE

To lay your hands on the module dividers, you will first need to download them using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday and Friday! 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.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Let’s Get Started!

Change Divider Colors in Illustrator

Open Illustrator File in Downloaded Folder

In the first part of this tutorial, we’re going to prepare the module dividers we need. In the download folder, you can find the module dividers for one specific color palette. However, if you want to use another color palette, you’ll need to create the module dividers you need using the illustrator file that you can find in the download folder.

module dividers

Choose Module Divider Style, Unlock Layer & Enable Visibility

Once you open the illustrator file, go ahead and select the divider of your choice in the layers tab. Unlock the layer and enable the visibility option so you can get started right away.

module dividers

Click on Module Divider & Change  Color

Now, depending on how many modules you want to create a divider for, the number of module dividers you need can differ. To recreate the example we’ve shown you at the beginning of the post, for instance, we’ll need the module divider in four different colors. Start off with the first one by changing the divider color into white.

  • Divider Color: #ffffff

module dividers

Export PNG Module Divider for Web

Once you’ve changed the color, you can continue by saving the image module as a PNG image file for web.

module dividers

module dividers

Repeat Steps for Each Color Needed (x4)

As mentioned before, you’ll need various module dividers. Repeat the previous steps for each one of the colors.

  • Color 1: #ffffff
  • Color 2: #2759f6
  • Color 3: #97adf4
  • Color 4: #b2ceff

module dividers

Create Divi Design

Backend Preview

Once you’ve saved all the module dividers, it’s time to switch over to Divi! The end result we’re creating will look like this on the backend:

module dividers

Add New Section

Add a new page or open an existing one and add a regular section to it.

module dividers

Add New Row

Column Structure

Continue by adding a new row using the following column structure:

module dividers

Sizing

Without adding any modules yet, open the row settings and make some changes to the sizing settings.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

module dividers

Add Image Module to Column 1

Upload White Module Divider

The first module we’ll need, in column 1, is an Image Module. Upload the first module divider that you can find in the download folder or pick the one you’ve modified to your own color palette.

module dividers

Background Color

Then, add a background color to the Image Module. This color needs to match the background color of any module comes next.

  • Background Color: #2759f6

module dividers

Sizing

Then, go to the sizing settings and enable the ‘Force Fullwidth’ option.

  • Force Fullwidth: Yes

module dividers

Add Blurb Module to Column 2

Add Content

The second module we need in column 1 is a Blurb Module. Start by adding some content of choice.

module dividers

Select Icon

Then, select an icon of choice.

module dividers

Background Color

Continue by adding the same background color you’ve used for the module divider Image Module.

  • Background Color: #2759f6

module dividers

Icon Settings

Next, go to the icon settings and make some changes.

  • Icon Color: #ffffff
  • Image/Icon Placement: Top
  • Use Icon Font Size: Yes
  • Icon Font Size: 50px

module dividers

Text Settings

Modify the text settings as well.

  • Text Orientation: Center
  • Text Color: Light

module dividers

Title Text Settings

Change the appearance of the title text too.

  • Title Font Weight: Ultra Bold
  • Title Font Style: Uppercase

module dividers

Spacing

And create some space for the module by using custom padding.

  • Top Padding: 50px
  • Bottom Padding: 50px
  • Left Padding: 50px
  • Right Padding: 50px

module dividers

Clone Image Module 3 Times & Blurb Module Twice

Once you’re done modifying the first Image Module (containing the module divider) and the Blurb Module, you can go ahead and clone the Image Module three times and the Blurb Module twice. This will give the following result in the backend:

module dividers

Place Duplicates in Right Order

Change the order of the duplicates to make sure you start with an Image Module that is followed up by a Blurb Module, as shown below:

module dividers

Change Blurb Module Duplicates’ Background Colors

Then, change the background colors of the Blurb Modules.

  • Blurb Module #2: #97adf4
  • Blurb Module #3: #b2ceff

module dividers

Change Module Divider in Image Module

Open the first duplicate Image Module and upload the second module divider you’ve created (or choose one that you can find in the download folder).

module dividers

Change Module Divider Image Module Background Color (Match with Next Blurb Module’s Background Color)

After you’ve uploaded the new module divider, you’ll need to change the background color of that Image Module as well. Make sure you match this color with the background color of the Blurb Module that comes next.

  • Module Divider #2: #2759f6

module dividers

Repeat Steps for Two Remaining Divider Modules

Repeat the previous steps for the two remaining module dividers in the column and you’re done!

  • Module Divider #3 Background Color: #97adf4
  • Module Divider #4 Background Color: #b2ceff

module dividers

Preview

Now that we’ve gone through all the steps, let’s take a final look at the 6 different module dividers you were able to download at the beginning of this post!

Desktop

module dividers

Phone

module dividers

Final Thoughts

In this post, we’ve shared 6 free module dividers that you can use for any kind of website you’re building. These module dividers can help you create a more playful design and create unique and fun modules. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

The post Download & Use 6 FREE Module Dividers for Divi appeared first on Elegant Themes Blog.



Source link

error: Content is protected !!