(202) 750-1910
  • Facebook
  • X
  • Instagram
  • TikTok
  • Yelp
  • Google
  • Pinterest
  • WhatsApp
  • Threads
  • Facebook
  • X
  • Instagram
  • TikTok
  • Yelp
  • Google
  • Pinterest
  • WhatsApp
  • Threads
0 Items
Ask the Egghead, Inc.
  • Home
  • About
    • Reviews
    • Awards
    • Careers
    • Partners
    • Systems Status
  • Services
    • Website Design
    • Managed Hosting
    • Accessibility Compliance
    • Content Builder
    • Multi-Language Websites
    • SEO
    • Social Media
    • Premier Property Promotion
    • Reputation & Review Management Services
    • Low Code/No Code Solutions for MVP Development
    • Citation Builder
    • Pricing
    • Get A Quote
  • Portfolio
  • Website Audit
  • Blog
  • Invest Local
  • Contact
Select Page

How to Add a Soft Box Shadow to Your Divi Slider Module

divi-soft-box-shadow-slider

One of the easiest and most effective ways to add depth to a design is to add a box shadow. In today’s tutorial, we’re going to show you how to style a sleek slider box with a soft box shadow. The trick is to add a thick light border to draw attention to the edges. This design is subtle but elegant and can easily be tweaked to fit just about any kind of website.

Let’s dive in!

Sneak Peek

Here is a quick look at the design we’ll build in this tutorial.

divi notification box

Once done, the section layout will be available in the Divi Builder.

Let’s get to the tutorial, shall we?

What You Need to Get Started

expanding corner tabs

To get started, you will need to do the following:

  1. If you haven’t yet, install and activate the Divi Theme.
  2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
  3. Choose the option “Build From Scratch”.

After that, you will have a blank canvas to start designing in Divi.

Creating a Unique Slider Design with a Soft Box Shadow in Divi

Part 1: Designing the Section and Row for the Slider

Designing the Section

  • Add Background Image (about 1920px by 1080px)
  • Padding: 18vh top, 18vh bottom

divi slider with soft box shadow

Designing the Row

Once the section is done, add a one-column row to the section.

divi slider with soft box shadow

Then update the row padding as follows:

  • Padding: 0px top, 0px bottom

divi slider with soft box shadow

Part 2: Designing the Slider with a Soft Box Shadow

Now that our row is in place, we are ready to start designing the slider.

Add a new slider module to the row.

divi slider with soft box shadow

The Slider Background

Then update the background with a semi-transparent white color.

  • Background Color: rgba(255,255,255,0.75)

divi slider with soft box shadow

Navigation and Title Design Settings

Under the design tab, update the following:

  • Arrow Color: #776cb1
  • Dot Navigation Color: #776cb1
  • Title Font: Raleway
  • Title Font Weight: Ultra Bold
  • Title Text Color: #000
  • Title Text Size: 65px (desktop), 38px (tablet), 28px (phone)
  • Title Line Height: 1.2em
  • Title Text Shadow: see screenshot
  • Title Text Shadow Color: transparent

divi slider with soft box shadow

Body Text Design

  • Body Font Weight: Bold
  • Body Text color: #666
  • Body Text Size: 18px (desktop), 16px (tablet), 14px (phone)
  • Body Line Height: 1.8em
  • Body Shadow: See screenshot
  • Body Text Shadow: transparent

divi slider with soft box shadow

Button Design

Next, update the button design as follows:

  • Button Text Size: 20px (desktop), 18px (tablet), 16px (phone)
  • Button Text Color: #776cb1
  • Button Background Gradient Left Color: #776cb1
  • Button Background Gradient Right Color: rgba(255,255,255,0.7)
  • Gradient Direction: 90deg
  • Start Position: 7%
  • End Position: 0%
  • Button Border width: 0px
  • Button Border Radius: 0px
  • Button Letter Spacing: 3px
  • Button Font Weight: Bold
  • Button Font Style: TT
  • Button Margin: 10%
  • Button Padding: 1em (top and bottom)
  • Button Box Shadow: see screenshot
  • Shadow Color: rgba(0,0,0,0.11)

