How to Creatively Use Row Box Shadows with Divi

Last Updated on September 16, 2022 by 5 Comments

How to Creatively Use Row Box Shadows with Divi
Blog / Divi Resources / How to Creatively Use Row Box Shadows with Divi
Play Button

One of the most recent Divi updates was long-awaited; the integration of box shadows into sections, rows and modules. In this post, we’ll be focusing on how row box shadows can improve the overall look and feel of your website.

To illustrate the depth box shadows can bring to your website, we’ve created an example that we’ll show you how to recreate step by step.

Result

Desktop

The layout we’ll show you how to recreate looks like this on desktop:

box shadow

Mobile

And like this on mobile:

box shadow

How to Creatively Use Row Box Shadows with Divi

Subscribe To Our Youtube Channel

Header Format

The first thing you’ll have to do is choose the right Header Format. Go to your WordPress Dashboard > Customize > Header & Navigation > Header Format > And choose ‘Centered’ as the Header Style.
box shadow

Primary Menu Bar

Go back to Header & Navigation > Primary Menu Bar > And make the following adjustments:

  • Hide Logo Image: Enable
  • Menu Height: 211
  • Logo Max Height: 30
  • Text Size: 16
  • Letter Spacing: 2
  • Font: Lato Light
  • Font Style: Uppercase
  • Text Color: #FFFFFF
  • Active Link Color: #FFFFFF
  • Background Color: rgba(255,255,255,0)
  • Dropdown Menu Background Color: rgba(255,255,255,0)

box shadow

First Section

Once you’ve made the changes within the Theme Customizer, it’s time to get started with the layout. Create a new page, enable the Divi Builder and switch over to Visual Builder. Then, add a first standard section to the page.

Section Gradient Background

This section will need the following gradient background:

  • First Color: #ea2e7d
  • Second Color: #edd900
  • Gradient Type: Linear
  • Gradient Direction: 110deg
  • Start Position: 0%
  • End Position: 100%

box shadow

Spacing

Move on to the Design tab. Within the Spacing subcategory, use ‘100px’ for the top padding and ‘200px’ for the bottom padding.

box shadow

One-Column Row

Row Gradient Background

Continue by adding a one-column row to the section and make use of the following gradient background:

  • First Color: rgba(255,255,255,0)
  • Second Color: #ea2e7d
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 56%
  • End Position: 100%

box shadow

Column Gradient Background

Scroll down and use the following gradient background for the column of that row:

  • First Color: rgba(237,217,0,0.77)
  • Second Color: rgba(255,255,255,0)
  • Column Gradient Type: Linear
  • Column Gradient Direction: 180deg
  • Column Start Position: 0
  • Column End Position: 100

box shadow

Sizing

Go to the Design tab and make the following changes apply to the Sizing subcategory:

  • Use Custom Width: Yes
  • Custom Width: 27%

box shadow

Spacing

Then, use ’20px’ for the top, right, bottom and left Custom Padding of the row.

box shadow

Text Module

Once you’re done with the row settings, add a Text Module and use the following settings for the Text subcategory:

  • Text Font: Arvo
  • Text Font Size: 98px
  • Text Color: #FFFFFF
  • Text Letter Spacing: 32px
  • Text Line Height: 1.4em
  • Text Orientation: Center

box shadow

Second Section

Add another section right below the first section. This section will contain all the other rows that are present in the layout.

Section Gradient Background

Firstly, use the following gradient background for this section:

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

box shadow

Spacing

Next, go to the Design tab and add ‘100px’ to the bottom padding.

box shadow

First Two-Column Row

Row Background Color

Add the first two-column row to this new section and use ‘#dddddd’ as the background color.

box shadow

Column 1 Gradient Background

The first column will need the following gradient background:

  • First Color: #6ac922
  • Second Color: #b6c1b2
  • Column 1 Gradient Type: Linear
  • Column 1 Gradient Direction: 136deg
  • Column 1 Start Position: 23%
  • Column 1 End Position: 100%

box shadow

Column 2 Background Color

Scroll down and use ‘#dddddd’ as the Column 2 Background Color.

box shadow

Sizing

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

  • Use Custom Width: Enable
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

box shadow

Spacing

The Spacing subcategory will need the following padding and margin:

  • Top, Right, Bottom & Left Padding: 0px
  • Top Margin: -150px
  • Column 1 Top Padding: 235px (Desktop), 0px (Tablet & Phone)
  • Column 1 Bottom Padding: 235px (Desktop), 0px (Tablet & Phone)
  • Column 2 Top Padding: 150px
  • Column 2 Bottom Padding: 150px

box shadow

Box Shadow

Open the Box Shadow subcategory and use the following settings:

  • Box Shadow Horizontal Position: -3px
  • Box Shadow Vertical Position: -18px
  • Box Shadow Blur Strength: 77px
  • Box Shadow Spread Strength: 23px
  • Shadow Color: rgba(0,0,0,0.3)

