How to Combine Image Background & Box Shadow Options with Divi

Last Updated on September 16, 2022 by 5 Comments

How to Combine Image Background & Box Shadow Options with Divi
Blog / Divi Resources / How to Combine Image Background & Box Shadow Options with Divi
Play Button

In this Divi post, we’ll be showing you how you can combine the background and shadow options of an Image Module. This post is meant to stimulate your imagination and show you how new Divi features can work with existing ones–leading to creative results. To help you with the creative process, we’ve created 4 combinations which we’ll show you how to recreate step by step. Let’s take a look at the examples.

First Example

Desktop

image module

Mobile

image module

Second Example

Desktop

image module

Mobile

image module

Third Example

Desktop

image module

Mobile

image module

Fourth Example

Desktop

image module

Mobile

image module

How to Combine Image Background & Box Shadow Options with Divi

Subscribe To Our Youtube Channel

First Example

Now that we’ve shown you what you can expect from this post, let’s take a look at how you can recreate the following example with only a few steps within Divi and no additional CSS code:

image module

Add Two-Column Row

Column 1 Background Color

Add a two-column row to a standard section and choose β€˜rgba(12,113,195,0.11)’ as the Column 1 Background Color.

image module

Spacing

Then, move on to the Design tab. Add β€˜200px’ to the top margin and β€˜150px’ to the bottom padding of the first column.

image module

 

Add Image Module to First Column (Desktop & Tablet)

Sizing

Then, add an Image Module to the first column of the row you’ve created. This Image Module will apply to desktops and tablets only. The first thing you’ll need to do is change the Width to β€˜94%’.

image module

Spacing

Then, open the Spacing subcategory, enable the β€˜Show Space Below The Image’ option, add β€˜-150px’ to the top margin and β€˜-110px’ to the left margin of the image.

image module

Box Shadow

Scroll further down the tab and apply the following box shadow to the image:

  • Box Shadow Horizontal Position: 80px
  • Box Shadow Vertical Position: 80px
  • Box Shadow Blur Strength: 0px
  • Box Shadow Spread Strength: 6px
  • Shadow Color:Β rgba(173,173,173,0.79)
  • Box Shadow Position: Outer Shadowimage module

Visibility

Lastly, go to the Advanced tab and disable the Image Module on mobile.

image module

Clone Image Module (Phone)

Most of the settings that we’ve used for the desktop and tablet version of the Image Module are the same for the mobile version as well. That’s why we’re going to clone the Image Module and make some additional changes that’ll match the mobile screen.

Change Box Shadow

The first thing we’ll need to change is the box shadow. Instead of using the desktop settings, use the following settings instead:

  • Box Shadow Horizontal Position: 33px
  • Box Shadow Vertical Position: 78px
  • Box Shadow Blur Strength: 0px
  • Box Shadow Spread Strength: 6px
  • Shadow Color:Β rgba(173,173,173,0.79)
  • Box Shadow Position: Outer Shadow
    image module

Visibility

The next and last thing we’ll need to do is change the visibility of this second Image Module. Instead of disabling it on phone, go ahead and disable it on both tablet and desktop.

image module

Second Example

Next, we have the second example which looks like this on desktop:

image module

Add Two-Column Row

Row Gradient Background

Add a new two-column row to the section you’re working on and use the following gradient background for it:

  • First Color:Β rgba(237,240,0,0.55)
  • Second Color:Β rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 50.8%
  • End Position: 50.8%

image module

Sizing

Move on to the Design tab and enable the β€˜Make This Row Fullwidth’ option.

image module

Spacing

Lastly, add a top padding of β€˜200px’ to the second column.

image module

Add Image Module to First Column

Spacing

Once done with the row settings, go ahead and add an Image Module to the first column. Open the Spacing subcategory within the Design tab and add ’30px’ to the top, right, bottom and left padding.

image module

Box Shadow

Scroll down the same tab and use the following settings for the Box Shadow subcategory:

  • Box Shadow Horizontal Position: 0px
  • Box Shadow Vertical Position: 2px
  • Box Shadow Blur Strength: 56px
  • Box Shadow Spread Strength: 12px
  • Shadow Color:Β rgba(0,0,0,0.3)
  • Box Shadow Position: Outer Shadow

image module

Clone Image Module & Place in Second Column

The settings for the Image Module within the second column are the same. Go ahead, clone the Image Module and place it in the second column.

Third Example

Moving on, we’re going to show you how to achieve the following result:

image module

Add One-Column Row

Column 1 Background Color

