In today’s Divi tutorial, we’re going to share with you a glimpse of what you can do with the new options that have been added to Divi in the previous updates. More precisely; we’re going to share 10 interesting ways you can style the Divider Module with these new changes. The possibilities are truly endless, but this post might help you find the inspiration you need for your next project.

Sneak Peek

One of the best things about this tutorial is the fact that we’ll not be using any additional CSS (or code of any kind for that matter). All the examples we’ll be creating will only use the options that are included within the Divider Module. Let’s take a quick look at the dividers we’ll build before I show you how to create each on step by step:

divider module

Create Reusable Section

The first thing you’ll need to do is create the section that we’ll use throughout all 10 examples. Of course, you can use the dividers in other contexts as well, but by making this section first, you’ll have the opportunity to play around with your own Divi Builder and see which one you prefer.

Create New Page

Start by creating a new page in your WordPress dashboard, enabling the Divi Builder and opening the Visual Builder.

Create Section with Three-Column Row

Once you’re on your new page, create a standard section and use a three-column row within that standard section. We’ve used ‘#f4f4f4’ as the section background color.

divider module

Add First Text Module

Then, add the first Text Module to the first column of the row. Open the settings, type down the text you want to appear and go to the Design tab. Within the Design tab, make the following changes to the Text subcategory:

  • Text Font: Lobster
  • Text Font Size: 35
  • Text Color: #000000
  • Text Line Height: 1.7em
  • Text Orientation: Center

divider module

Add Second Text Module

Once you’ve added the first Text Module, you can add another one right below it. Add the text you want to appear and go to the Design tab. Within the Design tab, make sure the following modifications apply:

  • Text Font: Roboto
  • Text Font Size: 14
  • Text Line Height: 1.7em
  • Text Orientation: Center

divider module

Clone Text Modules & Place in Other Two Columns

Once you’ve created these two text modules, you can put them in the other two columns of the row as well.

divider module

Before Getting Started

We’re going to share 10 fun ways you can style Divi’s divider module. Each one of the examples will have three dividers that are in harmony with one another. Most of the settings are the same for all three modules. We’ll start by showing you the settings that count for each one of them and continue by showing the changes you need to make to the other two dividers. So, every time you finish the first divider, clone it and place it in the other two columns. Once you’ve done that, you can make the modifications to the other two dividers.

Note: For each one of the dividers, you’ll need to enable the ‘Show Divider’ option within the Content tab.

divider module

1. The Blurred Triangle

divider module

First Divider Module Settings

Content Tab

Within the content tab, we’re going to make use of the following background settings:

  • First Color: #e09900
  • Second Color: rgba(255,255,255,0)
  • Gradient Type: Linear
  • Gradient Direction: 176deg
  • Start Position: 13%
  • End Position: 31%

divider module

Design Tab

Move on to the Design tab and make sure the following settings apply to the Sizing subcategory:

  • Divider Weight: 0
  • Height: 25px
  • Width: 35%
  • Module Alignment: Center

divider module

Scroll down the same tab and use the following animation settings in the Animation subcategory:

  • Animation Style: Slide
  • Animation Repeat: Once
  • Animation Direction: Center
  • Animation Duration: 1200ms
  • Animation Intensity: 80%

divider module

Second Divider Module Settings

Content Tab

In the content tab, the only thing you’ll need to do is change the first gradient color into ‘#0c71c3’.

Design Tab

Next, you’ll need to add some animation delay of ‘250ms’ to the Animation subcategory.

divider module

Third Divider Module Settings

Content Tab

Change the first gradient color into ‘#8300e9’ for the last divider.

divider module

Design Tab

The animation delay you’ll need to add to the Animation subcategory of the last divider is ‘500ms’.

divider module

2. The Color Shadow

divider module

First Divider Module Settings

Content Tab

Use the following gradient background settings in the Content tab:

  • First Color: #e09900
  • Second Color: rgba(255,255,255,0)
  • Gradient Type: Linear
  • Gradient Direction: 180deg
  • Start Position: 0%
  • End Position: 72%