box shadow

First Text Module

Then, add the first Text Module to the second column and use the following settings for the Text subcategory:

  • Text Font: Arvo
  • Text Font Size: 34px
  • Text Color: #7a7a7a
  • Text Orientation: Center

box shadow

Second Text Module

Add another Text Module but use the following settings instead:

  • Text Font: Lato Light
  • Text Orientation: Center

box shadow

Open the Sizing subcategory, use a Width of ‘75%’ and select the center Module Alignment.

box shadow

Lastly, add a top margin of ’50px’.

box shadow

Second Two-Column Row

Row Background Color

Add another two-column row to the section and choose ‘#b99bc1’ as its background color.

box shadow

Column 1 Background Color

Scroll down and choose ‘#dddddd’ for the Column 1 Background Color.

box shadow

Sizing

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

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

box shadow

Spacing

Next, use the following padding:

  • Top, Right, Bottom & Left Padding: 0px
  • Column 1 Top Padding: 150px (Desktop), 0px (Tablet & Phone)
  • Column 1 Bottom Padding: 50px (Desktop), 0px (Tablet & Phone)
  • Column 2 Top Padding: 150px
  • Column 2 Bottom Padding: 150px

box shadow

Box Shadow

Open the Box Shadow subcategory and use the following settings:

  • Box Shadow Horizontal Position: -4px
  • Box Shadow Vertical Position: 24px
  • Box Shadow Blur Strength: 77px
  • Box Shadow Spread Strength: 23px
  • Shadow Color: rgba(0,0,0,0.3)
  • Box Shadow Position: Outer Shadow

box shadow

First Image Module in First Column

Continue by adding a Image Module to the first column. After uploading the image, make the following settings apply to the Spacing subcategory:

  • Show Space Below The Image: Yes
  • Top Margin: -500px (Desktop), 0px (Tablet & Phone)
  • Right Margin: -50px (Desktop), 0px (Tablet & Phone)
  • Left Margin: 200px (Desktop), 0px (Tablet & Phone)

box shadow

Open the Box Shadow subcategory and use the following box shadow:

  • Box Shadow Horizontal Position: 2px
  • Box Shadow Vertical Position: 2px
  • Box Shadow Blur Strength: 0px
  • Box Shadow Spread Strength: 30px
  • Shadow Color: rgba(255,255,255,0.68)
  • Box Shadow Position: Outer Shadow

box shadow

Second Image Column in First Column

Add another Image Module to the same column and use the following margin:

  • Top Margin: -50px (Desktop), 0px (Tablet & Phone)
  • Right Margin: 100px (Desktop), 0px (Tablet & Phone)
  • Bottom Margin: 30px
  • Left Margin: 100px (Desktop), 0px (Tablet & Phone)

box shadow

Then, scroll down and make use of the following box shadow:

  • Box Shadow Horizontal Position: 2px
  • Box Shadow Vertical Position: 2px
  • Box Shadow Blur Strength: 0px
  • Box Shadow Spread Strength: 30px
  • Shadow Color: rgba(255,255,255,0.68)
  • Box Shadow Position: Outer Shadow

box shadow

Clone Text Modules & Place in Second Column

Lastly, clone the two Text Modules of the previous row and place them in the second column of this row. There’s only one thing you’ll have to change; the text color. Open each Text Module’s settings and change the text color into ‘#FFFFFF’.

Result

Desktop

All the steps within this post will lead to the following result on desktop:

box shadow

Mobile

And the following result on mobile:

box shadow

Final Thoughts

In this post, we’ve shown you how you can creatively use box shadows on rows. We’ve created a colorful example where you can clearly notice the depth box shadows give to a layout. 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 Dmitry Guzhanin / 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

Get a Free Chinese Restaurant Layout Pack For Divi

Get a Free Chinese Restaurant Layout Pack For Divi

Posted on June 10, 2024 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 a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Chinese Restaurant Layout Pack that’ll help you get your next Chinese...

View Full Post
Download a Free Spa Theme Builder Pack for Divi

Download a Free Spa Theme Builder Pack for Divi

Posted on June 7, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Spa Theme Builder Pack...

View Full Post
Get a Free Psychology Layout Pack For Divi

Get a Free Psychology Layout Pack For Divi

Posted on June 3, 2024 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 a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Psychology Layout Pack that’ll help you get your next Psychology website...

View Full Post

5 Comments

  1. center alignment of the rows does not work!

  2. Nice tuts

  3. Interesting.

  4. Thank you very much. Divi is growing up constantly and I am proud to use that theme for all my projects. Please, keep doing so great job.

  5. DIVI every time it gets better, I started using the shadows in the new design of my website, but this post goes further, thanks Donjete, as always an excellent and complete tutorial to do things with foundation, greetings from Asturias

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today