How To Remove Text Shadow In Divi Slider Modules

2021-09-07 | Divi, Tutorials | 6 comments

Can't find the toggle to remove text shadow in the Divi Slider module? Well, it's kind of hard to figure out, but here are two quick ways to hide the box shadow.
Skribent: Victor Duse
By Victor Duse

If you want to remove the text shadow in a Divi Slider Module or a Divi Fullwidth Slider Module, you might have noticed that it seems impossible. But it’s not! Here are two quick ways to hide the text shadow – without or with custom CSS. Updated 2021-09-06.

Free course: Create a Website with WordPress and Divi

Before (with text shadow)

Divi slider module with text shadow

After (without text shadow)

1. Remove text shadow without CSS (recommended)

Since you are here, you have probably already tried to remove the text shadow in the Divi visual builder. Even though it seems impossible, there is actually an easy way, even if it’s not the most intuitive one.

 

  1. Start by opening the Slider module settings by clicking the slider module cogwheel in the Visual Builder.
  2. Scroll down and expand the Text tab.
  3. Choose one of the five Text Shadow styles available. Important: do not choose the first No Divi slider box shadow option. Yes, this step is counter-intuitive but just hang on, I promise that it will work.
  4. Scroll down to Text Shadow Color and set it to transparent: rgba(0,0,0,0)
  5. Voilà. You have just removed the text shadow in the Divi slider.
  6. Right click the Text heading and click Apply Styles To Active Preset to apply the settings to all your sliders, site-wide.
Remove text shadow in the Divi slider

2. Remove text shadow with a CSS snippet

Do you prefer custom code instead? Add the following CSS snippet to Divi > Theme Customizer > Custom CSS. It will remove the text shadow from titles and body text in both the regular Slider module and the Fullwidth Slider module:

/* Remove text shadow in Divi slider modules */

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

How to remove text shadow in specific pages and modules

The method above will remove the text shadow from all Divi slider modules (including the fullwidth slider module) site wide.

If you just want to remove text shadows for a single page, just add the CSS snippet to the page CSS instead.

If you want to remove text shadows in a single slider module, just open the module settings in the Divi Builder and go to Advanced > Custom CSS and just add text-shadow:none !important; in the fields for “Slide Title” and “Slide Description”.

Hide the text shadow in a specific slider module only.

Bonus: Change text shadow style with the Divi Builder

Do you want to keep the text shadow but change the shadow style? That’s easy! Just change the text shadow style in the Divi Visual Builder settings. Go to the Slider Module Design tab and go to Text > Shadow.

However, this will only apply if you don’t remove all slider text shadows by using the CSS snippet above.

Text shadows settings in Divi Builder

Default text shadow is still displayed after choosing none.

Related posts

6 Comments
  1. Very helpful! Thank you!

    Reply
  2. Great article. Thanks and keep sharing such type of helpful stuff!

    Reply
  3. Very helpful, thank you so much!

    Reply
    • Thanks Judith, I glad it helped! 🙂

      Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.