divider module

Design Tab

The first thing you’ll need to do within the Design tab is change the color of the divider into ‘#000000’.

divider module

Within the Styles subcategory of that same tab, use ‘Solid’ as the Divider Style and ‘Top’ as the Divider Position.

divider module

Continue scrolling down and make the following changes apply to the Sizing subcategory:

  • Divider Weight: 2
  • Height: 20px
  • Width: 70%
  • Module Alignment: Center

divider module

And lastly, use the following option settings for the Animation subcategory:

  • Animation Style: Bounce
  • Animation Repeat: Once
  • Animation Direction: Center
  • Animation Duration: 2000ms

divider module

Second Divider Module Settings

Content Tab

Change the first gradient color of the gradient background into ‘#0c71c3’.

divider module

Design Tab

Within the Animation subcategory, add ‘350ms’ to the Animation Delay option.

divider module

Third Divider Module Settings

Content Tab

Make the same change to the third divider but use the ‘#8300e9’ color instead.

divider module

Design Tab

And lastly, add an animation delay of ‘700ms’.

divider module

3. The Gradient Series

divider module

First Divider Module Settings

Content Tab

For the first divider, use the following gradient background settings:

  • First Color: #0970a0
  • Second Color: rgba(255,255,255,0)
  • Gradient Type: Linear
  • Gradient Direction: 119deg
  • Start Position: 0%
  • End Position: 86%

divider module

Design Tab

Within the Design tab, choose ‘#FFFFFF’ as the color of your divider.

divider module

Next, make the following changes to the Styles subcategory:

  • Divider Style: Solid
  • Divider Position: Vertically Centered

divider module

While still in the same tab, make sure the following settings apply to the Sizing subcategory:

  • Divider Weight: 3
  • Height: 10px
  • Width: 25%
  • Module Alignment: Left

divider module

Add ’15px’ to the bottom padding within the Spacing subcategory as well.

divider module

And lastly, use the following settings for the Animation subcategory:

  • Animation Style: Slide
  • Animation Repeat: Once
  • Animation Direction: Left
  • Animation Duration: 2000ms
  • Animation Intensity: 100%

divider module

Second Divider Module Settings

Content Tab

The gradient background settings for the second divider are slightly different:

  • First Color: #0970a0
  • Second Color: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 0%
  • End Position: 100%

divider module

Design Tab

Within the Sizing subcategory, change the Module Alignment to center.

divider module

Lastly, centralize the Animation Direction as well.

divider module

Third Divider Module Settings

Content Tab

The third divider contains another gradient background as well:

  • First Color: rgba(255,255,255,0)
  • Second Color: #0970a0
  • Gradient Type: Linear
  • Gradient Direction: 119deg
  • Start Position: 14%
  • End Position: 100%

divider module

Design Tab

We’re going to make the same changes we made to the second divider but use right instead of center.

divider module

divider module

4. The Rolling Circle

divider module

First Divider Module Settings

Content Tab

Start by making the following gradient background settings apply:

  • First Color: #e09900
  • Second Color: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 20%
  • End Position: 21%

divider module

Design Tab

The first thing you’ll need to do in the Design tab is use the ‘#000000’ color for the divider.

divider module

Then, select ‘Solid’ as your Divider Style and ‘Vertically Centered’ as your Divider Position.

divider module

Moving on, make the following changes to the Sizing subcategory:

  • Divider Weight: 2
  • Height: 50px
  • Width: 40%
  • Module Alignment: Center

divider module

Lastly, the Animation subcategory will need the following settings:

  • Animation Style: Roll
  • Animation Repeat: Once
  • Animation Direction: Center
  • Animation Duration: 1500ms
  • Animation Delay: 850ms
  • Animation Intensity: 60%

divider module

Second Divider Module Settings

Content Tab

Change the first gradient color into ‘#0c71c3’.

divider module

Design Tab

And change the Animation Delay to ‘0ms’.

divider module

Third Divider Module Settings

