How To Make a AI Course Selling Landing Page Elementor Free

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

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

Page Default Style CSS

.elementor-icon-wrapper, .elementor-icon {
    line-height: 0;
}

.wrd {
    word-break: break-all;
}

.elementor-icon-box-title {
    margin-top: 0px !important;
}

.elementor-image-box-title {
    margin: 0;
}

.elementor-image-box-img {
    flex-shrink: 0;
}

.elementor-icon-list-icon svg {
    margin: 0 !important;
}

.elementor-icon-list-text {
    align-self: center;
    padding-inline-start: 0px !important;
}

.cr{
    cursor: none;
}

Page Default Style CSS Classes

wrd
cr

Button Style CSS

.btn-shadow .elementor-button {
    background: linear-gradient(180deg, #712EDE 0%, #BF97FF 100%);
    border-radius: 28px;
    box-shadow:
        inset 0 2px 0 -2px #E3DEFF,
        inset 0px -4px 4px #6E58E8,
        inset 0px 4px 4px #887AD9 !important;
    transition:
        box-shadow 0.55s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: box-shadow, transform;
}

.btn-shadow .elementor-button-icon {
    font-size: 24px;
}

.btn-shadow .elementor-button:hover {
    box-shadow:
        inset 0 2px 0 -2px #E3DEFF,
        inset 0px -4px 4px #6E58E8,
        inset 0px 4px 4px #887AD9,

        0 0 12px rgba(191, 151, 255, 0.55),
        0 0 28px rgba(113, 46, 222, 0.55),
        0 0 45px rgba(191, 151, 255, 0.35) !important;

    transform: translateY(-3px);
}

Button Style CSS Class

btn-shadow

Hero Banner Video Section Style CSS

.hero-video .elementor-wrapper{
    overflow: hidden;   
    position: relative;
    border-radius: 24px;
    border: 12px solid rgba(255, 255, 255, 0.12);
}

.hero-video .elementor-custom-embed-play {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;
    background: #FFF;
    border-radius: 100px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4);
    z-index: 5;
}


@media (min-width: 1023px) {.hero-video .elementor-wrapper {
    height: 624px;        
    width: 100%;     
    overflow: hidden;   
    position: relative;
    border-radius: 24px;
    border: 12px solid rgba(255, 255, 255, 0.12);
}

.hero-video .elementor-wrapper video {
    width: 100%;        
    height: 100%;    
    object-fit: cover;  
    display: block;
}
}

.hero-video .elementor-custom-embed-image-overlay{
    width: 100%;
    height: 620px;
    object-fit: cover;
}

.hero-video .elementor-custom-embed-image-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 11, 30, 0.24); 
    pointer-events: none; 
    z-index: 2;
    
}


@media (max-width: 767px){
    .hero-video .elementor-wrapper {
        border-radius: 20px;
         border: 8px solid rgba(255, 255, 255, 0.12);
    }
    
   .hero-video .elementor-custom-embed-play {
      padding: 16px;  
   } 
    
   .hero-video .elementor-custom-embed-image-overlay {
    border-radius: 10px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    
}
}

Hero Banner Video Section Style CSS Class

hero-video

Logo Slider Style CSS

.logo-wrapper {
    position: relative;
    overflow: hidden;
 }   
    

.logo-marquee {
    display: flex;
    will-change: transform;
    animation: scrollX 60s linear infinite;
    backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
}


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


.left-color {
   background: conic-gradient(from 90deg at 50% 50%, #712EDE 0deg, rgba(0, 9, 46, 0) 144deg, rgba(11, 11, 30, 0) 180deg, rgba(11, 11, 30, 0) 360deg);
}

Logo Slider Style Class

logo-wrapper
logo-marquee
left-color

Pricing Section Style CSS

.ai-card {
  position: relative;
  border-radius: 12px;       
  background: rgba(255, 255, 255, 0.08); 
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  z-index: 1;
  overflow: hidden;
}


.ai-card::before {
  content: "";
  position: absolute;
  inset: 0;                  
  padding: 1.5px;              
  border-radius: inherit;    
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.1) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#FFF);
  -webkit-mask-composite: xor;
  z-index: 0;   
  opacity: 15%;
}



