How To Make a Creative Design Agency Website Using Elementor Free

Quick Summary

Get Free Domain & Web Hosting (up to 78% OFF 💸)

(Use coupon JFD10 for an exclusive discount)

FREELANCING MASTERY is now LIVE!

(The wait is over — enroll in the full course now.)

Build this website once… and you’ll have a web design skill you can use again and again.

In this complete 5+ hour step-by-step masterclass, you’ll learn how to create a professional creative design agency website with WordPress and Elementor using free tools.

This is not just a homepage tutorial. We’ll build a complete multi-page agency website with a modern homepage, about page, services page, single service pages, pricing page, blog, contact form, Google Map, header, footer, navigation menu, and full mobile responsiveness.

In this tutorial, Humayra Islam from Jim Fahad Digital shows you how to build a modern creative agency website using WordPress and Elementor — step by step, from a fresh WordPress installation to the final responsive website.

You don’t need coding skills, Elementor Pro, or previous web design experience. Everything is built with beginner-friendly tools and a simple drag-and-drop workflow.

Beginners who want to learn WordPress and Elementor

Freelancers who want to build client-ready websites

Graphic designers and creative agencies

Business owners who want to create their own website

Anyone who wants to learn web design without coding

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

Default Style CSS

.elementor-icon svg{
    width: auto;
    height: auto;
}

.elementor-icon{
    line-height: 0;
}

.elementor-icon, .elementor-icon-wrapper{
    line-height: 0;
}
.service-box *{
    transition: all 0.3s ease;
}

.service-box:hover *{
    color: white;
}


.clients-img-box  img{
    max-width: 68px!important;
}

Default Style CSS Classes

service-box 
clients-img-box

Button Style CSS

.elementor-button {
        position: relative;
        overflow: hidden;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        transition: all 0.4s ease;
    }

.elementor-button .elementor-button-text  {
        display: inline-block;
        transition: all 0.4s ease;
    }

    /* Duplicate Text (dynamic) */
.elementor-button::before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        color: currentColor;
        transition: transform 0.4s ease, opacity 0.4s ease;;
    }

 .elementor-button:hover .elementor-button-text, .elementor-button:hover .elementor-button-icon{
        transform: translateY(-100%);
        opacity: 0;
    }

.elementor-button::before {
        transform: translateY(100%);
    }

 .elementor-button:hover::before{
        transform: translateY(0);
        opacity: 1;
    }
    
    
.btn-icon .elementor-button .elementor-button-icon{
    background-color: #3B2CFF;
    padding: 10px;
    border-radius: 100px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.btn-icon .elementor-button:hover .elementor-button-icon{
    background: #FFFFFF;
}

.btn-icon .elementor-button .elementor-button-content-wrapper{
    align-items: center;
}

.btn-icon-secondary .elementor-button .elementor-button-icon{
    background-color: #FFFFFF;
    color: #4F5450;
}
.btn-icon-secondary .elementor-button:hover .elementor-button-icon{
    background-color: #3B2CFF;
    color: #FFFFFF;
}

.btn-icon-tertiary .elementor-button .elementor-button-icon{
    padding: 7px;
}

.btn-icon-white .elementor-button .elementor-button-icon{
    color: #FFFFFF;
}

Button Style Class Classes

btn-icon
btn-icon-secondary
btn-icon-tertiary
btn-icon-white

Button Style JS Code

<script>
document.addEventListener("DOMContentLoaded", () => {
  setTimeout(() => {
    document.querySelectorAll('.elementor-button').forEach(btn => {
      const textEl = btn.querySelector('.elementor-button-text');
      if (textEl) {
        const text = textEl.textContent.trim();
        btn.setAttribute('data-text', text);
      }
    });
  }, 300); 
});
</script>

Marquee Style CSS

.marquee-container{
    transform: translateX(0);
    animation: marquee 45s linear infinite;
    white-space: nowrap;
    will-change: transform;
}



@keyframes marquee{
     0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-50%);
  }
  
  100% {
      transform: translateX(0);
  }
}

Marquee Style CSS Class

marquee-container

Form Style CSS Class

<style>

.form-button .mf-btn-wraper svg {
    width: 36px;
    height: 36px;
    padding: 10px;
    border-radius: 100px;
    background: var(--e-global-color-5be58cb);
    
}

.form-button .metform-submit-btn  {
    display: flex;
    align-items: center;
    gap: 10px;
}
</style>

Form Style CSS Class

form-button

Blog Style CSS

.blog-post .elementskit-btn svg{
    margin-left: 10px;
    width: 30px;
    height: 30px;
    color: #2b322c;
    background: #FFFFFF;
    padding: 7px;
    border-radius: 100%;
}

.blog-post .elementskit-post-image-card:hover .elementskit-entry-thumb>img {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

.blog-post .elementskit-post-image-card .elementskit-entry-thumb>img{
    max-height: 270px;   
    object-fit: contain;
    max-width: 100%!important;
}


.blog-post .post-items .col-lg-4:nth-of-type(3n+2) .post-cat {
    background-color: #3B2CFF;
}
.blog-post .post-items .col-lg-4:nth-of-type(3n+3) .post-cat{
    background-color: #FBBC05;
    color: #2b322c;
    
}
.blog-post .post-items .col-lg-4:nth-of-type(3n+3) .post-cat svg{
    color: #2b322c;
    
}

.blog-post .col-lg-4{
    padding-right: 16px!important;
    padding-left: 16px!important;
}

.blog-post .row{
    margin-right: -16px!important;
    margin-left: -16px!important;
}

.blog-post img{
    height: 520px;
    object-fit: cover;
}
@media (max-width: 1024px){

.blog-post img{
    height: 350px;
}

}

@media (max-width: 767px){

.blog-post img{
    height: 300px;
}

}

Blog Style CSS Class

blog-post

Sinlge Blog Post Thumbnail Style CSS

<style>
    .post-thumbnail img{
    height: 480px;
    object-fit: cover;
}

@media (max-width: 767px){
    .post-thumbnail img{
    height: 360px;
    
}
}
</style>

Sinlge Blog Post Thumbnail Style CSS Class

post-thumbnail

How To Make a Creative Design Agency Website Using Elementor Free

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