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
Mobile
Second Example
Desktop
Mobile
Third Example
Desktop
Mobile
Fourth Example
Desktop
Mobile
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:
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.
Spacing
Then, move on to the Design tab. Add β200pxβ to the top margin and β150pxβ to the bottom padding of the first column.
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%β.
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.
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 Shadow
Visibility
Lastly, go to the Advanced tab and disable the Image Module on mobile.
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
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.
Second Example
Next, we have the second example which looks like this on desktop:
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%
Sizing
Move on to the Design tab and enable the βMake This Row Fullwidthβ option.
Spacing
Lastly, add a top padding of β200pxβ to the second column.
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.
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
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:
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.
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%
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
Sizing
Next, add the following Width to the Image Module:
- Desktop: 85%
- Tablet & Phone: 100%
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
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
Fourth Example
And finally; the last example that weβll show you how to recreate looks like this:
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%
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
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.
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
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
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
Got nothing to say but SUPAH COOL!!!!
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! π
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.
The last example is pretty cool!
Great to have examples and tutorials for all these new features.
Thanks Donjete.