Add a one-column row and choose β€˜rgba(193,145,163,0.6)’ as the background color of the first column.

image module

Add Image Module

Gradient Background Image

Then, add an Image Module to the column and use the following gradient background for it:

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

image module

Border

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

  • Use Border: Yes
  • Border Color: #000000
  • Border Width: 3px
  • Border Style: Solid

image module

Sizing

Next, add the following Width to the Image Module:

  • Desktop: 85%
  • Tablet & Phone: 100%

image module

Spacing

Then, open the Spacing subcategory and make the following padding and marign apply to the Image Module:

  • Left Margin: 80px (Desktop), 0px (Tablet & Phone)
  • Top, Right, Bottom & Left Padding: 30px

image module

Box Shadow

Lastly, add a box shadow with the following settings:

  • Box Shadow Horizontal Position: 0px
  • Box Shadow Vertical Position: 0px
  • Box Shadow Blur Strength: 0px
  • Box Shadow Spread Strength: 39px
  • Shadow Color:Β rgba(0,0,0,0.22)
  • Box Shadow Position: Outer Shadow

image module

Fourth Example

And finally; the last example that we’ll show you how to recreate looks like this:

image module

Add Two-Column Row

Start by adding a two-column row. This row will, unlike the previous examples we’ve handled in this post, not need any additional settings.

Add Image Module to First Column

Gradient Background

Add an Image Module to the first column of the row you’ve just created and use the following gradient background for it:

  • First Color:Β rgba(255,255,255,0)
  • Second Color:Β rgba(92,0,158,0.46)
  • Gradient Type: Linear
  • Gradient Direction: 138deg
  • Start Position: 55%
  • End Position: 55%

image module

Spacing

Then, move on to the Design tab and use the following settings for the Spacing subcategory:

  • Show Space Below The Image: Yes
  • Right Padding: 30px
  • Bottom Padding: 30px

image module

Add Second Image Module to First Column

Background Color

Continue by adding another Image Module right below the previous one and use β€˜rgba(96,96,96,0.42)’ as its background color.

image module

Spacing

Then, go to the Design tab and use the following settings for the Spacing subcategory:

  • Show Space Below The Image: Yes
  • Top Margin: -250px (Desktop), -150 (Tablet), -100 (Phone)
  • Right Margin: -150px (Desktop), 0px (Tablet & Phone)
  • Left Margin: 150px
  • Top Padding: 30px
  • Left Padding: 30px

image module

Box Shadow

Lastly, open the Box Shadow subcategory and use the following settings:

  • Box Shadow Horizontal Position: 0px
  • Box Shadow Vertical Position: 2px
  • Box Shadow Blur Strength: 0px
  • Box Shadow Spread Strength: 24px
  • Shadow Color:Β #e2e2e2
  • Box Shadow Position: Outer Shadow

image module

Final Thoughts

The examples we’ve shared in this post are just a fraction of how far you can go with Divi’s box shadow and background options. You can create unique designs using the Image Module that will enhance the overall look and feel of your website. 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 Creative Stall / shutterstock.com

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! πŸ‘‡

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow πŸ‘‡

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How πŸ‘‡

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

New Starter Site for Construction (Quick Install)

New Starter Site for Construction (Quick Install)

Posted on October 29, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post
Divi 5 Update: Public Alpha Version 2

Divi 5 Update: Public Alpha Version 2

Posted on October 28, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. As we progress towards the final release, we’ll update Divi 5 every two weeks, appearing as a standard update in your WordPress dashboard. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 2 today. We have...

View Full Post
Divi Plugin Highlight: DiviFlash

Divi Plugin Highlight: DiviFlash

Posted on October 27, 2024 in Divi Resources

DiviFlash, a powerful premium plugin, offers a suite of tools to help you easily create beautiful, professional Divi websites. From advanced modules and layout packs to customizable sections and more, DiviFlash lets you design websites that captivate and engage your audience. In this post,...

View Full Post

5 Comments

  1. Got nothing to say but SUPAH COOL!!!!

  2. Nice idea, but the more complex it gets, the less I think I’d use it. I’d rather perform the higher level of photo/image shadows and layers in photoshop or fireworks than have to use all the positioning and other settings. Now, if you could allow animation of the layers and shadows….then yea totally worth it. Regardless, yet another improvement on Divi, which is always welcomed! πŸ™‚

  3. hi, nice tips, thx.

    But there is a problem on second example. the the shadow affect the image not image+padding. I try with border but same results.

  4. The last example is pretty cool!

  5. Great to have examples and tutorials for all these new features.
    Thanks Donjete.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today