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'); }); });
