How To Create Digital Marketing Agency Website Using Elementor Flexbox

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.)

In this tutorial, You'll learn How to Make a Business Website or a Digital Marketing Agency Website using WordPress & Elementor Free Version. This Elementor Masterclass is for Complete Beginners.

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

I know the "Business", "Service Business", “Digital Agency” terms are kinda broad. So let me just give you some idea about what type of websites you can create by following this tutorial. You can create “A Web Design Agency Website”, “SEO Company Website”, “Facebook Ads Agency Website”, “Consulting Business Website”, “Logo Designer or Graphic Designer Website”, “Content Writing Services Website”, “Freelancer’s Portfolio Website” OR any kind of “Business Website”!!

And, in this tutorial, I'll provide you all necessary templates. So there's no boundary. After watching this tutorial, you can design any type of website for yourself or for your clients.

⏰Timestamps for creating a BUSINESS website step by step ⏰

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

Kitpapa Ready made Elementor template kits.

Get Templates

Project Files Download the resources used in this tutorial.

Download Files

Project Files Download the resources used in this tutorial.

Download Files

Prompt Used in This Tutorial

Hide horizontal overflow for the entire page CSS

<style>
/* Hide horizontal overflow for the entire page */
html, body {
   overflow-x: hidden;
}
</style>

Column Maximum Width CSS

@media (max-width: 767.98px) {
    
.img-banner-mx-w {
    max-width: 350px;
    margin: 0 auto;
}

Column Maximum Width CSS Class

img-banner-mx-w

Orange Button Style CSS

.cta-btn-2 .elementor-button .elementor-button-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-btn-2 .elementor-button .elementor-button-icon {
    background: #fff;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #fff;
}
.cta-btn-2 .elementor-button {
    display: flex;
    justify-content: end;
    align-items: center;
    height: 50px;
}


.cta-w-165 .elementor-button{
    width: 165px;
}

Orange Button Style CSS Classes

cta-btn-2
cta-w-165

Orange Button Hover Effect CSS

.pulse-orr .elementor-button:hover {
          animation: pulses-orrange 1s;
          box-shadow: 0 0 0 2em transparent;
}
@keyframes pulses-orrange {
  0% {
    box-shadow: 0 0 0 0 #ff512a;
  }
}

Orange Button Hover Effect CSS Class

pulse-orr

Pulse Animation CSS

.anim-top {
    animation: anim-top 2s infinite linear;
    animation-direction: alternate;
}
@keyframes anim-top{
    from{
        transform: scale(.7);
    }
    to{
        transform: scale(1);
    }
}

Pulse Animation CSS Class

anim-top

Rotated Animation CSS

.anim-rotate {
    animation: anim-rotate 4s infinite linear;
    animation-direction: alternate;
}
@keyframes anim-rotate{
    from{
        transform: rotate(0deg) scale(1);
    }
    to{
        transform: rotate(360deg) scale(.3);
    }
}

Rotated Animation CSS Class

anim-rotate

Green Button CSS

.cta-btn-3 .elementor-button .elementor-button-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-btn-3 .elementor-button .elementor-button-icon {
    background: #fff;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #101700;
}
.cta-btn-3 .elementor-button {
    display: flex;
    justify-content: end;
    align-items: center;
    height: 50px;
}

.cta-w-192 .elementor-button{
    width: 192px;
}

Green Button CSS Classes

cta-btn-3
cta-w-192

Green Button Hover Effect CSS

.pulse-lgrn .elementor-button:hover{
          animation: pulses-lgreen 1s;
          box-shadow: 0 0 0 2em transparent;
}
@keyframes pulses-lgreen {
  0% {
    box-shadow: 0 0 0 0 #cafc01;
  }
}

Green Button Hover Effect CSS Class

pulse-lgrn

How To Create Digital Marketing Agency Website Using Elementor Flexbox

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