How To Create SAAS, Software Landing Page By Using Elementor Free | WordPress 2025

(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 Business 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 “Business Agency” 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 How To Make a FREE Professional Website Step By Step 2026 (WordPress And Elementor For Beginners)!

⏰Timestamps for creating a WORDPRESS 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

Kitninja eCommerce Elementor template kits.

Get Templates

Prompt Used in This Tutorial

Hide horizontal overflow for the entire page CSS

<style>
.elementor-widget .elementor-icon-list-items {
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

html, body {
   overflow-x: hidden;
}
a{
    text-decoration: none !important;
}
</style>

Hero Banner Style CSS

.hero-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background-image: url('https://kitpapa.net/appnetic/wp-content/uploads/2025/06/Mask-group-1.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
  z-index: 1;
  pointer-events: none;
}

Hero Banner Style CSS Class

hero-wrapper

Hero Banner Title Style CSS

.hero-what-new-wrapper {
background: #4300EE;
box-shadow: inset 1px 1px 6px 2px rgba(255, 255, 255, 0.1), inset -1px -1px 6px 2px rgba(255, 255, 255, 0.1);
border-radius: 100px;
}  

.hero-connected-button .elementor-button-icon {
    font-size: 16px;
}

.hero-connected-button .elementor-button-icon svg {
    fill: none !important;
}

Hero Banner Title Style CSS Classes

hero-what-new-wrapper
hero-connected-button

Button Shadow Style CSS

.button-shadow .elementor-button {
    background: #4300EE;
    box-shadow: 
        0 0 0px 0px rgba(67, 0, 238, 0),
        inset -2px -2px 12px 2px rgba(255, 255, 255, 0.16), 
        inset 2px 2px 10px 2px rgba(255, 255, 255, 0.16);
    border-radius: 100px;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(1);
    position: relative;
    z-index: 1;
}

.button-shadow .elementor-button:hover {
    transform: scale(1.05);
    box-shadow: 
        0 0 20px rgba(67, 0, 238, 0.8),
        0 0 40px rgba(67, 0, 238, 0.6),
        inset -2px -2px 12px 2px rgba(255, 255, 255, 0.16),
        inset 2px 2px 10px 2px rgba(255, 255, 255, 0.16);
}

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

.button-shadow .elementor-button-icon svg {
    fill: none !important;
}

Button Shadow Style CSS Class

button-shadow

Product Item BG Style CSS

.product-item-bg {
      background: 
    linear-gradient(142.02deg, rgba(0, 16, 255, 0) 1.07%, rgba(242, 0, 255, 0.1) 97.45%),
    linear-gradient(142.02deg, rgba(0, 16, 255, 0.1) 1.07%, rgba(242, 0, 255, 0.1) 97.45%);
  
  -webkit-backdrop-filter: blur(20.7357px);
  backdrop-filter: blur(20.7357px);
}

Product Item BG Style CSS Class

product-item-bg

Gradient Border Style CSS

.gradient-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: radial-gradient(circle at center, #4550F1 0%, rgba(55, 37, 49, 0) 80%) !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 20px;
  pointer-events: none;
  z-index: 2;
}

.gradient-border::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: radial-gradient(circle at center, #4550F1 0%, rgba(55, 37, 49, 0) 80%) !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 20px;
  pointer-events: none;
  z-index: 2;
}

Gradient Border Style CSS Class

gradient-border

Slider Style CSS

.slider-item {
      background: linear-gradient(142.02deg, rgba(61, 35, 178, 0.1) 1.07%, rgba(242, 0, 255, 0.1) 97.45%);
  backdrop-filter: blur(20.7357px);
  -webkit-backdrop-filter: blur(20.7357px);
  border-radius: 20px;
}


.parent-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slider-track-left, .slider-track-right {
  display: flex;
  width: max-content;
}

.slider-track-left {
  animation: slideLeft 40s linear infinite;
}

.slider-track-right {
  animation: slideRight 40s linear infinite;
}

.slider-track-left:hover,
.slider-track-right:hover {
  animation-play-state: paused;
}

@keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% / 2));
  }
}

@keyframes slideRight {
  0% {
    transform: translateX(calc(-100% / 2));
  }
  100% {
    transform: translateX(0);
  }
}



