Muscleup Landing Page Website Using Elementor | WordPress 2024

Quick Summary

FREELANCING MASTERY is now LIVE!

(The wait is over — enroll in the full course now.)

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

[STEP BY STEP from Scratch] In this tutorial, You'll learn How to Make A Responsive Sales Landing Page using Elementor Flex Container. This Elementor Masterclass is for Complete Beginners.

After watching this Elementor Landing Page Design MasterClass, you will be a real ninja of Elementor page builder. You can literally design anything in Elementor whatever you will imagine. – You can replicate any design from scratch – You can make any advanced website from your clients provided designs (Eg. Photoshop, Figma, Adobe XD to WordPress) – You will learn how to think and design like a professional Web Designer

This tutorial is 100% beginner friendly. You don't need to have any coding skill nor any design experience. So if you're very new to WordPress and Elementor, this one tutorial will make you a professional web designer.

Also, I have made everything in Elementor's latest flexbox model. So you can also become an Elementor flexbox expert by watching this tutorial. In this masterclass, we will not use any Pre-made template & No paid theme is required. We will create everything from scratch step by step.

⏰Timestamps for creating an ELEMENTOR website step by step ⏰

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

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

Project Files Download the resources used in this tutorial.

Download Files

Kitpapa Ready made Elementor template kits.

Get Templates

Prompt Used in This Tutorial

Hide horizontal overflow for the entire page CSS

<style>
/* Hide horizontal overflow for the entire page */
html, body {
   overflow-x: hidden;
}
</style>

Object Rotated Animation Css

.rotated{
    animation: 100s linear infinite rotate-animation;
}



@keyframes rotate-animation {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }

}

Object Rotated Animation Css Class

rotated

Object Floating Animation Css Class

.floating {
    animation: floating-animate 4s infinite linear;
}

@keyframes floating-animate {
    0% {
        transform: translateY(-30px);
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(-30px);
    }
}

Object Floating Animation Css Class

floating

Hero Button CSS

.hero-btn .elementor-button-icon{
    padding: 20px 20px 16px;
    font-size: 40px;
    background-color: white;
    border-radius: 100%;
    
}

.hero-btn .elementor-button-text{
    margin-top: auto;
    margin-bottom: auto;
}

@media (max-width: 1024px){
    .hero-btn .elementor-button-icon{
    padding: 13px 15px 3px;
    font-size: 30px;
}
}

Hero Button CSS Class

hero-btn

Icon Box CSS

.icon-box .elementor-icon-box-icon{
    margin-bottom: -6px;
}

Icon Box CSS Class

icon-box

Ingredients Section Image Tab CSS

.herb-section {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    display: none;
}

.herb-section.active {
    display: block!important; /* Only the active section will be visible */
}

.herb-button {
    cursor: pointer;
}

.herb-button.active .elementor-widget-container, .herb-button:hover .elementor-widget-container{
    border-color: #00712D!important;
}

.herb-button.active .elementor-widget-container::before, .herb-button:hover .elementor-widget-container::before {
    content: "";
    width: 24px;
    height: 24px;
    background-color: #00712D;
    display: inline-block;
    position: absolute;
    top: -10px;
    left: 50%; /* Align to the left */
    transform: translateX(-50%); /* Center the element horizontally */
    border-radius: 100%;
}


@media (max-width: 767px){
.herb-button.active .elementor-widget-container::before {
    
    width: 10px;
    height: 10px;
    top: -4px;
    
}
}

Ingredients Section Image Tab CSS Classes

herb-section
herb-button
active

Java Script Code Snippet

<script type="text/javascript">
   jQuery(document).ready(function($) {
    // Get all round buttons (images) and sections
    const herbButtons = $('.herb-button');
    const herbSections = $('.herb-section');
    // Function to hide all sections with smooth transition
    function hideAllSections() {
        herbSections.each(function() {
            $(this).fadeOut(500); // Smooth hide
        });
    }
    // Function to show the selected section
    function showSection(sectionId) {
        hideAllSections(); // Hide all sections first
        const activeSection = $('#' + sectionId);
        if (activeSection.length) {
            activeSection.fadeIn(500); // Smoothly show the clicked section
        }
    }
    // Add click event to all round buttons
    herbButtons.on('click', function() {
        // Remove 'active' class from all buttons
        herbButtons.removeClass('active');
        
        // Add 'active' class to the clicked button
        $(this).addClass('active');
        
        const targetSection = $(this).data('target');
        showSection(targetSection);
    });
    // Manually set the active section and button
    function setActiveSection(sectionId) {
        hideAllSections(); // Hide all sections first
        
        // Remove 'active' class from all buttons
        herbButtons.removeClass('active');
        
        // Show the manually selected section
        const activeSection = $('#' + sectionId);
        if (activeSection.length) {
            activeSection.fadeIn(500);
        }
        
        // Add 'active' class to the corresponding button
        const activeButton = herbButtons.filter(`[data-target="${sectionId}"]`);
        if (activeButton.length) {
            activeButton.addClass('active');
        }
    }
    // Initially hide all sections except the manually set active section
    hideAllSections();
    // Manually set an active section here (change 'tribulus-section' to your desired section)
    setActiveSection('herb3'); // You can change this to any section ID
});
</script>

Java Script Data Attribute

data-jim|

Play Icon CSS

.play-icon{
    padding: 15px;
    border: 2px dashed rgba(255, 251, 230, 0.4);
    border-radius: 100%;
}
@media (max-width: 1024px){

.play-icon .elementor-icon{
    padding: 30px!important;
    
}

}

Play Icon Css Class

play-icon

Motion Effect Smoother Css

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translate3d(0,-50px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInDown {
    animation-name: fadeDown
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translate3d(-50px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInLeft {
    animation-name: fadeLeft
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translate3d(50px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInRight {
    animation-name: fadeRight
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate3d(0,50px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInUp {
    animation-name: fadeUp
}

Muscleup Landing Page Website Using Elementor | WordPress 2024

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