R2: Boxed Testimonial Slider

by | Jan 8, 2016 | Headers and Sliders

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

For our next recipe I’m going to show you how to create a Boxed Testimonial Slider like the one below which looks great on all screen sizes. Click here to see the live demo.

testimonial-slider1

So let’s get cooking!

 

ingredients

The Divi Theme or Divi Builder Plugin from Elegant Themes

cooking-time

This should take you around 10 – 15 minutes max.

preparation

The first thing we need to do is create our slider module. So add a new standard section with single row and single column and then insert a slider module.

testimonial-slider2

Next, open up the slider module and give it a custom css class, I’m using testimonial-slider.

testimonial-slider3

Next, we’re going to define some settings for the slider, you can make these whatever you want but this is what I have used so if you want yours to look exactly like the demo then use the same setting as you see below. (I haven’t changed anything in the Advanced Design Settings).

testimonial-slider4

testimonial-slider5

testimonial-slider6

 

Now let’s get onto adding our content.  Scroll up to the top of the slider module and hit Add New Slide. Set a background colour, I’m using #999999, and set the text colour to light or dark depending on your background colour, I’m using light. We are going to ignore all the other fields as we will be adding everything else into the main content area.

testimonial-slider7

Scroll down to the content area and add the following code in the text editor. Then just change the image URL and text to your own and then hit Save. You can add some line breaks or paragraph tags before and after to get the spacing you need depending on the length of your content.

<div class="et_pb_testimonial_portrait" style="background-image: url('YOUR IMAGE URL HERE');"> </div><p style="text-align: left;">Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Pellentesque posuere. Maecenas vestibulum mollis diam. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est.</p><p style="text-align: right;">- Jack &amp; Jenny Green</p><p>

 

testimonial-slider8

Now you have your first slider set up, just hit the duplicate button and create as many sliders as you need and then edit the image URLs and text as you need.

testimonial-slider9

Now for the CSS, copy and paste the code below into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section and don’t forget to save.

/*---------- [Testimonial Slider ]----------*/

    
    .testimonial-slider,
    .testimonial-slider .et_pb_container {
        height: auto !important;
    }
    .testimonial-slider,
    .testimonial-slider .et_pb_slide {
        max-height: auto;
        border: 1px solid #fff;
        outline: 30px solid #000;
    }
    .testimonial-slider .et_pb_slide_description {
        position: relative;
        top: 25%;
        padding-top: 20px !important;
        padding-bottom: 10px !important;
        height: auto !important;
    }
    .testimonial-slider .et_pb_testimonial_portrait {
        display: table-cell;
        float: left;
        position: relative;
        width: 175px !important;
        height: 175px !important;
        margin-right: 30px;
        border: 3px solid #ffffff;
        background-repeat: no-repeat;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
    }
	
	.testimonial-slider .et-pb-controllers a {
    border-radius: 0px;
}

 

And that’s it, now your testimonial slider form should look like the one in my demo.

There are other ways to do this but what I like most about this method is it looks great on any screen size, without any media queries required!

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 🙂

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.
Join the Divi Soupies Facebook Group

Like us on Facebook

Categories

Archives

WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!