.ai-card-icon {
    display: flex;
    justify-content: center;
    align-items:center;
    padding: 16px;
    background: linear-gradient(180deg, #712EDE 0%, #BF97FF 100%);
   border-bottom: 2px solid #E3DEFF;
   box-shadow: inset 0px -4px 4px #6E58E8, inset 0px 4px 4px #887AD9;
   border-radius: 1000px;
}

@media (min-width: 1024px) and (max-width: 1220px) {
  .ai-card {
    padding: 20px;
  }
  
  .ai-card-head .elementor-heading-title{
     font-size:20px !important; 
  }
}

@media (max-width: 767px){
    .ai-card-icon{
       padding: 10px; 
    }
}


.ai-card-image {
    position: relative; 
    overflow: hidden;       
    z-index: 1;
}

.ai-card-image::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,rgba(11, 11, 30, 0) 60%, rgba(11, 11, 30, 1) 100%);
    border-radius: 8px;
  pointer-events: none;
}

Pricing Section Style CSS Class

ai-card
ai-card-icon
ai-card-image
payment-list-card full-access
payment-list-card payment-plan
payment-list-card why-chose-card

Custom FAQ Style CSS

.curriculum-item {
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 2px 4px 16px rgba(248, 248, 248, 0.06);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    border-radius: 12px;
    z-index: 1;
    overflow: hidden;
    }
    
.curriculum-item::before {
    content: "";
    position: absolute;
    inset: 0;                  
    padding: 1.5px;              
    border-radius: inherit;    
    background:linear-gradient(180deg,rgba(113, 46, 222, 1) 0%, rgba(191, 151, 255, 1) 100%);
   -webkit-mask:
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#FFF);
   -webkit-mask-composite: xor;
   z-index: 0;   
   opacity: 0%;
}


.curriculum-item::after {
    content: "";
    position: absolute;
    inset: 0;                  
    padding: 1.5px;              
    border-radius: inherit;    
    background: linear-gradient(
     180deg,
     rgba(255, 255, 255, 0.4) 0%,
     rgba(255, 255, 255, 0) 40%,
     rgba(255, 255, 255, 0) 60%,
     rgba(255, 255, 255, 0.1) 100%
   );
   -webkit-mask:
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#FFF);
   -webkit-mask-composite: xor;
   z-index: 0;   
   opacity: 15%;
}

.curriculam-list {
   position: relative;
   background: rgba(255, 255, 255, 0.03);
   box-shadow: inset 2px 4px 16px rgba(248, 248, 248, 0.06);
   -webkit-backdrop-filter: blur(50px);
   backdrop-filter: blur(50px);
   z-index: 3;
   overflow: hidden;
}

.curriculam-list::before {
   content: "";
   position: absolute;
   inset: 0;
   padding: 1.5px;
   border-radius: inherit;
   background: linear-gradient(
     180deg,
     rgba(255, 255, 255, 0.4) 0%,
     rgba(255, 255, 255, 0) 40%,
     rgba(255, 255, 255, 0) 60%,
     rgba(255, 255, 255, 0.1) 100%
   );
   -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   z-index: 2;
   opacity: 0.15;
   pointer-events: none;
}

.curriculam-list-item ol {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-inline-start: 24px;
}




@media (max-width:1023px){
    .curriculam-list-item ol{
     padding-inline-start: 20px;   
    }
}


@media (max-width:767px){
    .curriculam-list-item ol{
     padding-inline-start: 16px;   
    }
    
    .includes-list ul.elementor-icon-list-items.elementor-inline-items { 
    display: flex;
    flex-direction: column;
    gap: 10px;
}
}



