In this quick tutorial I will show you how to create cool testimonials section using Elementor Pro. Here I have used all elementor features and some small CSS and JS code.
First of all use these classes and ID for 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 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 image section
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 of 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');
});
});
0 Comments