Digital Marketing Agency Using Elementor | WordPress 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 Digital Marketing Agency Website using WordPress & Elementor Free Version. This WordPress & Elementor Full Course is for Complete Beginners.

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

I know the “Business Agency” term is 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 won't be using any 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 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

Kitpapa Ready made Elementor template kits.

Get Templates

Prompt Used in This Tutorial

Animation Pulse CSS

<style>
.animation-pulse{
  position: relative;
  animation: animation-pulse 3s linear infinite alternate;
}
@keyframes animation-pulse {
  0%   {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}
</style>

Animation Pulse CSS Class

animation-pulse

Animation Wobble CSS

.animation-wobble{
  position: relative;
  animation: animation-wobble 3s linear infinite alternate;
}

@keyframes animation-wobble {
  0%   {transform: translateY(10px);}
  50% {transform: translateY(-10px);}
  100% {transform: translateY(10px);}
}

Animation Wobble CSS Class

animation-wobble

Mouse Animation CSS

.mouse-animation{
    position: relative;
    animation: mouse-animation 3s linear infinite alternate;
}
@keyframes mouse-animation {
  0%   {transform: translateY(2px);}
  50% {transform: translateY(-2px);}
  100% {transform: translateY(2px);}
}

Mouse Animation CSS Class

mouse-animation

Circle Animation CSS

.circle-animation{
    animation: rotate 20s linear infinite;
}
@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Circle Animation CSS Class

circle-animation

Background Glass Effect CSS

.bg-glass-effect{
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

Background Glass Effect CSS Class

bg-glass-effect

Button Gradient Border CSS

.elementor-button,.blog-post .jkit-meta-readmore a{
    position: relative;
}

.elementor-button::before,.blog-post .jkit-meta-readmore a::before {
content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px; 
  padding: 1px; 
  background:linear-gradient(90deg,#20D9A1,#5F39FF); 
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  
}

Service Icon Box CSS

.service-box .service-icon .elementor-widget-container{
        transition: all .3s;
    }
.service-box:hover .service-icon .elementor-widget-container{
        background-color: transparent;
        background-image: linear-gradient(180deg, #20d9a1 0%, #5f39ff 100%);
    }

Service Icon Box CSS Classes

service-box
service-icon

Team Member Hover Effect CSS

.image-wraper-item{
        transform: scale(0);
        transition: transform  0.5s;
    }
.image-wraper:hover .image-wraper-item{
        transform: scale(1);
    }

Team Member Hover Effect CSS Classes

image-wraper
image-wraper-item

Service List CSS

.service-list svg{
        position: relative;
        top: 10px;
    }
    .elementor-icon-box-title{
        transition: all 0.3s;
    }
    .service-list:hover .elementor-icon-box-title{
        color: #5F39FF !important;
    }
    .service-list:hover .elementor-icon{
        fill: #5F39FF !important;
    }
    
    .circle{
        height: 350px;
        width: 350px;
    }

Service List CSS Class

service-list
circle

Blog Post CSS

.blog-post .by{
    margin-right: 5px;
}

Blog Post CSS Class

blog-post

Digital Marketing Agency 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