How To Make a Fitness App Landing Page Elementor Free

Quick Summary

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

FREELANCING MASTERY is now LIVE!

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

[STEP BY STEP from Scratch] In this tutorial, You'll learn How to Make a Professional Website/Landing Page using WordPress & Elementor Free Version. This WordPress & Elementor Masterclass is for Complete Beginners.

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

The term “Web Landing Page” can mean a lot of things — and that’s the beauty of it! In this tutorial, I’ll show you how to design a high-converting business landing page using WordPress and Elementor.

Whether you’re building a Web Design Agency Landing Page, SEO Company Landing Page, Facebook Ads Agency Landing Page, or even a Consulting Business, Logo Designer, Graphic Designer, Content Writing Services, or Freelancer Portfolio Landing Page — this tutorial will help you do it all!

And just like my previous tutorials, I’m not using any pre-made templates here. So there’s no limit — after watching this video, you’ll be able to design any type of business landing page for yourself or for your clients.

👉 Learn Elementor Tutorial 2026: Complete MasterClass for Beginners!

⏰Timestamps for creating a WORDPRESS website step by step ⏰

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

10 Million+ website owners started using the Elementor page builder. I'll show you the easiest way how you can create your personal resume website using Elementor Page Builder yourself.

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

Kitninja eCommerce Elementor template kits.

Get Templates

Prompt Used in This Tutorial

Button Style CSS

<style>
/*=== BUTTON ===*/
.rippd-button .elementor-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    transition: transform 0.4s ease, box-shadow 0.4s ease; 
}
.rippd-button span.elementor-button-content-wrapper {
    background: inherit;
}
.rippd-button .elementor-button-icon {
    background: inherit; 
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-size: 24px;
    position: absolute;
    right: -48px; 
    top: 50%; 
    transform: translateY(-50%);
    transition: right 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.rippd-button .elementor-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(14, 15, 17, 0.15); 
}


.rippd-button .elementor-button:hover .elementor-button-icon {
    background: inherit; 
    box-shadow: 0 4px 10px rgba(14, 15, 17, 0.15);
}

.rippd-button .elementor-button:focus .elementor-button-icon {
    background: inherit;
    box-shadow: none;
    outline: none; 
}

.rippd-button .elementor-button:hover .elementor-button-icon svg path {
    stroke: #0E0F11;
    fill: #0E0F11;
    transition: stroke 0.4s ease, fill 0.4s ease;
}

.rippd-button .elementor-button:focus .elementor-button-icon svg path {
    stroke: #0E0F11;
    fill: #0E0F11;
    transition: stroke 0.4s ease, fill 0.4s ease;
}




.rippd-button-white .elementor-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.rippd-button-white span.elementor-button-content-wrapper {
    background: inherit;
}

.rippd-button-white .elementor-button-icon {
    background: inherit; 
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-size: 24px;
    position: absolute;
    right: -48px; 
    top: 50%; 
    transform: translateY(-50%);
    transition: right 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.rippd-button-white .elementor-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(247, 244, 238, 0.4);
}

.rippd-button-white .elementor-button:hover .elementor-button-icon {
    background: inherit;
    box-shadow: 0 4px 10px rgba(247, 244, 238, 0.4);
}

.rippd-button-white .elementor-button:focus .elementor-button-icon {
    background: inherit;
    box-shadow: none;
    outline: none;
}

.rippd-button-white .elementor-button-icon svg path {
    stroke: #0E0F11;
    fill: #0E0F11;
    transition: stroke 0.4s ease, fill 0.4s ease;
}

.rippd-button-white .elementor-button:hover .elementor-button-icon svg path {
    stroke: #0E0F11;
    fill: #0E0F11;
    transition: stroke 0.4s ease, fill 0.4s ease;
}

.rippd-button-white .elementor-button:focus .elementor-button-icon svg path {
    stroke: #0E0F11;
    fill: #0E0F11;
    transition: stroke 0.4s ease, fill 0.4s ease;
}
</style>

Button Style CSS Classes

rippd-button
rippd-button-white

Marquee Style CSS

.marquee {
  animation: marquee 60s linear infinite;
  
}


@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.marquee:hover {
     animation-play-state: paused;
}


.logo-slider-shadow {
    background: linear-gradient(90deg, #F6F3EC 50.17%, rgba(243, 239, 231, 0) 100%);
    opacity: 0.97;
}

Marquee Style CSS Classes

marquee
logo-slider-shadow

Triangle Style CSS

.section-triangle {
    position: relative;
}

.section-triangle::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #DFDFDF;

    clip-path: polygon(
        10% 0%, 
        90% 0%, 
        100% 50%, 
        90% 100%, 
        10% 100%, 
        0% 50%
    );

    z-index: 0;
}


.section-triangle::after {
    content: "";
    position: absolute;
    inset: 1px; 
    background: #F7F4EE;

    clip-path: polygon(
        10% 0%, 
        90% 0%, 
        100% 50%, 
        90% 100%, 
        10% 100%, 
        0% 50%
    );

    z-index: 1;
}

.section-triangle > * {
    position: relative;
    z-index: 2;
}
.section-triangle-white {
    position: relative;
}


.section-triangle-white::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #DFDFDF;

    clip-path: polygon(
        10% 0%, 
        90% 0%, 
        100% 50%, 
        90% 100%, 
        10% 100%, 
        0% 50%
    );

    z-index: 0;
}


.section-triangle-white::after {
    content: "";
    position: absolute;
    inset: 1px; 
    background: #FFF;

    clip-path: polygon(
        10% 0%, 
        90% 0%, 
        100% 50%, 
        90% 100%, 
        10% 100%, 
        0% 50%
    );

    z-index: 1;
}

.section-triangle-white > * {
    position: relative;
    z-index: 2;
}

Triangle Style CSSES

section-triangle
section-triangle-white

Work Number Style CSS

.work-number {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 36px;
    background: linear-gradient(180deg, rgba(11, 9, 10, 0.1) 12.23%, rgba(196, 252, 0, 0.1) 177.27%), #0E0F11;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 48px;
    flex-shrink: 0;
}



@media (max-width: 767px) {
    .work-number {
        padding: 14px 34px;
        border-radius: 50%;
        flex-shrink: 0;
    }
}

Work Number Style CSS Class

work-number

Call To Action Style CSS

.ft-card-icon .elementor-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #0E0F11;
    border-radius: 100px;
}


@media (max-width: 767px) {
    .ft-card {
        position: absolute !important;
        top: 0%!important;
        left: 50%!important;
        transform: translate(-50%) translateX(-95px) rotate(-26deg)!important;
    }
    
    .ft-card-icon .elementor-icon {
    width: 30px;
    height: 30px;
    }
    
    .ft-card2 {
        position: absolute !important;
        bottom: !important;
        left: 50%!important;
        transform: translate(-50%) translateX(90px) rotate(26deg)!important;
    }
}

Call To Action Style CSS Classes

ft-card-icon
ft-card
ft-card-icon
ft-card2

How To Make a Fitness App Landing Page 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