How to Stunningly Combine Divi’s Column & Module Backgrounds with Blend Modes

With all various Divi built-in options and regular feature updates, the quality of the websites designs you create can go up quickly. One of the feature updates that was long expected was the filters and blend modes one. We’ve already shared some great examples that you can recreate and we’d like to add one to that list; how to stunningly combine Divi’s column and module backgrounds. Blend modes work like layers do within Photoshop; once you apply a blend mode to a module, for instance, the blend mode will include the next thing it comes across, which is in this case, is a column. To show you how that works, we’re going to recreate a stunning example that you can use for any kind of website.

Result

Before we dive into the tutorial, let’s take a look at the example we’ll show you how to recreate, step by step.

On Desktop

blend modes

On Tablet

blend modes

On Mobile

blend modes

Add a Row

Column Structure

Start by opening or creating a new page, adding a standard section and a row with three equal columns.

blend modes

Column 1 Gradient Background

Each one of the columns of this row will need its own gradient background. You can choose whichever gradient background (or background image) you’d like to add to your column. But if you want to achieve the same result as the example, use the following gradient background for the first column:

  • First Color: rgba(140,170,3,0.34)
  • Second Color: rgba(0,0,0,0)
  • Column 1 Gradient Type: Linear
  • Column 1 Gradient Direction: 205deg
  • Column 1 Start Position: 29%
  • Column 1 End Position: 11%

blend modes

Column 2 Gradient Background

The second column makes use of the following gradient background:

  • First Color: rgba(12,113,195,0.34)
  • Second Color: rgba(0,0,0,0)
  • Column 2 Gradient Type: Linear
  • Column 2 Gradient Direction: 180deg
  • Column 2 Start Position: 45%
  • Column 2 End Position: 42%

blend modes

Column 3 Gradient Background

The last column needs the following settings:

  • First Color: rgba(19,0,147,0.34)
  • Second Color: rgba(0,0,0,0)
  • Column 3 Gradient Type: Linear
  • Column 3 Gradient Direction: 156deg
  • Column 3 Start Position: 29%
  • Column 3 End Position: 11%

blend modes

Sizing

Once you’re done with the column gradient backgrounds, move on to the Design tab, open the Sizing subcategory and enable the ‘Make This Row Fullwidth’ option.

blend modes

Spacing

Move on to the Design tab and apply the following custom padding to your row:

  • Top: 27px
  • Right: 50px
  • Bottom: 35px
  • Left: 50px

blend modes

Border

Lastly, we’ll need a border for our row as well. Begin by assigning the following settings to the left and right border styles:

  • Border Width: 4px
  • Border Color: #b4e6df
  • Border Style: Double

blend modes

Move on to the top border style, add the same border width and border style but use ‘#ebe68d’ as your border color instead.

blend modes

The bottom border style is using the ‘#c58fdf’ color code for its border color.

blend modes

Add a Text Module

Add Title & Content

Now that you’ve finished your row settings, it’s time to move on to adding a Text Module. We’ll be creating this Text Module once, cloning it afterwards and place it in the two remaining columns. The first thing you’ll need to do after adding a Text Module to the first column of your row is adding some text to the content box; one heading and a paragraph.

blend modes

Background Color

Then, open the Background subcategory and use ‘#e0d9ce’ as your background color.

blend modes

Text Settings

Move on to the Design tab and use the following settings for the Text subcategory:

  • Text Font: Amiko
  • Text Font Weight: Regular
  • Text Size: 13px
  • Text Color: #8A8680
  • Text Letter Spacing: 3px
  • Text Line Height: 1.9em
  • Text Orientation: Center

blend modes

blend modes

Heading Text Settings

For the heading text of your Text Module, choose the following settings:

  • Heading Font: Amiko
  • Heading Font Weight: Regular
  • Heading Text Alignment: Center
  • Heading Text Size: 29px
  • Heading Text Color: #8A8680
  • Heading Line Height: 3em

blend modes

Spacing

The custom margin and padding you apply to your Text Module give different results on desktop, tablet and phone. That’s why it’s necessary to make sure these values match each one of the options. It’ll help you keep the same look and feel wherever your visitors might be getting in touch with you. The custom margin and padding you need to use for your Text Module is the following:

  • Top Margin: -100px
  • Bottom Margin: -130px (Desktop), 100px (Tablet & Phone)
  • Custom Padding: 150px
  • Right: 30px
  • Bottom: 150px
  • Left: 30px

blend modes

Border

Next, open the Border subcategory and use ‘4px’ for all of the corners.

blend modes

Box Shadow

Then, open the Box Shadow subcategory and use the following settings for it:

  • Box Shadow Horizontal Position: 0px
  • Box Shadow Vertical Position: 2px
  • Box Shadow Blur Strength: 18px
  • Box Shadow Spread Strength: 0px
  • Shadow Color: rgba(0,0,0,0.3)

blend modes

Filter

Last but not least, enable a blend mode on your Text Module. This will make your Text Module blend nicely with your column gradient background. For this example, we’ve chosen ‘Color Dodge’.

blend modes

Clone Text Module Three Times & Place in Remaining Columns

Clone the Text Module you’ve just created twice and place them in the two remaining columns. The only thing that’ll need to be changed is the custom margin of the Text Module.

Change Spacing Subcategory of Second Text Module

Change the Custom Margin on tablet and phone, while keeping the desktop version the way it is, to:

  • Top: -100px
  • Bottom: 130px

blend modes

Change Spacing Subcategory of Second Text Module

The second Text Module needs some different Custom Margin values for tablet and phone as well:

  • Top: -100px
  • Bottom: -130px

blend modes

Result

We’re done! Let’s take a final look at the result we’ve shown you how to recreate on all screen sizes.

On Desktop

blend modes

On Tablet

blend modes

On Mobile

blend modes

Final Thoughts

In this post, we’ve shown you how to combine column backgrounds and modules with blend modes to obtain advanced and unique results. You can use this design on any type of website to empower your website’s design and draw the attention of your visitors. If you have any questions or suggestions; make sure you leave a comment in the comment section below!

Featured Image by VectorsMarket / shutterstock.com

The post How to Stunningly Combine Divi’s Column & Module Backgrounds with Blend Modes appeared first on Elegant Themes Blog.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: