Using Divider Modules to Create Background Shapes with Divi’s Transform Options

Posted on April 9, 2019 by in Divi Resources | 1 comment

Using Divider Modules to Create Background Shapes with Divi’s Transform Options

Every week, we provide you with new and free Divi layout packs which you can use for your next project. For one of the layout packs, we also share a use case that’ll help you take your website to the next level.

This week, as part of our ongoing Divi design initiative, we’re going to show you how to use Divider Modules to create background shapes with Divi’s transform options and the Paralegal Layout Pack. Divider Modules are very versatile and can really uplift the overall design of your pages. Although we’ll be recreating some examples that match the Paralegal Layout Pack specifically, you can use this technique for any kind of website you build with Divi.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

background shapes

Mobile

background shapes

Create New Page Using Paralegal Layout Pack’s Landing Page

Create a new page and upload the Paralegal Layout Pack‘s landing page to it.

background shapes

Recreate Example #1

Section Overflow

Let’s start creating the first example! Go ahead and open the hero section settings and go to the design tab. Here, we want to make sure that nothing surpasses the section container. To do that, we’ll add one single line of CSS code to the main element.

overflow: hidden;

background shapes

Add Divider Module to Column 2

Visibility

Then, go ahead and add a Divider Module to the second column of the specialty section. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

background shapes

Background Color

We’re going to use a color from the layout pack’s color palette as the background color for the divider.

  • Background Color: #d94144

background shapes

Color

Then, we’ll go to the design tab and change the color of the divider as well.

  • Color: #f3f1f2

background shapes

Styles

Move on to the styles settings and modify the divider style.

  • Divider Style: Dotted

background shapes

Sizing

Play around with the sizing settings as well. You can make this Divider Module look however you want to, but if you want it to look exactly the way it was shown in the preview of this post, use the following settings:

  • Divider Weight: 4px
  • Height: 0px

background shapes

Spacing

Now, we’re going to change the position and size of the Divider Module using some custom margin and padding values. Make sure you modify the values according to the different screen sizes so everything remains responsive.

  • Top Margin: -30vw (Desktop), -100vw (Tablet & Phone)
  • Left Margin: -100vw (Desktop), -138vw (Tablet), -300vw (Phone)
  • Top Padding: 0px
  • Bottom Padding: 1.3vw (Desktop), 2.2vw (Tablet), 3vw (Phone)

background shapes

Transform

Transform Scale

Time to transform the module! The first thing we’ll do in the transform settings is increase the divider size by adding the following transform scale values:

  • Bottom: 153%
  • Right: 500%

background shapes

Transform Rotate

We’ll also rotate the Divider Module in the transform rotate settings. As you can notice, the Divider Module doesn’t surpass the section thanks to that one line of CSS code we’ve added at the beginning of this tutorial.

  • Left: 348deg

background shapes

Recreate Example #2

Section Overflow

On to the next example! Again, we want to make sure nothing surpasses the section container by adding one single line of CSS code to the main element of the section.

overflow: hidden;

background shapes

Add New Row to End of Section

Column Structure

Continue by adding a new row at the end of the section using the following column structure:

background shapes

Spacing

To decrease the size that is taken up by the row, we’re going to remove the default top and bottom padding in the spacing settings.

  • Top Padding: 0px
  • Bottom Padding: 0px

background shapes

Add Divider Module

Visibility

Time to add and style the Divider Module! Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

background shapes

Background Color

We’re, again, using one of the colors in the layout pack’s color palette as the background color.

  • Background Color: #d94144

background shapes

Color

Move on to the design tab and change the divider color too.

  • Color: #f3f1f2

background shapes

Sizing

We’re playing around with the sizing settings as well.

  • Divider Weight: 10px
  • Height: 0px

background shapes

Spacing

And we’ll create the exact shape we want using some custom padding that we’ll modify across different screen sizes.

  • Top Padding: 2vw
  • Bottom Padding: 2.5vw (Desktop), 3vw (Tablet), 3.9vw (Phone)