Content Tab

For the last divider, you’ll only need to change the first gradient background color into ‘#8300e9’.

divider module

5. The Bracket

divider module

First Divider Module Settings

Content Tab

Use the following gradient background settings:

  • First Color: #e0d1b1
  • Second Color: #e09900
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 36%
  • End Position: 100%

divider module

Design Tab

Make sure the color of the divider is the same as the section background color. In this case, that is ‘#f4f4f4’.

divider module

Scroll down the design tab and use ‘Dashed’ as your Divider Style and ‘Top’ as your Divider Position.

divider module

Make the following settings apply to the Sizing subcategory:

  • Divider Weight: 100
  • Height: 18px
  • Width: 60%
  • Module Alignment: Center

divider module

You’ll also need to add ’15px’ to the top, right and left padding.

divider module

Lastly, use the following animation settings:

  • Animation Style: Zoom
  • Animation Repeat: Once
  • Animation Direction: Center
  • Animation Duration: 1000ms
  • Animation Intensity: 80%

divider module

Second Divider Module Settings

Content Tab

Change the colors of the gradient background into ‘#87acc1’ and ‘#0c71c3’.

divider module

Design Tab

Next, change the Animation Duration to ‘1300ms’ and the Animation Delay to ‘250ms’.

divider module

Third Divider Module Settings

Content Tab

The gradient colors being used in the third divider are ‘#c9a4e8’ and ‘#8300e9’.

divider module

Design Tab

Change the Animation Duration to ‘1300ms’ and the Animation Delay to ‘500ms’.

divider module

6. The Double Lines

divider module

First Divider Module Settings

Content Tab

Apply the following gradient background settings:

  • First Color: #e09900
  • Second Color: rgba(255,255,255,0)
  • Gradient Type: Linear
  • Gradient Direction: 179deg
  • Start Position: 0%
  • End Position: 45%

divider module

Design Tab

Choose ‘#000000’ as your divider color.

divider module

Within the Styles subcategory, use ‘Double’ as your Divider Style and ‘Vertically Centered’ as your Divider Position.

divider module

Moving on, use the following settings for the Sizing subcategory:

  • Divider Weight: 5
  • Height: 25px
  • Width: 35%
  • Module Alignment: Left

divider module

Lastly, use the following animation settings:

  • Animation Style: Roll
  • Animation Repeat: Once
  • Animation Direction: Left
  • Animation Duration: 1000ms
  • Animation Intensity: 50%

divider module

Second Divider Module Settings

Content Tab

Change the first gradient color into ‘#0c71c3’.

divider module

Design Tab

Next, use a different animation for the second divider:

  • Animation Style: Fade
  • Animation Repeat: Once
  • Animation Duration: 1400ms

divider module

Third Divider Module Settings

Content Tab

For the third divider, use ‘#8300e9’ as the first gradient background color.

divider module

Design Tab

The only thing you’ll need to change in the Design tab is the Animation Direction, which is in this case ‘Right’.

divider module

7. The Bridge

divider module

First Divider Module Settings

Content Tab

Start by assigning ‘#8300e9’ to the background.

divider module

Design Tab

Continue by using the section background color as your divider color, which is in this case ‘#f4f4f4’.

divider module

Next, use ‘Dotted’ as your Divider Style and ‘Top’ as your Divider Position.

divider module

Within the Sizing subcategory, use the following settings:

  • Divider Weight: 15
  • Height: 7px
  • Width: 70%
  • Module Alignment: Left

divider module

We’ll need some custom padding as well:

  • Top Padding: 7px
  • Right Padding: -7px
  • Left Padding: -7px

divider module

The animation we’ll be using has the following settings:

  • Animation Style: Slide
  • Animation Repeat: Once
  • Animation Direction: Left
  • Animation Duration: 800ms
  • Animation Delay: 400ms
  • Animation Intensity: 30%

divider module

Second Divider Module Settings

Content Tab

For the second divider, change the background into ‘#0c71c3’.

divider module

Design Tab

