eSports and Gaming Landing Page using Elementor | WordPress 2024

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

[STEP BY STEP from Scratch] In this tutorial, You'll learn How to Make A Responsive eSports & Gaming 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

Slider Area CSS

<style>
.slider__area::before,.slider__area::after  {
    content: "";
    position: absolute;
    left: 0;
    top: auto;
    bottom: 0;
    width: 50%;
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    background-color: #45F882;
    height: 50px;
}


.slider__area::after {
   left: auto;
    right: 0;
    -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
</style>

Slider Area Class

slider__area

Banner Object CSS

.slider__shapes{ 
    opacity: 0.27;
    
}

.slider__shapes .shapes {
    animation: shapeBlinker 1.5s linear infinite;
    opacity: 1;
    z-index: -1;
}
.slider__shapes .shapes-1 {
  animation-delay: 0.2s!important;
}

.slider__shapes .shapes-2 {
  animation-delay: 0.4s!important;
}

.slider__shapes .shapes-3{
  animation-delay: 0.2s!important;
}

.slider__shapes .shapes-4 {
  animation-delay: 0.6s!important;
}

@-webkit-keyframes shapeBlinker {
  50% {
    opacity: 0.59;
  }
}
@keyframes shapeBlinker {
  50% {
    opacity: 0.59;
  }
}

Banner Object Classes

slider__shapes
shapes-1
shapes-2
shapes-3
shapes-4

Title Style CSS

.tittle::after {
    content: "";
    display: block;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 93.846% 100%, 6.154% 100%, 0% 0%);
    clip-path: polygon(0% 0%, 100% 0%, 93.846% 100%, 6.154% 100%, 0% 0%);
    width: 65px;
    height: 5px;
    margin: 20px auto 0;
    background: #45F882;
}

Title Style Class

tittle

Button Style CSS

.btn svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.btn .cls-1 {
    fill: #45F882;
    stroke: #fff;
    stroke-width: 1.5px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
.btn:hover .cls-1{
    fill: #fff;
}


.btn-1 path {
    stroke: #45F882;
}
.btn-2 path {
    stroke:  #FFBE18;
}
.btn-3 .cls-1 {
    fill: #FFBE18 !important;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;}
    
.btn-3:hover .cls-1{
    fill: #45F882 !important
    
}

Button Style Classes

btn
cls-1
btn-2
btn-3

Timeline Border CSS

.Timeline-border::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    background: -moz-linear-gradient(90deg, #10161c 0%, #45F882 100%);
    background: -webkit-linear-gradient(90deg, #10161c 0%, #45F882 100%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
}

Timeline Border Class

Timeline-border

Team Section CSS

.team__item{
    transition: 0.3s linear;
    
}

.team__item::before, .team__item::after {
    content: "";
    position: absolute;
    left: 0;
    top: -60px;
    width: 70px;
    height: 320px;
    background: #45F882;
    -webkit-transform: rotate(-55deg);
    -moz-transform: rotate(-55deg);
    -ms-transform: rotate(-55deg);
    -o-transform: rotate(-55deg);
    transform: rotate(-55deg);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    opacity: 0.55;
    z-index: -1;
}

.team__item::after {
    left: auto;
    right: 0;
    -webkit-transform: rotate(55deg);
    -moz-transform: rotate(55deg);
    -ms-transform: rotate(55deg);
    -o-transform: rotate(55deg);
    transform: rotate(55deg);
}

.team__item:hover {
    -webkit-transform: translateY(-7px);
    -moz-transform: translateY(-7px);
    -ms-transform: translateY(-7px);
    -o-transform: translateY(-7px);
    transform: translateY(-7px);
} 

.team__item:hover::before, .team__item:hover::after {
    opacity: 1;
}

Team Section Class

team__item

Tab Section CSS

.tabs svg{
    border-radius: 50px;
}

.tabs .e-n-tab-title-text{
    display: none;
}

.tabs .e-n-tabs-heading{
    padding: 22px 0;
    position: relative;
    width: 83.33333333%;
    margin: auto!important;
}

.tabs .e-n-tabs-heading::before, .tabs .e-n-tabs-heading::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--e-global-color-secondary) 50%, transparent 100%);
}

