This post is part 3 of 5 in our mini series titled 5 Interesting Ways to Style Divi’s Slider Module. Stay tuned for all five unique examples of the slider module and tutorials on how to achieve them!


In today’s slider tutorial we’re going to change the slider animation to slide in from the right. We’ll also be styling a sleek slider box with a soft box shadow. This design is subtle but elegant and can easily be tweaked to fit just about any kind of website.

Let’s dive in!

Today’s Before & After: The Divi Slider Module

For our before image I’ve added a background and some dummy text ahead of time, but not changed any of the default settings in the modules themselves.

screen-shot-2016-10-26-at-5-43-35-pm

We’ll end up with a fullscreen header and stylized box slider and a nice new effect for the slides.

screen-shot-2016-10-26-at-11-48-11-pm

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

Subscribe To Our Youtube Channel

The Concept & Inspiration

box-shadow-mood

As I approached this design I wanted to play with depth. One of the easiest and most effective ways to do that in web design is to add a shadow–which is what I ended up doing. I also added a thick border to draw attention to the edges and give me a design element to add to the section. By adding the two matching border lines to the top and bottom of the section it feels less like a slider trick/hack and more like a finished design.

Preparing the Design Elements

For this particular layout only one background image is needed. I got mine from pexels.com and made sure it was sized 1920px wide by 1280px tall. Everything else we do in this will be design settings in Divi and a bit of CSS.

Something else you can do that may help you focus is collect some assets together in one spot to help you as a design reference, something quick and simple like this.

Implementing the Design with Divi

In the sections below I’m going to walk you step by step through the process of creating the slider design concept above. I’ll be working on the backend builder because that’s what I’m most used to, but you can do everything in the frontend editor if that is your preference–as seen in the video above.

The Section Settings

We’re going to start with a standard 1-column section and add a slider module to it.

screen-shot-2016-10-16-at-11-17-48-am

Next we’ll change some settings in the section module itself.

For the Section General Settings I upload my background image and specify some top and bottom padding, top: 100px bottom: 150px

screen-shot-2016-10-26-at-9-32-41-pm

screen-shot-2016-10-26-at-9-33-02-pm

In the Section Custom CSS Settings I’m adding some CSS and I’m assigning an ID to the section (I’ll explain why in a bit). I’m using the name “box-slider” but you can use whatever you’d like.

screen-shot-2016-10-26-at-10-07-52-pm

Main Element – I’m setting this section to be fullscreen and I’m adding a thick colored border at the top and bottom. This part is totally optional, I just think this particular layout is nice as a fullscreen header. Remember to change the color hex code to whatever you’d like.

border-top: 20px solid #73a0a0;
border-bottom: 20px solid #73a0a0;
min-height: 100vh;

 

No changes are needed for the row settings.

The Slider Module Settings

For the Slider Module General Settings set the following:

  • hide arrows
  • show controls: yes
  • automatic animation: on
  • animation speed set to 7000
  • continue automatic slide on hover: on
  • remove inner shadow: yes

For the Slider Module Advanced Design Settings the color you see being used is #73a0a0

box-slider-settings-tiny

For the Slider Module Custom CSS Settings add the following code:

Main Element – Here I’m adding the thick box border and a soft box shadow.

border: 15px solid #73a0a0;
box-shadow: 0px 0px 30px #7f7f7f;

 

Slide Description – This is changing the slide animation to slide in from the right as well as aligning the text to the left since default is center-aligned when not using a slide image. I’m also adjusting the padding because the default 16% on top and bottom I feel is just a tad much for this look.

animation-name: fadeInRight;
text-align: left;
padding: 12% 8%;

 

Slide Title – Aligning the title to the left instead of default center.

text-align: left;

 

Slide Button – Aligning the button to the left and changing the border look. I’m adding some extra margin to create some more breathing room above the dot controllers.

text-align: left;
border-top: none;
border-right: none;
border-bottom: none;
margin-bottom: 25px;

 

Slide Controllers – Just some more breathing room for design purposes, totally optional.

padding-top: 25px;
padding-bottom: 25px;

 

The Slide Settings

For the slide General Settings see below, the opaque cream you see is rgba(235,234,230,0.8).

screen-shot-2016-10-26-at-11-44-42-pm

For the slide Advanced Design Settings see below, the color I’m using is #73a0a0 and the header font sizes are Desktop: 46 / tablet and smartphone: 30

screen-shot-2016-10-26-at-11-00-51-pm

Finishing Up with the CSS

Remember how we assigned the ID “box-slider” to the section in the very beginning? Here’s where we’re going to use that ID. Using this ID will ensure this CSS only applies to this slider. It’s a very minor change, we’re just making the dot controllers bigger. While the modules can handle most code snippets this one didn’t take, but we can put it in our child stylesheet or the Divi Options custom CSS panel. Or if you’re fine with the smaller dots you can leave this out altogether.

#box-slider .et-pb-controllers a {
    width: 16px;
    height: 16px;
}

And that’s it! You’ve now got a fullscreen header with an elegant slider box. Hope you can make some great use of this tutorial, and feel free to post your uses of it in the comments!

Tomorrow: How to Style the Divi Slider with Static Description Text

Sometimes you may want to have a slider with changing background images but text and a call to action that never changes. In tomorrow’s post I’ll show you how to do just that! See you then!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

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

Powered by WPeMatico

Canadian Web Hosting [Ad]

Canadian Web Hosting [Ad]