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!
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.
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).
Method
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 & 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,
.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,
This is a brilliant solution.
One thing I’ve noticed is that my slides don’t stay up on-screen long enough for folks to read all of the words of the testimonial. Do you know how to change the settings so that the slides stay on screen longer? Thanks in advance,
Dave
You can control transition speed at the bottom of the design tab within the module settings
Hi, Shay, Thanks for this. I have tried variations on some of these settings but still can’t get the slides to stay up longer. Any ideas? What am I missing? If needed, here is a screenshot of the settings I’ve been looking at and tweaking. https://ibb.co/dWPW7S
You would only need to adjust the Automatic Animation Speed at the bottom. Right now it looks like you have it set for 14 seconds per slide. If that isn’t working, you may want to put a support request into Elegant Themes so they can check it out.
Thanks, Shay. Adjustments there don’t seem to make a difference. Strange. And unfortunately, Elegant Support couldn’t figure it out, either! Thanks again.
If you want to email an admin login to shay@divisoup.com I’ll take a look for you – very strange they couldn’t resolve it.
Hi, Shay, I appreciate this, good sir. I’m going to go ahead and see what happens after the next Divi update. Thanks again!
No prob – looks like 3.2.1 came out today
Michelle, awesome recipe, a hearty blend!
Things are working like a charm, except I, too, like Alex, was hoping to add the quot marks at the top of the box as in the Divi testimonial module. I tried your css code belwo, but I keep getting this error: Expected RBRACE.
Any thoughts?
thanks in advance,
Dave
Testimonials are appearing with bottom to top animation – standard animation of a slider. Is it possible to have a different animation? from left to right / right to left animation?
Yes Manas, check this out https://www.sean-barton.co.uk/2016/04/divi-animate-normal-content-images/
I got the exact solution from a post by Stephen James – https://divi.space/divi-tutorials/changing-the-standard-divi-slider-transitions/. Referred by Mike Abbott in Divi Theme Users & Elegant Marketplace Facebook group.
Fab
Hey Michelle! Thanks for such a wonderful, helpful website. I’ve used your recipes many times! One question on this one – I have used it successfully except on a phone in portrait orientation there is a big gap above the headline and below the name. Can you help me reduce this for phones only?
Can you post a link to the issue please Pamela
this is great! do you have any other code to help the styling? so having half image and half text?
Thank you Michelle, do you have a ‘recipe’ for a slider that has a transparent background that centers properly for mobile? I have tried, but my background is way too large and it doesn’t adjust for height, even on two lines of text. There are a number of entries here, and I don’t want to mess anything up. Thank you!
Can you provide a link to the issue Brenda as I don’t follow?
I may be a bit slow
– but there are two things I can’t seem to make fit.
The text seem to have a “shadow” and for some reason, my “image-url” just don’t work in the text area.
The image url i working now
Still shadow on text – and the circle diameter is rather small.
The text shadow is in the divi module settings, just turn it off. No sure what you mean about circle diameter but try the design settings for that also.
Great stuff. Very helpful. I have tried to adapt this to a full-width slider. Can’t seem to control the height, but I have tried changing each height variable in your css code. Any suggestions?
Header and slider heights are controlled by the amount of content, so if you add some top and bottom padding to the slide content that will make it taller.
Hi Michelle,
This is great. Thanks for sharing.
Is there an easy way to have the quotation marks at the top of the box overlapping just like the regular Divi testimonial module?
Also, is there a way to randomise the order of the slides?
Kind Regards, Alex
Something like this should work, give the column containing the module a custom class then add and adjust:
.my-column-class:before {content: '\7c';
font-family: ETModules;
font-size: 60px;
position: absolute;
top: -20px;
z-index: 100;
color: red;
text-align: center;
width: 100%;
}
Thanks for that tutorial. Is it possible to randomise the order of the slides?
I don’t recall that being an option in Divi so you would need some custom php
Please disregard last comment. I was able to get the missing images to work. Needed full URL including the domain name. Odd… that I did not need full URL on the home page.
However, I still can’t get the box to shrink up to the size of the testimonial. It looks perfect while editing in Visual Builder, but when I save and look at the page outside of editing, the Box around the testimonial is the same size for each testimonial and does not shrink up on the less lengthy ones.
The visual builder adds inline CSS to the content, so I would check the HTML within the module and see if anything has been added. I don’t use the visual builder currently
Thank you for a great article. I have it working fine on home page. I’m not doing the exact same on another page and can not get the testimonial image to appear. I have looked and looked to make sure 100% same as the home page and no luck. Any suggestions?
Also I have some long and some short testimonials. Any ideas on how to make the box shrink up on short testimonials?
Hi Michelle, thank you so much for this tutorial! I used it to create a testimonial slider on . There’s just one issue that I bumped into, and that’s responsiveness, mainly on mobile portrait. A few words are right-aligned from the image and the rest beneath it. I’d also like to center the entire thing on mobile but can’t figure out how. How could I do this? Many thanks and have a great weekend!
Wrap this in a media query for the breakpoint you want Noelle:
.testimonial-slider .et_pb_testimonial_portrait {float: none;
display: block;
margin: 0 auto;
}
.testimonial-slider .et_pb_testimonial_portrait p {
text-align: center;
}
Great stuff! I just have one question. I have a lot of testimonials but no images. I would like to use the quotation image that is used in the normal module. Could you tell me how to do that? Thnx
I am not entirely sure I understand what you are asking but you could upload an image of quotes rather than an image of the person
Hi Michelle
YOUR RECIPES ARE GREAT!
I need your help
there is a way to realize this
apply the slider to the second example? the problem for me is to center the image outside the background?
can you help me?
grazie
silvia
If you give the image the following CSS it should get you started and then id you can provide a link I can help further
position: absolute;
top: -30px;
width: 100px;
left: 0;
right: 0;
margin: 0 auto;
Thank you Michelle! This was on my list to do for a long time, and its COMPLETED now. Thank you so much for your recipes!
Welome Andrea
Is there a way to have say 3 testimonies and then those 3 slide out to be replaced with 3 new ones and then cycle back? Instead of just showing one testimony at a time?
Yes, but you would need to create each set of 3 testimonials within the content area of the module using html
Follow up to my last questions – I changed the order of some of the testimonials and then only 2 showed up. Then I changed them again and 4 showed up. Super confused!
Additionally, is there a way to make the text centered and to make the box the testimonials are in about half as large? Thanks!!
You can align the text to the center and limit the size of the box with CSS or the module settings, and as per my previous reply, the CSS has no affect on whether the testimonials show or not
Great tutorial! But…I want more than 3 testimonials to show. Is there a way to make that happen? I uploaded about 10 testies to sliders but only the first 3 are rotating through.
There shouldn’t be an issue with this Ashley, the edits are just CSS so has no effect on the number of testimonials you add
Any idea why I have 10 sliders but it only rotates through 4 of them though? That’s the issue I’m having.
Not off the top of my head Ashley. This is just CSS and there are no changes to the actual module functionality itself so I can only assume this is a Divi issue
This worked perfectly. Thank you very much!
Most welcome
Do you know where to find the slider module in Divi 2.7.8?
I can’t follow along in this tutorial because I can’t find it.
Sure, its toward the bottom between the sidebar and social media follow modules
Haha this was kinda embarasing.
It was at the absolute bottom in my language (swedish). Itt was translated to ‘Växlare’.
I was looking for slider and didn’t think of the fact I was on an swedish wordpress setup :p I normally work on the english setup.
Thanks for you reply though.
Lol, no worries Stefan
Hello Michelle, Excellent feature, exactly what I need however I have two question if you can help please 1) Somehow the links for the image that I input work when i am in the edit mode but disappear when I update the page. When i preview my changes it shows perfectly, when I update and publish the image disappears and when I go back to edit mode i see the whole image link removed. See below what I mean Before in edit mode (working perfectly when previewed): After saving and updating the page to reflect the changes, no images shows… Read more »
The code I sent you disappeared lol
Is there anyway I can mail it to you?
Sounds like WordPress is stripping your tags. have a look at this article, implement the suggestions and let me know if it fixes it.
https://elegantmarketplace.com/help-my-paragraphs-and-line-breaks-keep-disappearing-from-the-divi-text-module/
Thanks for the great tutorial Michelle. I am using it to do a slider for a weight loss site, would it be possible to put a before image on one side of the text and an after image on the other end without to much adjustment?
Hi Grant
yes you could do this using the ‘one third’ option in the text editor, just put an image in the first and last third and the text in the middle third.
Very nice recepie, Michelle! But I would like to make a link of the whole testamonial section, is there a smart solution to that?
Hi Frode
You could wrap the entire content in a link (href), give it a custom class and then style that class so the font shows how you want
Thanks for this recipe Michelle! It worked for me, saving space on the home page. Something I cannot get hold of, is how to remove the black border. It gives the slider a sad look
Website is in building proces, but i can grant you access.
Rob
Hey Rob
You just need to remove this from the CSS:
outline: 30px solid #000;
excellent!!
Hi Michelle, I’m struggling with making a few amendments to this. The site I’m working on is in maintenance mode and I can’t seem to attach a screenshot here. I’m just trying to centre the image and the text as they are appearing too close to the top of the box. However any paremeters I change in the stylesheet don’t seem to take any effect (even after clearing my cache multiple times). I did manage to remove the 1px white border, as a test, but when I put it back in to the code (copy pasting the whole section from… Read more »
Hi Vicky
I really need a live link to be able to help you. And it sound like you have a caching issue if simple updates likes change the border are not working. Try disabling all cache plugins and clear your browser and sever side cache and then check your changes.
Terrific. Great share, I implemented this in a new project I’m working on and it is looking great. Thank you for your site… your “recipes” are very easy to follow and achieve excellent results. Can’t wait for more!
That’s great, thanks Michael
Wow Michelle, Great extension. Thank’s a lot for sharing this!
Love from Germany, Hamburg
Danke Alvaro, glad you like it
great tutorial, thanks
Thanks Marco, hope it is helpful