.slider-content {
  display: flex !important;
  flex-wrap: nowrap !important;
}

.parent-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(270deg, #030116 0%, rgba(3, 1, 22, 0) 30%, rgba(3, 1, 22, 0) 70%, #030116 100%);
  pointer-events: none;
  z-index: 2; 
}

Slider Style CSS Class

parent-container
slider-item
slider-track-left
slider-track-right
slider-content

Logos Area Style CSS

.logo-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #030116 0%, rgba(3, 1, 22, 0) 30%, rgba(3, 1, 22, 0) 70%, #030116 100%);
  pointer-events: none;
  z-index: 2;
}

Logos Area Style CSS Class

logo-section

Pricing Switch HTML & CSS

<div class="billing-toggle">
  <label class="switch">
    <input type="checkbox" id="billingSwitch">
    <span class="slider"></span>
  </label>
</div>

<style>
.billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #F5F5F8;
}

.switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 28px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ffffff; 
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  top: 4px;
  background-color: #4F1AD6; 
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #4F1AD6;
}

input:checked + .slider:before {
  transform: translateX(30px);
  background-color: #ffffff;
}
</style>

Pricing Table Toggle JS

<script>
document.addEventListener("DOMContentLoaded", function () {
  if (!document.body.classList.contains("elementor-editor-active")) {
    const toggle = document.getElementById("billingSwitch");
    const monthly = document.querySelector(".monthly-plan");
    const annual = document.querySelector(".annual-plan");

    monthly.classList.add("show");
    annual.classList.remove("show");

    toggle.addEventListener("change", function () {
      if (toggle.checked) {
        monthly.classList.remove("show");
        annual.classList.add("show");
      } else {
        monthly.classList.add("show");
        annual.classList.remove("show");
      }
    });
  }
});
</script>

Pricing Table Toggle Style CSS

<style>

body:not(.elementor-editor-active) .monthly-plan,
body:not(.elementor-editor-active) .annual-plan {
  display: none;
}

body:not(.elementor-editor-active) .monthly-plan.show {
  display: block;
}

body:not(.elementor-editor-active) .annual-plan.show {
  display: block;
}

</style>

Pricing Table Toggle Style CSS Classes

monthly-plan
annual-plan

Pricing Table List Item Style CSS

.pricing-section {
    background: #020219;
box-shadow: 0px -45px 85px rgba(1, 13, 182, 0.55), 0px 45px 85px rgba(1, 13, 182, 0.55);
border-radius: 12px;
}

.price-icon-list .elementor-icon-list-item {
    display: flex;
    padding: 5px 6px 5px 6px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 100px;
    margin-bottom: 8px;
}

.price-list-opacity {
    opacity: 0.2;
}

Pricing Table List Item Style CSS Classes

pricing-section
price-icon-list
price-list-opacity

Main Menu Style CSS

<style>
@media (min-width:1025px) {
    .main-menu .elementskit-submenu-panel {
  display: inline-flex !important;
  flex-direction: column;
  width: auto !important;
  min-width: max-content !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.menu-section {
    background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: inset 2px 2px 10px 2px rgba(255, 255, 255, 0.1), inset -2px -2px 12px 2px rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
border-radius: 100px;
}

}

.main-menu .elementskit-navbar-nav > li:nth-child(3) {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.main-menu .elementskit-navbar-nav > li:nth-child(3)::after {
    content: " New";
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    background-color: #4706EE;
    box-shadow: inset 1px 1px 6px 2px rgba(255,255,255,0.1), inset -1px -1px 6px 2px rgba(255,255,255,0.1);
    border-radius: 100px;
    padding: 3px 8px 3px 20px;
    border-radius: 12px;
    margin-left: 8px;
    position: relative;
    display: inline-block;
}


.main-menu .elementskit-navbar-nav > li:nth-child(3)::before {
    content: "";
    position: absolute;
    right: 36px;
    width: 12px;
    height: 12px;
    background: url('https://kitpapa.net/appnetic/wp-content/uploads/2025/06/Star.svg') no-repeat center;
    background-size: 10px 10px; 
    z-index: 10;
}
</style>

Main Menu Style CSS Classes

menu-section
main-menu

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 Create SAAS, Software 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