.tabs .e-n-tabs-heading::after{
    top: 123px!important;
}


.tabs .tab-content::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: 0;
    width: calc(100% - 30px);
    height: 1px;
    background: #45F882;
    background: linear-gradient(45deg, rgba(2, 0, 36, 0) 0%, #45F882 100%);
    opacity: 0.329;
    
}
.tabs .about__content-list{
    background-image: -moz-linear-gradient(0deg, #1f2935 0%, transparent 100%, #10181f 100%);
    background-image: -webkit-linear-gradient(0deg, #1f2935 0%, transparent 100%, #10181f 100%);
    background-image: -ms-linear-gradient(0deg, #1f2935 0%, transparent 100%, #10181f 100%);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: 0.3s linear;
    -moz-transition: 0.3s linear;
    -ms-transition: 0.3s linear;
    -o-transition: 0.3s linear;
    transition: 0.3s linear;
}

.tabs .about__content-list:hover{
    -webkit-transform: translateX(-10px);
    -moz-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    -o-transform: translateX(-10px);
    transform: translateX(-10px);
}
.tab-button-gradient .elementor-button{
    background-image: -moz-linear-gradient(90deg, #10181f 0%, transparent 0%, #141a20 100%);
    background-image: -webkit-linear-gradient(90deg, #10181f 0%, transparent 0%, #141a20 100%);
    background-image: -ms-linear-gradient(90deg, #10181f 0%, transparent 0%, #141a20 100%);
}

Tab Section Classes

tabs
tab-content
about__content-list
tab-button-gradient

Custom Carousel CSS

.custom-carousel .gallery__content{
    opacity: 0;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
}

.custom-carousel .swiper-slide-next .gallery__content {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
}

.custom-carousel .gallery__item{
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
}

.custom-carousel .swiper-slide-next .gallery__item{
        -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

@media (max-width: 766px) {

.custom-carousel .swiper-slide-active .gallery__content{
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
} 

}

Custom Carousel Class

custom-carousel
gallery__item
gallery__content

Roadmap Style CSS

.roadMap-box.active::before {
    content: "";
    position: absolute;
    left: -42px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 18px;
    border-color: transparent transparent transparent #45F882;
    opacity: 0.9;
    z-index: -1;
}   
    
.roadMap__list svg{  
    
    position: a;
    border: 2px solid #262e38;
    border-radius: 500%;
    
}

.roadMap__list.active svg{
    border-color: #1b242e !important;
}

.roadMap-box img{
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.roadMap-box:hover img{
    opacity: 0.11!important;
}

Roadmap Style Classes

roadMap-box
roadMap__list

Trending Section CSS

.Nft__item .Nft-price .eth{
    color: var(--e-global-color-a5230b3);
    font-weight: 700;
    margin-left: 5px;
}

.Nft__item .Nft-price .elementor-icon-list-icon, .Nft-price .elementor-icon-list-icon svg{
    margin: 0;
}

.Nft__item .divider .elementor-divider-separator::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #383d44 50%, transparent 100%);
}

.heart-right{
        margin-left: auto;
}

Trending Section Classes

Nft__item
heart-right
divider

Responsive Area CSS

@media (max-width: 1500px){
.slider__area::before, .slider__area::after {
    height: 40px;
}
}

@media (max-width: 1024px){
.slider__area::before, .slider__area::after {
    height: 30px;
}
}


@media  (max-width: 767px){
    .tabs .tab-content::after{
    width: calc(100% - 15px);
    }
}

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

eSports and Gaming Landing Page using Elementor | WordPress 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