How to Create a Gym & Fitness Landing Page By Using Elementor Free

Quick Summary

🎯 Ready to build a $1,440 Gym Website… without coding?

This step-by-step tutorial will show you how to create a premium fitness landing page using WordPress + Elementor . Perfect for beginners who want to design like a pro, charge more as a freelancer 💼, or build their own gym business site. You’ll walk away with real skills that sell — even if it’s your very first time!

🔥 Watch till the end to see how this page structure can help you attract clients, build your portfolio, or start freelancing!

Get Free Domain & Web Hosting (78% OFF 💸)

(🎁 Use Coupon Code: JFD10 for up to 78% Discount !)

💡 What You’ll Learn in This Video

🔧 Build a gym landing page from scratch 🎨 Use Elementor Free for pro-level design 💼 Design that impresses any client 🚀 Get web clients as a beginner 💰 Charge $1,000+ with premium layout tricks

▶️ Watch Next (More Elementor Magic)

Watch till the end to Create a $1440 Gym Landing Page with Elementor Magic

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

Kitninja eCommerce Elementor template kits.

Get Templates

Prompt Used in This Tutorial

Hide horizontal overflow for the entire page CSS

<style>
html,body{
    overflow-x: hidden;
}

.lst-none ul{
    list-style-type: none !important;
}
</style>

Title Background Effect Style Css

.mix-blend-mode{
    mix-blend-mode: difference;
}

Title Background Effect Style Css

mix-blend-mode

Fire Animation Style Css

.fire-bg img {
    animation: flameWobble 6s infinite linear;
}

@keyframes flameWobble {
    0%{
        filter:blur(2px);
         opacity: 0;
    }
   
    10%{
        filter:blur(0px);
    }
     20%{
       
         opacity: 1;
    }
  100% {
    transform: scale(1,1.2) translate(0, -30px) rotate(-2deg);
      opacity: 0;
  }
}

.delay-6s img{
    animation-delay: .6s;
}

Fire Animation Style Css Class

fire-bg
delay-6s

Marquee Style Css

.marquee-content .elementor-widget-container {
    display: flex
;
    width: 5000px;
    transform: translateX(0);
    animation: marquee 30s linear infinite;
    white-space: nowrap;
    will-change: transform;
}

.marquee-right .elementor-widget-container {
    animation-direction: reverse;
}

@keyframes marquee{
    100% {
    transform: translateX(-2000px);
}
}

Marquee Style Css Classes

marquee-content
marquee-right

Background Object Animation Style Css

.hero{
     animation:bg 150s linear  infinite !important;
}
.bg-change-animation{
    animation:bg 100s linear  infinite !important;
}

@keyframes bg{
    to{
        background-position-y: 1000px;
    }
}

Background Object Animation Style Css Classes

hero
bg-change-animation

Button Style Css

.btn-orrange .elementor-button{
    overflow:hidden !important;
    position: relative;
  z-index: 0;
}

.btn-orrange .elementor-button:before, .btn-orrange .elementor-button:after,
.btn-orrange .elementor-button .elementor-button-content-wrapper:before,
.btn-orrange .elementor-button .elementor-button-content-wrapper:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #040202;
  transition: all .5s ease;
  z-index:-1;
}
.btn-orrange .elementor-button:before {
  transform: translate(-100%, -100%);
}
.btn-orrange .elementor-button:after {
  transform: translate(-100%, 100%);
}
.btn-orrange .elementor-button .elementor-button-content-wrapper:before {
  transform: translate(100%, -100%);
}
.btn-orrange .elementor-button .elementor-button-content-wrapper:after {
  transform: translate(100%, 100%);
}

.btn-orrange .elementor-button:hover:before {
  transform: translate(-49%, -49%);
}
.btn-orrange .elementor-button:hover:after {
  transform: translate(-49%, 49%);
}
.btn-orrange .elementor-button:hover .elementor-button-content-wrapper:before {
  transform: translate(50%, -50%);
}
.btn-orrange .elementor-button:hover .elementor-button-content-wrapper:after {
  transform: translate(50%, 50%);
}

Button Style Css Class

btn-orrange

Contact Section Gradient Background Style CSS

.join-us::before{
    background: linear-gradient(0deg, #040202 -8.92%, rgba(4, 2, 2, 0.812341) 13.55%, rgba(4, 2, 2, 0.8) 16.43%, rgba(4, 2, 2, 0) 53.64%, rgba(4, 2, 2, 0) 75.66%, rgba(4, 2, 2, 0.96) 98.36%) !important;
}

Contact Section Gradient Background Style CSS Class

join-us

Service Item Hover Style Css

.service-item:hover .hover-content {
   transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.hover-content {
   transform: translateY(40%);
    transition: all .4s ease;
    opacity: 0;
    visibility: hidden;
}

Service Item Hover Style Css Classes

service-item
hover-content

Counter Style Css

.count-wrapper .elementor-icon-box-icon .elementor-icon svg {
    height: fit-content;
}


.count-wrapper{
backdrop-filter: blur(15px);

}

Counter Style Css Classes

count-wrapper

Membership Section Background Style Css

.membership {
    animation: bg2 200s linear infinite forwards;
}

@keyframes bg2{
    100% {
    background-position-X: 2000px;
}
}

Membership Section Background Style Css Classes

membership

Membership Pricing Plan Hover and Button Style Css Classes

.membership-btn .elementor-button {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.membership-btn {
    height: 100%;
}

.membership-btn .elementor-button-wrapper {
    height: 100%;
}



.membership-details ul.elementor-icon-list-items li.elementor-icon-list-item span.elementor-icon-list-icon svg {
    transition: all .4s linear !important;
}
.membership-details ul.elementor-icon-list-items li.elementor-icon-list-item:hover span.elementor-icon-list-icon svg {
    transform: rotate(45deg);
}

Membership Pricing Plan Hover and Button Style Css Classes

membership-details
membership-btn

How to Create a Gym & Fitness Landing Page By Using Elementor Free | WordPress 2025

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