SAAS Landing Page using Elementor Flexbox | WordPress Elementor 2024

Quick Summary

(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 SAAS 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!)

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

Kitpapa Ready made Elementor template kits.

Get Templates

Prompt Used in This Tutorial

Banner Icon Box

selector .elementor-icon:after {
    position: absolute;
    left: -10px;
    bottom: -10px;
    content: "";
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background: #ffffff;
    z-index: 1;
    opacity: 0.1;
}

Working Process

selector:after {
    position: absolute;
    left: 20%;
    right: 20%;
    content: "";
    height: 1px;
    border-top: 2px dashed #5153ff;
    z-index: -1;
    top: 50%;
    transform: translateY(-50%);
}

@media only screen and (max-width: 1024px){
    selector:after {
        display: none;
    }    
}

Service Section Animated Icon

selector{
    animation: UpDown 4s linear infinite;
}

/* Infinite Up Down Animation */
@keyframes UpDown {
	0% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}

	50% {
		-webkit-transform: translateY(-25px);
		transform: translateY(-25px);
	}

	100% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}
}

Footer Background CSS

<style>
    .about::after {
    position: absolute;
    right: 0;
    top: -50%;
    content: "";
    height: 200%;
    width: 500%;
    background: #efefff;
    z-index: -1;
}
.about::before {
    position: absolute;
    right: 0;
    top: -120px;
    content: "";
    height: 1px;
    width: 500%;
    background: #e7e7e7;
    z-index: 1;
}

@media only screen and (max-width: 1024px){
.about::before {
    display: none;
}
.about::after{
    display: none;
}
.about .logo img {
    filter: brightness(0) invert(1);
}
} 
</style>

Footer Background Class

about

Button Hover Effect

.btn .elementor-button{
    border: 30px;
    position: relative;
    overflow: hidden;
    border: 2px solid #dddddd;
}
.btn .elementor-button:hover{
    border-color: #10393b;
    transition: all 0.25s ease-in-out;
}
.btn .elementor-button:after {
    position: absolute;
    top: inherit;
    right: inherit;
    bottom: inherit;
    left: -5%;
    content: "";
    height: 150px;
    width: 115%;
    z-index: 1;
    background-color: #10393b;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    -webkit-transform: translateY(-45%) skew(25deg) scale(0);
    transform: translateY(-45%) skew(25deg) scale(0);
}
.btn .elementor-button:hover:after {
    -webkit-transform: translateY(-45%) skew(25deg) scale(1.2);
    transform: translateY(-45%) skew(25deg) scale(1.2);
}
.btn .elementor-button-text{
    z-index: 2;
}
.btn-white .elementor-button{
    border: 2px solid #fff;
}

SAAS Landing Page using Elementor Flexbox | WordPress Elementor 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