background shapes

Transform

Transform Scale

Time to transform! The first thing we’ll do is scale the Divider Module. We’re doing this to make sure that there’s no gap at the beginning or the end of the section. Don’t worry about scaling your Divider Module too much, everything that exceeds the section will not show up in your design.

  • Bottom: 153%
  • Right: 153% (Desktop), 250% (Tablet), 500% (Phone)

background shapes

Transform Translate

Then, we’re also going to change the position of the Divider Module to make it show up on the right side. Make sure you match these values to the different screen sizes.

  • Bottom: 25vw (Desktop), 27vw (Tablet & Phone)
  • Right: 0px (Desktop), -32vw (Tablet & Phone)

background shapes

Transform Rotate

Last but not least, we’re going to turn the horizontal divider into a vertical one by playing around with the transform rotate settings.

  • Left: 270deg

background shapes

Recreate Example #3

Section Overflow

On to the next and last example! Again, make sure nothing surpasses the section container by adding one single line of CSS code to the main element of the section.

overflow: hidden;

background shapes

Add New Row to Beginning of Section

Column Structure

Continue by adding a new row at the top of the section. It’s important that the row is placed at the top so it won’t overlap the content below it later on the tutorial.

background shapes

Sizing

Without adding any modules yet, open the row settings and allow the column to take up the entire width of the screen.

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

background shapes

Add Divider Module

Visibility

Add your Divider Module next. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

background shapes

Background Color

Move on to the background settings and add a background color of your choice.

  • Background Color: #d94144

background shapes

Color

Modify the divider color as well.

  • Color: #f3f1f2

background shapes

Styles

And change the divider style in the styles settings.

  • Divider Style: Dotted

background shapes

Sizing

Then, go to the sizing settings and make some changes.

  • Divider Weight: 4px
  • Height: 0px

background shapes

Spacing

And create the shape you want using some top and bottom padding in the spacing settings.

  • Top Padding: 3vw
  • Bottom Padding: 3vw

background shapes

Box Shadow

We’ll also add some depth to our page by giving the divider a subtle box shadow.

  • Box Shadow Blur Strength: 80px
  • Shadow Color: rgba(0,0,0,0.3)

background shapes

Transform

Transform Scale

Now that we’ve styled the divider, we can start transforming it. The first thing we’ll do is increase the size of the Divider Module in the transform scale settings.

  • Bottom: 140%
  • Right: 140%

background shapes

Transform Translate

Then, we’ll go to the transform translate settings and change the position of the Divider Module. Placing the row at the top of the section helps us maintain a lower z-index than the row that comes below it, which creates this beautiful overlap!

  • Bottom: 4vw
  • Right: 16vw (Desktop), 26vw (Tablet), 35vw (Phone)

background shapes

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

background shapes

Mobile

background shapes

Final Thoughts

In this post, we’ve shown you how to use the Divider Module and Divi’s new transform options to create background shapes and enhance the overall look and feel of your pages. This tutorial is part of our ongoing Divi design initiative, where we try to put something extra into your design toolbox each and every week. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

Premade Layouts

Check Out These Related Posts

Get a FREE Library Layout Pack for Divi

Get a FREE Library Layout Pack for Divi

Posted on September 16, 2019 by in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative where each week, we give away brand new, free Divi Layout Packs from our design team to you. This time around, Kenny and his team have created a professional Library Layout Pack that will help you...

View Full Post
Divi Child Themes for Churches

Divi Child Themes for Churches

Posted on September 14, 2019 by in Divi Resources

Divi is a great choice for building websites for Churches. Divi has everything you need to display information about the Church, service times, the pastors, events, media, and lots more. Fortunately, you don’t have to build a Church website from scratch. There are several Divi child themes for...

View Full Post

1 Comment

  1. Where’s the live action…?

Join To Download Today

Pin It on Pinterest