Having testimonials on your website is crucial, but it can be a hassle when Divi doesn’t include a Divi testimonial slider. Don’t worry, though! This guide will walk you through creating a beautiful Divi testimonial slider using Divi modules, without needing any third-party tools. Ready to get started?
Which module will we use to create a Divi testimonial slider?
The Slider module, a standard feature in Divi, serves as our tool to craft a testimonial slider. By incorporating essential custom CSS within the slider module, we can transform its appearance and functionality to suit our testimonial needs. These tweaks will seamlessly convert the slider into a platform for showcasing compelling testimonials, enhancing user experience and engagement on your website.
Complete these basic steps
Add the CSS snippet below to your website
With the increasing use of mobile devices for browsing the web, mobile responsiveness is crucial for a website’s success. Divi provides responsive design options, but users may encounter issues with mobile responsiveness. To ensure your testimonial slider is mobile-friendly, you need to add a custom CSS module to your website.
Add a module named “code” and paste this code here
Paste this code in the code editor/ free custom CSS field
./*manually add the image URL to the slide controller
This image replaces the dot controller*/
.et-pb-controllers a:nth-child(1) {
content: url(‘PASTE YOUR IMAGE URL HERE‘);
}
.et-pb-controllers a:nth-child(2) {
content: url(‘PASTE YOUR IMAGE URL HERE‘);
}
.et-pb-controllers a:nth-child(3) {
content: url(‘PASTE YOUR IMAGE URL HERE‘);
}
.et-pb-controllers a:nth-child(4) {
content: url(‘PASTE YOUR IMAGE URL HERE‘);
}
/*size and position of images*/
.et-pb-controllers a {
width: 90px;
height: 90px;
border-radius: 100%;
margin: 0 15px;
}
/*change opacity on hover*/
.et-pb-controllers a:hover {
opacity: 1;
}
/*Active Slide Controller custom CSS*/
.et-pb-controllers .et-pb-active-control {
width: 100px;
height: 100px;
margin-bottom: -5px;
}
/*force off the text shadows*/
.et_pb_slide_description {
text-shadow: none!important;
margin-bottom: 20px!important;
}
/*change the slide description animation*/
.et-pb-active-slide .et_pb_slide_description {
animation-name: fadeIn;
}
@media (max-width: 980px) {
/*size and position of images – mobile*/
.et-pb-controllers a {
width: 50px;
height: 50px;
border-radius: 100%;
margin: 0 10px;
}
/*Active Slide Controller custom CSS – mobile*/
.et-pb-controllers .et-pb-active-control {
width: 60px;
height: 60px;
margin-bottom: -5px;
}
/*adjust image position – mobile*/
.et-pb-controllers {
bottom: 10%;
}
}
/*position the images – mobile*/
@media (max-width: 767px) {
.et-pb-controllers {
bottom: 20%;
}
/*position the images – mobile*/
.et_pb_slide_description {
margin-bottom: 50px!important;
}
}
Add Client’s Image in the testimonial
.et-pb-controllers a:nth-child(1) {
content: URL(‘PASTE YOUR IMAGE URL HERE’);
}
[ this code is already written in the code snipped]
As many images as needed, the links of the images should be placed one after the other. We are going to show four images here so we have placed four images.
That means Duplicate or remove code as necessary based on the number of slides. Maintain the existing format using the “:nth-child(number)” approach to correspond with your slide count.
Controller Images showing left or right position
Left position
.et-pb-controllers{
display: flex;
flex-direction: column;
bottom: 11%; //[ you can decide where is suitable, just position your desired need ]
}
.et-pb-controllers a{
Margin: 10px;
}
Right position
.et-pb-controllers{
left: unset;
width: unset;
display: flex;
flex-direction: column;
right: 0;
}
.et-pb-controllers a{
Margin: 10px;
}
0 Comments