Step by step instructions to Add a Soft Box Shadow to Your Divi Slider Module

One of the simplest and best approaches to add profundity to a plan is to add a container shadow. In the present instructional exercise, we’re demonstrating how to style a smooth slider box with a delicate box shadow. Try to add a thick light line to cause to notice the edges. This plan is unpretentious yet exquisite and can undoubtedly be changed to fit pretty much any sort of website.

Let’s plunge in!

Sneak Peek

Here is a brief glance at the plan we’ll work in this tutorial.

Download the Layout for FREE

To lay your hands on the plans from this instructional exercise, you will initially have to download it utilizing the catch underneath. To access the download you should buy in to our Divi Daily email list by utilizing the structure underneath. As another endorser, you will get considerably more Divi goodness and a free Divi Layout pack each Monday! On the off chance that you’re effectively on the rundown, basically enter your email address beneath and click download. You won’t be “resubscribed” or get extra emails.

To import the part format to your Divi Library, explore to the Divi Library.

Click the Import button.

In the movability popup, select the import tab and pick the download document from your computer.

Then click the import button.

Once done, the segment design will be accessible in the Divi Builder.

Let’s get to the instructional exercise, will we?

What You Need to Get Started

To begin, you should do the following:

1. If you haven’t yet, install and actuate the Divi Theme.
2. Create another page in WordPress and utilize the Divi Builder to alter the page toward the front (visual builder).
3. Choose the choice “Build From Scratch”.

After that, you will have a fresh start to begin planning 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

Designing the Row

Once the segment is done, add a one-segment line to the section.

Then update the column cushioning as follows:

• Padding: 0px top, 0px bottom

Part 2: Designing the Slider with a Soft Box Shadow

Now that our line is set up, we are prepared to begin planning the slider.

Add another slider module to the row.

The Slider Background

Then update the foundation with a hazy white color.

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

Navigation and Title Design Settings

Under the plan 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 (work area), 38px (tablet), 28px (phone)
• Title Line Height: 1.2em
• Title Text Shadow: see screenshot
• Title Text Shadow Color: transparent

Body Text Design

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

Button Design

Next, update the catch plan as follows:

• Button Text Size: 20px (work area), 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)

Padding and Border

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

Box Shadow

Now the time has come to add a delicate box-shadow to our slider. This will give it an unpretentious profundity 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)

Final Result

Now let’s look at that last result.

Final Thoughts

Well, that is it! Presently you realize how to make an exquisite slider with a delicate box-shadow. Expectation you can utilize this instructional exercise, and go ahead and post your employments of it in the comments!

I anticipate hearing from you in the comments.

Cheers!

.inline-code{padding: 0px 4px; shading: red; text style family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!important} video.with-line {border-sweep: 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 showed up first on Elegant Themes Blog.