How To Create Animated Service Section Using Elementor Free

Quick Summary

(Exclusive: Click above link & use “JFD10” coupon code to get upto 78% DISCOUNT!)

In this tutorial, You’ll learn How to Create a FREE eCommerce / Online Shop Website with WordPress, Elementor and WooCommerce. This Masterclass is for Complete Beginners.

(Exclusive: Click above link & use “JFD10” coupon code to get upto 78% DISCOUNT!)

In this tutorial, I’ll show you how to create a fully professional and Amazing looking eCommerce website for completely FREE. We’ll be using only the best & free resources to create this online shop. We’ll use a FREE Theme, a FREE Page Builder & All FREE Plugins.

To create this Online Shop, we’ve taken all the features and inspiration from world’s top eCommerce websites like Amazon, AliExpress, Walmart, flipkart and so on.

Though we’ll be using all the FREE resources, it will have all the basics and necessary features like a fully professional eCommerce website.

You can sell any type of products – Physical products, Digital products, Products with different colors & sizes… You can name it.

We’ll cover all the advanced techniques: Like, People can add products into cart very easily, then their shipping cost & tax rate will be automatically calculated based on their location.

On checkout, people can pay using different payment methods like paypal,credit cards or your local payment gateways. So people don’t need to go to any third party website, they can pay directly on your website.

Tools and Links Used

Hostinger Fast, beginner friendly WordPress hosting.

Get Hosting

Elementor The free page builder this tutorial is built with.

Get Elementor

Elementor Pro The Pro upgrade used throughout this tutorial.

Get Elementor Pro

Kitpapa Ready made Elementor template kits.

Get Templates

Kitninja eCommerce Elementor template kits.

Get Templates

Project Files Download the resources used in this tutorial.

Download Files

Prompt Used in This Tutorial

Rorate & Expand Content Style CSS

<style>

.service-list .btn{
    opacity: 0;
    visibility: hidden;
}

.service-list.active .btn {
    opacity: 1;
    visibility: visible;
}



.service-list .service-content {
    position: absolute;
    right: -20px;
    left: auto;
    bottom: 157px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: all 0.8s ease-in-out;
    transition: all 0.5s ease-in-out;
}



.service-list .service-icon{
    position: absolute;
    top: 24px;
    left: 35px;
    -webkit-transition: all 0.8s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.service-list{
    box-sizing: border-box;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    cursor: pointer;
    
}


.service-list.active {
    --width: 324%!important;
}

.service-list.active .service-content {
    left: 40px;
    bottom: 40px;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.service-list.active .service-icon {
    top: 61%!important;
}

@media (max-width: 1300px){
    .service-list .service-content{
        right: -50px;
    }
}



@media (max-width: 1024px) {
 
    
.service-list.active{
    --min-height: 345px!important;
    --width: 100%!important;
}  

.service-list .service-icon{
    visibility: hidden;
    opacity: 0;
    left: 20px;
}

.service-list .btn{
    position: relative!important;
    
}

.service-list.active .btn{
    left: 0px;
    bottom: 0px;
}

.service-list.active .service-icon{
    top: 10%!important;
    opacity: 1;
    visibility: visible;
}
    
.service-list .service-content {
    position: absolute;
    left: 20px;
    bottom: 20px;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    
}

.service-list.active .service-content {
        left: 20px;
        bottom: 90px;
    }
}

@media (max-width: 767.98) {
.service-list.active{
    --min-height: 300px!important;
    --width: 100%!important;
}  
    
}
</style>

Rorate & Expand Content Style CSS Classes

service-list
active
service-content
service-icon
btn

Click to rorate & expand content JS Code

<script>
    document.addEventListener("DOMContentLoaded", function () {
    const serviceList = document.querySelectorAll(".service-list");

    serviceList.forEach(item => {
        item.addEventListener('click', () => {
            serviceList.forEach(el => el.classList.remove("active"));
            item.classList.add("active");
        });
    });
});

</script>

How To Create Animated Service Section Using Elementor Free

Quick Summary

Tools and Links Used

Prompt Used in This Tutorial

Get Your FREE Freelancing Roadmap

Related Tutorials

Vibe Code a REAL Animated WordPress Website with Claude + Elementor

Vibe Coding Full Course for Beginners – Build & Launch a Real SaaS

Edit Videos with ChatGPT Codex — Raw Clips to Finished Reel