Follow us

Boxed Testimonial Slider Tutorial for Divi | Divi Soup

Like our free content? Then you'll love our exclusive Club!

Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!

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.


So let’s get cooking!




The Divi Theme or Divi Builder Plugin from Elegant Themes


Cooking time


This should take you around 10 – 15 minutes max.




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.


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


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).







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.


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>



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.


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 .et_pb_container {
        height: auto !important;
    .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. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. 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.

Related Posts

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

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!