divi slider with soft box shadow

Padding and Border

  • Padding (desktop and tablet): 8vh top, 8vh bottom, 5% left, 5% right
  • Padding (Phone): 8% top, 8% bottom, 5% left, 5% right
  • Border Width: 15px
  • Border Color: #fff

divi slider with soft box shadow

Box Shadow

Now it is time to add a soft box-shadow to our slider. This will give it a subtle depth to the design.

  • Box Shadow: see screenshot
  • Box Shadow Vertical Position: 0px
  • Box Shadow Horizontal Position: 78px
  • Box Shadow Spread Strength: -20px
  • Shadow Color: rgba(0,0,0,0.5)

divi slider with soft box shadow

Final Result

Now let’s check out that final result.

divi slider with soft box shadow

Final Thoughts

Well, that’s it! Now you know how to create an elegant slider with a soft box-shadow. Hope you can make some great use of this tutorial, and feel free to post your uses of it in the comments!

I look forward to hearing from you in the comments.

Cheers!

.inline-code{padding: 0px 4px; color: crimson; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!important} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);display:block;margin: 0 auto;}

The post How to Add a Soft Box Shadow to Your Divi Slider Module appeared first on Elegant Themes Blog.

Recent Posts

  • Busting the Biggest WordPress Myths

    Busting the Biggest WordPress Myths

  • You’re Not Too Small for a Great Website

    You’re Not Too Small for a Great Website

  • Top Web Design Trends to Watch in 2025

    Top Web Design Trends to Watch in 2025

  • Lock Down Your Site: WordPress Security Made Easy

    Lock Down Your Site: WordPress Security Made Easy

  • Is It Time to Redesign Your Website?

    Is It Time to Redesign Your Website?

  • Don’t Ignore These Website Pages

    Don’t Ignore These Website Pages

  • AI Tools in Web Design: Hype vs. Real Help

    AI Tools in Web Design: Hype vs. Real Help

  • How to Make Your Website Feel Brand New Again

    How to Make Your Website Feel Brand New Again

  • No Leads? Here’s Why (And How to Fix It)

    No Leads? Here’s Why (And How to Fix It)

  • 7 Website Mistakes That Hurt Your Business

    7 Website Mistakes That Hurt Your Business

Awards

  • Clutch Top Web Design Company Medical Websites 2024

    Clutch Top Web Design Company Medical Websites 2024

  • Clutch Top Web Design Company Government Websites 2024

    Clutch Top Web Design Company Government Websites 2024

  • UpCity National Excellence Winner 2024

    UpCity National Excellence Winner 2024

  • UpCity National Excellence Winner 2023

    UpCity National Excellence Winner 2023

  • UpCity National Excellence Winner 2022

    UpCity National Excellence Winner 2022

  • UpCity Local Excellence Washington DC 2021

    UpCity Local Excellence Washington DC 2021

  • UpCity Top Designer 2021

    UpCity Top Designer 2021

  • DesignRush Accredited Agency 2021

    DesignRush Accredited Agency 2021

  • Clutch Top Company Washington DC 2021

    Clutch Top Company Washington DC 2021

  • Digital.com Best SEO Firms Washington DC 2021

    Digital.com Best SEO Firms Washington DC 2021

Ask-the-Egghead-logo

Capability Statement

View/Download

Ask the Egghead

200 Massachusetts Ave NW
8th Floor Suite 133
Washington, DC 20001
(202) 750-1910

Ask the Egghead

399 Boylston Street
Suite 685
Boston, MA 02116
(617) 221-8300

Quick Links

  • Website Design
  • Social Media
  • SEO
  • Managed Hosting
  • Privacy Policy
  • Investors
  • Facebook
  • X
  • Instagram
Designed by The Egghead © 2015-2025 Ask the Egghead, Inc.