We’ll be using a different animation as well:

  • Animation Style: Zoom
  • Animation Repeat: Once
  • Animation Direction: Center
  • Animation Duration: 800ms
  • Animation Intensity: 30%

divider module

Third Divider Module Settings

Content Tab

The third divider will use ‘#8300e9’ as its background color.

divider module

Design Tab

The animation for the third divider is slightly different as well:

  • Animation Style: Zoom
  • Animation Repeat: Once
  • Animation Direction: Right
  • Animation Duration: 800ms
  • Animation Delay: 400ms
  • Animation Intensity: 30%

divider module

8. The Elegance

divider module

First Divider Module Settings

Content Tab

Start by adding the following gradient background to the first Divider:

  • First Color: #000000
  • Second Color: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 20%
  • End Position: 20%

divider module

Design Tab

Use the ‘#8300e9’ color for your divider.

divider module

Next, use ‘dotted’ as your Divider Style’ and ‘Vertically Centered’ as your Divider Position.

divider module

We’ll need a top padding of ’40px’ as well.

divider module

And an animation with the following settings:

  • Animation Style: Bounce
  • Animation Repeat: Once
  • Animation Direction: Down
  • Animation Duration: 1000ms

divider module

Second Divider Module Settings

Design Tab

For the second divider, change the color into ‘#0c71c3’.

divider module

The animation will need some changes as well:

  • Animation Direction: Center
  • Animation Duration 1500ms

Third Divider Module Settings

Design Tab

The third divider will be using ‘#8300e9’ as its color.

divider module

And will have ‘Up’ as its Animation Direction.

divider module

9. The Subtleness

divider module

First Divider Module Settings

Content Tab

Choose the following settings for the gradient background:

  • First Color: #8300e9
  • Second Color: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 0%
  • End Position: 38%

divider module

Design Tab

Within the Sizing subcategory, you’ll need the following settings:

  • Divider Weight: 0
  • Height: 4px
  • Width: 100%

divider module

Lastly, the animation we’ll be using has the following settings:

  • Animation Style: Bounce
  • Animation Repeat: Once
  • Animation Direction: Up
  • Animation Duration 1800ms

divider module

Second Divider Module Settings

Content Tab

For the second divider, change the first gradient background color into ‘#0c71c3’.

divider module

Third Divider Module Settings

Content Tab

Make the same change to the third divider but use the ‘#8300e9’ purple color instead.

divider module

10. The Glow

divider module

First Divider Module Settings

Content Tab

Make use of the following gradient background settings for the last series of dividers:

  • First Color:
  • Second Color:
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 0%
  • End Position: 38%

divider module

Design Tab

Choose the section background color as your divider color as well, in this case, it’s ‘#f4f4f4’.

divider module

Next, use ‘Dashed’ as your Divider Style and ‘Vertically Centered’ as your Divider Position.

divider module

Within the Sizing subcategory, use the following settings:

  • Divider Weight: 70
  • Height: 20px
  • Width: 100%

divider module

Lastly, we’ll be using an animation with the following options:

  • Animation Style: Fade
  • Animation Repeat: Once
  • Animation Duration: 1800ms
  • Animation Delay: 800ms

divider module

Second Divider Module Settings

Content Tab

For the second divider, change the second gradient background color into ‘#0c71c3’.

divider module

Design Tab

And add an Animation Delay of ‘250ms’.

Third Divider Module Settings

Content Tab

For the last divider, change the second gradient background color to ‘#8300e9’.

divider module

Design Tab

And finish off by putting the Animation Delay to ‘0ms’.

divider module

Final Thoughts

With the new Divi options, a lot of new creative things are possible with the built-in settings of each module. In this post, we’ve specifically shown you how these options can help you enhance your design through the Divider Module. If you have any questions or suggestions; make sure you leave a comment in the comment section below!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Featured Image by VikiVector / shutterstock.com

The post 10 Fun Ways to Use The Divider Module with The New Divi Options appeared first on Elegant Themes Blog.



Source link

error: Content is protected !!