Custom section design for ecommerce | Elementor tutorial

In this tutorial I will show you how to make this custom design from scratch using Elementor Pro.

Add these class name for all images

    pic pic1  
    
    pic pic2  
    
    pic pic3

Add these attributes name for all dots

data-class | pic1

data-class | pic2

data-class | pic3

Add this CSS with section

/*add this css with section*/
selector .pic{
    display: none;
    transform: rotate(20deg)
}
selector .pic.pic1{
    display: block;
}

Add this JS to anywhere of that page

var $ = jQuery;
$(document).ready(function(){

//after click
$("[data-class]").on("click", function(){
        var dataClass = $(this).attr("data-class");
        
        $('.pic').hide();
        $('.'+dataClass).show();
    });
        

});

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)

1 + 10 =

[wpforms id="2272"]