Using Divi’s New Column Filter Settings to Create Stunning Blending Effects

Posted on August 8, 2019 by in Divi Resources |

Using Divi’s New Column Filter Settings to Create Stunning Blending Effects

Divi’s new column filter settings can be used in many creative ways. In this post, we’ll show you how to blend one main row background image with column content. We’ll add different color gradients to the modules and a column “screen” blend mode to create a stunning effect. We hope this design will inspire you to use column blend modes in your next Divi project. You’ll be able to download the JSON file for free as well!

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

blend modes desktop preview

Mobile

blend modes gif responsive

Download The Column Blend Modes Layout for FREE

To lay your hands on the free column blend modes layout, you will first need to download it 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! 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.

Let’s Start Recreating!

Subscribe To Our Youtube Channel

Add New Section with 3-Column Row

Start the design by adding a new section with a three-column row.

add a three column row

Section Spacing

Open the section settings and adjust the spacing.

  • Left and Right Margin: 3vw
  • Top and Bottom Padding: 84px

style the section

Row Settings

Background

Before adding any modules, we’re going to modify the row settings. Start by adding a background color.

  • Background Color: Medium Grey #c4c4c4

add grey color to the background

Then, upload a background image and blend the background color with the image using a blend mode.

  • Background Image Blend: Multiply

add image and set blend mode at multiply

Sizing

Adjust the sizing settings of the row next.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Height: Yes
  • Width: 100%
  • Max Width: 100%

style the background of the section

Spacing

Remove the default row padding as well.

  • Top and Bottom Padding: 0px

style the background of the row

Box Shadow

Continue by adding a simple box shadow to the row.

  • Box Shadow: First Option

add a box shadow to the section

Visibility

Adjust the Z index in the visibility tab.

  • Z-Index: 1

visibility index of the row

Style Column 1

Enter the first column’s settings.

Select column 1

Filters

Apply a screen blend mode to the column in the filters tab.

  • Blend Mode: Screen

apply screen blend mode

Hover Transform Scale

Enter the transform option group and modify the hover transform scale settings.

  • Transform Scale: 105% on both x and y axes

transform hover or column one

Visibility

Enter the visibility tab of the column and adjust the overflow settings.

  • Horizontal Overflow: Visible
  • Vertical Overflow: Visible

visibility of the row

Transitions

Move on to the transitions tab and adjust the transition duration to create a smooth transition.

  • Transition Duration: 500 ms

transition duration

Add Text Module to Column 1

Each column contains three text modules. Add a first text module to column 1 with some H2 content of your choice and adjust the settings as follows.

insert text module in column one

Background

Style the background with a color gradient.

  • Background: Gradient
  • Gradient Color One: #5498ff
  • Gradient Color Two: #16fff3
  • Gradient Direction: 235 deg
  • Start Position: 37%

text module one with a background

Spacing

Add some custom spacing values next.

  • Top and Bottom Padding: 6vw
  • Left and Right Padding: 3vw

style the spacing of the module

Heading Text

Enter the heading text settings and style the H2 text settings accordingly:

  • Heading 2 Font Weight: Ultra Bold
  • Heading 2 Font Style: TT
  • Heading 2 Text Color: Black #oooooo
  • Heading 2 Text Size:
    • Desktop: 5vw
    • Tablet: 11vw
    • Phone: 13vw
  • Heading 2 Line Height:
    • Desktop: 4.3vw
    • Tablet: 9vw
    • Phone: 10.5vw

style the heading of the text module

Filters

Move on to the filters settings and add a screen blend mode.

  • Blend Mode: Screen

blend mode - screen

Add 2nd Text Module to Column 1

Continue by adding the second text module to column 1 with some paragraph content of your choice.

add a text module to column one

Style the text module as follows:

Background

Add a white background color.

  • Background Color: White #fffffff

style the background of the text module

Text

