Video: How to Add a Drop Shadow to the Divi Theme

The Divi theme is one of the most popular WordPress themes on the marketplace. One of the reasons why it’s so popular is because you can easily use it to build any type of website without learning how to code.

Another reason why the Divi theme is so popular is the level of customization available with the theme. In this post, I will talk about customization effects in the Divi theme and show you how to add a drop shadow to any Divi theme module.

Divi Customization Effects

As of version 3.0, the Divi theme offers a ton of new design options on top of the usual font and color choices. What’s more, each of those effects can be applied on any module as well as any section and any row. You can use these options to spice up your website and make it unique. Let’s take a look at each of those options below.

Dividers

Dividers allow you to make a nice-looking transition between different sections on your page. You can add top and bottom dividers and adjust their color as well as the height. There’s a variety of designs to choose and as you can see, this effect can really make a particular section stand out even more and give it a unique look.

Border

You can add a border around the entire row, section or individual module. The options allow you to choose whether you want border all around the element or only on top, bottom, left or right.

As you can see from the screenshot, you can also adjust the width of each individual border so you can get creative and add cool accents to your modules. The border settings include different border styles such as dotted, dashed, solid, groove, and many more. You can also set rounded corners on the border and customize the border colors.

Filters

If you use a lot of images on your website, this next design tweak is for you. You can apply various filters to your website photos and achieve an interesting look. The options allow you to play with hue, saturation, contrast, and more.

You can also adjust these filters to look and behave differently when someone hovers over the image in question. Lastly, the filters also come with the blend mode control options to adjust how this module blends with any layers beneath it.

Animation

Another interesting design tweak that comes with the Divi theme is the animation option. Thanks to the animation option, you can animate your sections, rows, and individual modules.

Several animation styles are available which include fade in, slide in, rotate, and more. You can adjust the option for each animation, including how long it lasts, the speed, the delay, and other options depending on the animation style you’ve chosen.

Drop Shadow

Finally, you can add a drop shadow to sections, rows, and modules. Adding a drop shadow to your Divi theme modules allows you to draw the attention to that particular module. It makes it stand out from the rest of the website so it’s a good idea to add it to your call to actions, testimonials or even product listings. Since my WooCommerce tutorial that uses drop shadow, a lot of you have requested this tutorial so here it is.

How to Add Drop Shadow to Divi Theme

As mentioned eariler, version 3 of the Divi theme finally made it possible to add drop shadows without having to rely on the CSS method. I will show you how you can use the default settings in the Divi theme to enable this effect.

Start by going to your pages and then either edit and existing page or create a new page with Divi.

Add whatever modules you want to have on the page. In this example, I’ve added a simple testimonial module to work with.

Click on the settings icon for the testimonial module and then click the Design tab. Scroll down to the Box Shadow and choose from one of the premade drop shadows. You can then play around with the options.

The options allow you to control how far away the shadow is from the main element, adjust the blur of the shadow, and adjust the size of the shadow. You can also set a color for it and choose whether you want the shadow to display on the outside or on the inside of the element.

How to Add Drop Shadow to Divi Theme Manually

As you can see, the Divi theme makes it easy to add drop shadow to any module on your site. However, if you prefer to do it manually, I have a video that shows you how you can do it.

As mentioned in the video, you will need to add this bit of code to the CSS settings of the module:

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

Be sure to paste it in the main element CSS box.

When and How to Add Drop Shadow and Other Design Tweaks to Divi Theme

The Divi theme makes it incredibly easy to add unique effects and tweaks to your website without having to learn how to code. However, don’t get carried away and enable all of the tweaks on a singular element as that will make your website look busy and will probably turn a lot of visitors off.

Feel free to experiment with different tweaks such as the drop shadow but make sure you stick to one or two effects at one time. For example, pairing a drop shadow with an animation will product a nice effect while pairing a drop shadow with a divider on an entire row will make it seem like there is too much going on.

Final Thoughts

The Divi theme offers a plethora of customization options under the hood. When you apply a little custom CSS, you can achieve a truly custom design for your website or online store. Use this tutorial to make your modules stand out more by adding a subtle drop shadow

Like This Article?

I have tons of great free content and giveaways! Join 10,000+ others and get access to coupons, freebies, and other great wordpress tips and tricksfor your wordpress website!

Leave a Comment

Your email address will not be published. Required fields are marked *