Are you struggling to remove the text shadow in your Divi Slider Module or Full Width Slider Module? You’re not alone! Many Divi users find it challenging to get rid of the default text shadow, which can sometimes interfere with the overall design and readability of your slides. The good news is that it’s entirely possible to remove this shadow, and it’s easier than you might think. In this comprehensive guide, we’ll walk you through two simple methods to eliminate the text shadow—whether you prefer to stick with Divi’s built-in options or use a bit of custom CSS. By the end of this tutorial, you’ll have the tools you need to create a clean, shadow-free look for your slider text. Let’s dive in!

1. Remove Text Shadow of Divi Slider Modules without CSS

If you’re here, you’ve probably already tried to remove the text shadow using Divi’s visual builder and found it to be quite tricky. While it might seem impossible at first, there’s actually a straightforward method to get rid of that shadow, even if it’s not immediately obvious.

Here’s how you can do it:

• Open the Slider module settings by clicking the cogwheel icon in the Visual Builder.
• Scroll down and expand the Text tab.
• Select one of the five available Text Shadow styles. Important: Do not select the first option, “No Divi slider box shadow.” This might seem counter-intuitive, but trust the process.
• Next, scroll down to the Text Shadow Color option and set it to transparent using the color code rgba(0,0,0,0).
• And there you have it! The text shadow in your Divi slider is now gone.
• To apply these settings to all your sliders across your site, right-click on the Text heading and select “Apply Styles to Active Preset.”

By following these steps, you’ll be able to achieve a clean, shadow-free look for your slider text.

Slider Design Settings

Read More: How to add a Call To Action Button to Divi Menu

2. Remove Text Shadow of Divi Slider Modules with a CSS snippet

If you’re more inclined towards using custom code, here’s a simple CSS snippet you can add to your Divi theme settings. This snippet targets both the regular Slider module and the Full Width Slider module, ensuring that the text shadow is removed from titles and body text. Just navigate to Divi > Theme Customizer > Custom CSS and paste the following code:

/* Removing the text shadow of Divi slider modules */

.et_pb_slide_description {
text-shadow:none !important;
}

This piece of code effectively eliminates any text shadow, giving your slider elements a cleaner and more polished appearance.

Adding CSS to the Theme Customizer

3. Remove Text Shadow of Divi Slider Modules  in specific pages and modules

If you’re looking to remove the text shadow specifically from one page or just a single slider module instead of applying changes site-wide, there’s a simple solution for that too. Instead of altering your entire website, you can target specific pages or modules to remove the text shadow effect.

For individual pages, you can add a CSS snippet directly to that page’s CSS. This allows you to customize the appearance without affecting other parts of your site.

If you only want to remove the text shadow in one particular slider module, you can do so easily within the Divi Builder. Simply open the settings for the module, navigate to the Advanced tab, and find the Custom CSS section. In the fields provided for “Slide Title” and “Slide Description,” insert the snippet: text-shadow:none !important;   

This targeted approach ensures that only the specified slider module is affected, leaving the rest of your site untouched.

Full Width Slider Advanced Settings

Read More: How To Secure WordPress/Divi Website Without Plugins

Wrapping Up:

After following the steps outlined in this guide, you should now have a clear understanding of how to remove the text shadow from your Divi Slider Modules. Whether you opted for the straightforward method within Divi’s visual builder or chose to implement custom CSS, you’ve taken a significant step towards enhancing the appearance and readability of your sliders.

By eliminating the text shadow, you’ve achieved a cleaner and more professional look for your website’s slides, ensuring that your content stands out without any distracting visual elements. Whether you made site-wide changes or targeted specific pages and modules, the result is a polished design that aligns with your aesthetic preferences.

Remember, mastering these techniques not only improves the visual appeal of your sliders but also enhances the overall user experience on your website. With your newfound knowledge, you’re better equipped to customize and optimize your Divi Slider Modules to suit your needs and preferences.

So go ahead, experiment with these methods, and unleash the full potential of your Divi website. Here’s to creating stunning, shadow-free sliders that captivate your audience and elevate your online presence!

Read More: Basics of Divi Responsive Design