Enter the design tab and adjust the text accordingly:

  • Text Font: Montserrat
  • Text Alignment: Justified
  • Text Color: Dark Grey #333333
  • Text Size:
    • Desktop: 0.8vw
    • Tablet: 2vw
    • Phone: 2.5vw
  • Text Letter Spacing: -0.04vw
  • Text Line Height:
    • Desktop: 2.7vw
    • Tablet: 5.5vw
    • Phone: 6vw

style the text in module two

Spacing

Adjust the spacing settings as well to create empty space around the text.

  • Top and Bottom Margin: 0.5vw
  • Top and Bottom Padding:
    • Desktop: 5vw
    • Tablet + Phone: 15vw
  • Left Padding: 5vw
  • Right Padding:
    • Desktop: 5vw
    • Tablet + Phone: 25vw

spacing of second text module

Filters

Last but not least, apply a screen blend mode in the filters tab.

  • Blend Mode: Screen

blend mode screen text module 2

Add 3rd Text Module to Column 1

To complete the column design, add a third text module with some CTA copy. We’re using this entire module as a button.

add a third text module

Style the module as follows:

Add Link

Add a link of your choice in the link settings. As soon as someone clicks anywhere on the module, they’ll be redirected elsewhere.

add a link to the text module

Background

Style the background gradient to match the first text module.

  • Background: Gradient
  • Background Gradient Color One: #5498ff
  • Background Gradient Color Two: #16fff3
  • Gradient Direction: 235 deg

background of third module

Text

Enter the design tab and style the text as follows:

  • Text Font: Montserrat
  • Text Font Weight: Heavy
  • Text Font Style: Underlined
  • Text Underline Color: White #ffffff
  • Text Color: Black #000000
  • Text Size:
    • Desktop: 1.5vw
    • Tablet: 3.3vw
    • Phone: 4vw
  • Text Line Height: 1em

adjust text in module three

Spacing

Adjust the spacing settings to make the text fit better in the module.

  • Top and Bottom Padding:
    • Desktop: 2vw
    • Tablet: 6vw
    • Phone: 9vw
  • Left Padding: 3vw

spacing of module three

Duplicate 1st Column Twice

Once you’ve completed the first column, open the row settings and delete the second and third columns. Then, duplicate the first column twice. Of course, we’ll need to make some changes to the modules in column 2 and 3.

delete the second and third columns

duplicate the column

Column 2 / Text Module 1 Background

Change the first text module’s background into a different color gradient.
  • Background Gradient Color One: #c870ff
  • Background Gradient Color Two: #ff355a

adjust text module one in column two

Column 2 / Text Module 2 Box Shadow

Then, add an inner box-shadow to text module 2.
  • Box Shadow: Sixth Option
  • Box Shadow Blur Strength: 20px
  • Box Shadow Spread Strength: 17px
  • Box Shadow Color: rgba(225,33,255,0.06)

adjust the second text module on column two

Column 2 / Text Module 3 Background

Adjust the background gradient of the third text module to match the first module.

  • Background Gradient Color One: #c870ff
  • Background Gradient Color Two: #ff355a

module tree column two adjust

Column 3 / Text Module 1 Background

On to the third column! Change the gradient background of text module 1 accordingly:

  • Background Gradient Color One: #ff4800
  • Background Gradient Color Two: #fc9a2a

first module in column three

Column 2 / Text Module 3 Background

Use the same gradient background for the third text module.
  • Background Gradient Color One: #ff4800
  • Background Gradient Color Two: #fc9a2a

module three column three

Preview

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

Desktop

blend modes desktop preview

Mobile

blend modes gif responsive

It’s a Wrap

In this post, we showed you how to create a three-column design with a stunning blend effect using Divi’s column settings. We’ve combined module, column and row settings to achieve a beautiful outcome which you can use on any website you create. We hope this tutorial inspires you to create your own alternative designs as well. 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

Join To Download Today

Pin It on Pinterest