pixel

Sometimes just a little element makes a web page stand out and grab the attention of the reader. I saw a perfect example of this posted by Julie on the post Share Your Work  I am going to share with you a very easy CSS tip that will make images or sections pop off the page.

Example of adding box shadow CSS to an image:

how to add drop shadow to a picture or section in Divi

To get the look.

In the text module navigate to the Custom CSS tab.  Scroll down to the Main Element section and add this bit of CSS:

box-shadow: 0px 0px 30px #000000;

Example of adding box shadow CSS to a text module:

drop shadow behind main element

 

To get the look.

In the text module navigate to the CSS tab.  Scroll down to the Main Element section and add this bit of CSS:

box-shadow: 0px 0px 30px #000000;

Select the Advanced Design Settings.

Under Custom Padding (the last option) add 5% to each top, right, bottom, left.  By doing this you give a little buffer of white space between the text and the edge of the box.

I think that shading behind a section of text would work well for a quote or testimonial.

Let me know if you have any questions.  In the CSS code feel free to play with the color #000000 (black) and increase or decrease the 30 to get a look that you like.  With the 5%, modify that to suit your design.  If you are looking for a child theme that uses drop shadow, check out Tuwi

Happy designing.

 

 

 

 

 

EIleen Lonergan
Eileen Lonergan was an integral part of this company. Unfortunately, Eileen Passed away on the 31st of October 2018 after a short battle with Cancer. She leaves behind the legacy of the Divi Theme Users Group and hundreds of people that she helped through coaching, building outstanding websites and just being - accessible. We miss her every day!
Click to access the login or register cheese

Subscribe To Our Newsletter to get the latest news and product updates

You have Successfully Subscribed!

Pin It on Pinterest

Share This