Cool testimonials area | Elementor tutorial

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

});

Start Working with me for any wordpress project!

Get in touch

Have a few questions or just want to say hello? Use the form below to get in touch with me! If you are ready to book a new project please click here to fill out a design inquiry.

Call me by Skype (farjana.rashid55)

15 + 15 =

[wpforms id="2272"]