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'); }); });
Can you be more specific about the content of your article? After reading it, I still have some doubts. Hope you can help me.
Your article helped me a lot, is there any more related content? Thanks!