Bharat Digital Marketing

Custom testimonial carousel using elementor pro | Elementor tips and tricks

In this quick tutorial, I’ll show you how to create a great testimonial using Elementor Pro. Here I have used all the Elementor features and some small CSS and JS code.
Subscribe to our youtube channel to learn WordPress designing
let’s start

First of all, use these classes and ID for the text area

//Add this class name for each text
text-details

//Add this id name for each text
text-1

//add this class name for first text 
active

Use these classes and attributes for the Image area

//Add this class name for each image
tabmenu

//Add this attribute for each  image
data-tab|1

//add this class name for first image 
active

Add this CSS for the image section

selector .tabmenu{
    opacity: .5;
    cursor: pointer;
}
selector .tabmenu.active{
    opacity: 1;
    transform: scale(1.2);
}
selector .tabmenu{ 
opacity: .5; 
cursor: pointer; } 
selector .tabmenu.active{ 
opacity: 1;
transform: scale(1.2); }

 

/*css for testimonial info*/ .elementor-testimonial-name { display: inline-block !important; } .elementor-testimonial-job { display: inline-block !important; margin-left: 10px; top:-1px; position: relative }

And Finally, add this JS code anywhere on this page


var $ = jQuery; $(document).ready(function(){ //default $('.text-details').hide(); $('.text-details.active').show(); //after click $(".tabmenu").on("click", function(){ var dataId = $(this).attr("data-tab"); //for text $('.text-details').hide().removeClass('active'); $('#text-'+dataId).show().addClass('active'); //for tab $('.tabmenu').removeClass('active'); $(this).addClass('active'); }); });

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Let’s build something great together.

Interested in growing your practice? Have a general question? Want a quote? We’re just a call away.