.minus-icon{
    padding: 8px; 
    color: #ffffff; 
    background: linear-gradient(180deg, #712EDE 0%, #BF97FF 100%); 
    box-shadow: inset 0px -4px 4px #6E58E8, inset 0px 4px 4px #887AD9; 
    border-radius: 100px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0;
}   

.plus-icon { 
    padding: 8px; 
    color: #0B0B1E; 
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
    box-shadow: inset 0px -4px 4px #6E58E8, inset 0px 4px 4px #887AD9; 
    border-radius: 100px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
}

.crc-toggle {
    cursor: pointer;
}

.plus-icon,
.minus-icon {
    transition: opacity 0.2s ease;
}


.crc-content.e-con {
    min-height: initial;
}
.crc-content > .e-con-inner {
    min-height: var(--min-height);
}

.curriculum-item:hover::before,
.curriculum-item.is-active::before {
    opacity: 0.24;
}

.curriculum-item:hover::after,
.curriculum-item.is-active::after {
    opacity: 0;
}

@media (max-width: 767px) {
    .curriculum-item::before {
        opacity: 0;
    }

    .curriculum-item.is-active::before {
        opacity: 0.24;
    }

    .curriculum-item.is-active::after {
        opacity: 0;
    }
}

Custom FAQ Style CSS Classes

curriculam-list-item
curriculum-item
curriculam-list
crc-toggle
plus-icon
minus-icon
crc-content
includes-list

Custom FAQ JS Code

<script>
document.addEventListener('DOMContentLoaded', function () {
    const $ = jQuery;

    /* Elementor editor detect */
    if (document.body.classList.contains('elementor-editor-active')) {
        return;
    }

    const items = Array.from(document.querySelectorAll('.curriculum-item'));

    function closeAll() {
        items.forEach(item => {
            item.classList.remove('is-active');
            $(item).find('.crc-content').slideUp();
            $(item).find('.plus-icon').show();
            $(item).find('.minus-icon').hide();
        });
    }

    function openItem(item) {
        item.classList.add('is-active');
        $(item).find('.crc-content').slideDown();
        $(item).find('.plus-icon').hide();
        $(item).find('.minus-icon').show();
        resizeEvent();
    }

    /* Initial state */
    items.forEach(item => {
        $(item).find('.crc-content').hide();
        $(item).find('.minus-icon').hide();
        $(item).find('.plus-icon').show();
    });

    /* Default open first item */
    if (items.length) {
        openItem(items[0]);
    }

    /* Click handling */
    items.forEach(item => {
        const toggle = item.querySelector('.crc-toggle');

        toggle.addEventListener('click', function (e) {
            e.preventDefault();

            if (item.classList.contains('is-active')) {
                closeAll();
            } else {
                closeAll();
                openItem(item);
            }
        });
    });

    function resizeEvent() {
        setTimeout(function () {
            window.dispatchEvent(new Event('resize'));
        }, 400);
    }
});
</script>

Footer Style CSS Classes

.footer-list-item .elementor-icon-list-text {
  width: 115px;
}

@media (min-width: 1024px) and (max-width: 1255px) {
  .footer-list-item .elementor-icon-list-text {
    width: auto !important;  
    min-width: 70px !important;
    max-width: 100% !important;
    white-space: normal;
    flex: 1 1 auto;         
  }

  .footer-list-item .elementor-icon-list-items {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
  }
}



@media (max-width: 1023px) {
    .footer-list-item .elementor-icon-list-items {
        flex-direction: column;
        justify-content: flex-start; 
        gap: 10px;
    }
}

Footer Style CSS Class

footer-list-item

Get Your FREE Freelancing Roadmap

Stop hopping between tutorials. Grab the Freelancing Mastery Handbook to learn how to choose a skill, build your foundation, find clients, and confidently start your freelancing journey.

Free eBook Download

How To Make a AI Course Selling 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