How to Style Divi’s Slider Module for a Bold Team Members Area

This post is part 1 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 will be creating a slider used to feature team members. Traditionally team members have a “card” style look or are placed one per column. This is just another idea to display your staff as well as make use of the Divi slider module in a creative way.

Let’s get into it!

Today’s Before & After: The Divi Slider Module

The slider doesn’t come with any default images stored inside so I’ve added the background images and slide images ahead of time, but not changed any of the default settings in the module. The slide images I’ve chosen act as team member profile photos and the background images are chosen to represent their corresponding workspaces.

Below is a screenshot of the slider before applying settings, you’ll notice the slide images are perfectly square as we’ll be making them round using CSS.

When we’re done, the above slider will look like the one below. I’ve chosen a pretty bright color scheme for this look but all the settings are in the modules so they’re very easy to change.

How to Style Divi’s Slider for a Bold Team Members Area

Subscribe To Our Youtube Channel

The Concept & Inspiration

When I was planning out these posts I just tried to think of ways to use the slider in different ways and team members was one of them. I’ve used it for that purpose before on client’s sites and when designing this look I had a young-ish startup in mind, so I thought I could get bold with the color choices.

Preparing the Design Elements

I’ve gathered my images ahead of time as well as chosen the menu titles I’d like to use. It’s best to optimize your images beforehand, and also size them down close to the size they’ll actually be appearing on the frontend when possible. There are many ways to optimize images, you can use software like Photoshop, you can have an image optimization plugin on your site like Imagify or EWWW, or you can use an online tool like TinyPNG (which also has a plugin available if you prefer to optimize on upload).

There are plenty of places online to purchase stock photos as well as find free photos, I tend to stick to pexels.com and that’s where I’ve found all the images being used in this post.

If you’d like to follow along with images of your own, here the dimensions used in my example below:

• Background images: 1200px by 800px
• Team member images: 400px by 400px

Implementing the Design with Divi

I’ll be using the classic backend builder because that’s what I’m most comfortable with, but everything we do can certainly be accomplished and edited with the new frontend Visual Builder–as you can see in the video above.

The Slider Module Settings

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

Next we’ll change some settings in the slider module itself. We won’t need to change any settings in the section module for this layout.

For the Slider Module General Settings set the following:

• show arrows
• show controls: yes
• automatic animation: on
• animation speed set to 8000
• continue automatic slide on hover: on

For the Slider Module Advanced Design Settings the header I’m using Cantata One and the font sizes are Desktop: 46 / tablet and smartphone: 30

For the Slider Module Custom CSS Settings the following bits of code go in their respective CSS boxes:

Slide Description – Here I’m changing the animation name (transition effect) to “flipInX” instead of the default “fadeBottom”. I like the flip effect for this because it’s whimsical nature fits with the bright color palette.

text-align: left !important; 
animation-name: flipInX;

Slide Image – I’m turning all the square slide images to round and overriding Divi’s because I found when I didn’t the desktop size was a tad too small in relation to the rest of the slider elements.

border-radius: 50%; 
overflow: hidden;
max-width: 400px;
max-height: 400px;

The Slide Settings

For the slide General Settings a picture works best, and the opaque teal you see is rgba(30,191,191,0.8).

The slide Advanced Design Settings are below, the yellow being used is #eeee22, the teal is #3cc4bb.

Finishing Up with a Media Query

We just need to finish up by adding a media query for small screen sizes. Without this the slide image gets cut off at the top and we don’t want that. This code can go in your Divi theme options panel at the very bottom in the Custom CSS box or in your child stylesheet.

@media only screen and (max-width: 767px) {
    .et_pb_slider_with_overlay .et_pb_slide_image {
        margin-top: 6% !important;
        padding-top: 0;
    }
}

Now you should be all set with a colorful team member slider that’s sure to stand out! We hope you’ve enjoyed today’s Divi slider tutorial, be sure to stay tuned for the rest in this mini series, and don’t forget to show us how you’ve used them on your own sites in the comments.

Tomorrow: How to Add Parallax Elements and a Slide-Down Transition to the Divi Slider Module

Tomorrow I will show you how to execute a design concept I call “foodie”. It’s perfect for pizzerias (or any restaurant, for that matter). In that tutorial I’ll show you how to add parallax elements and new slide transition to the Divi slider module. See you there!

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