How To Make Digital Marketing Agency Website Elementor Free

Quick Summary

Is WordPress still worth learning in 2026, when AI can create websites in seconds?

In this 4+ hour step-by-step WordPress & Elementor MasterClass, you’ll build a complete modern neubrutalism agency website from scratch using WordPress, Elementor, and mostly free tools — no coding required.

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

Join my FREELANCING Course Waitlist

This is not just a basic website tutorial. You’ll create a real, editable, client-friendly website with multiple pages, a blog system, contact form, responsive design, header, footer, and a professional layout that you can use for your portfolio, business, or client work.

AI can help you move faster. But if you want a website that is editable, secure, scalable, client-friendly, and ready for long-term use — WordPress still gives you serious control.

So in this tutorial, I built this full agency website to prove it.

👉 What you’ll build in this tutorial step-by-step

↪ A modern neubrutalism-style agency homepage

↪ A functional Contact page with a working form ↪ A complete Blog system with posts, categories, featured images, and comments ↪ A clean Header, Footer, and Navigation Menu ↪ A custom Logo + Favicon setup using free tools ↪ Fully responsive design for desktop, tablet, and mobile

1. Get your domain name, web hosting, and SSL certificate

3. Install a free theme, Elementor, and required plugins 4. Build the full agency website page by page, section by section

📌 In this MasterClass, you’ll also learn

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

Icon Gap Style CSS

<style>
.icon-fix-gap{
    line-height: 0;
}

.icon-fix-gap .elementor-icon{
    line-height: 0;
}
</style>

Icon Gap Style CSS Classes

icon-fix-gap

Dual Text Shadow CSS

.dual-text .ekit-heading--title > span{
    box-shadow: 8px 8px 0px #000000;
}

Dual Text Shadow CSS Class

dual-text

Button Icon Size CSS

.btn .elementor-button .elementor-button-icon{
    font-size: 20px;
}

Button Icon Size CSS Class

btn

Marquee Style CSS

.marquee-img {
  overflow: hidden;
}

.marquee-img > div {
    gap: var(--gap);
}

.marquee-img .elementor-widget-image {
  flex-shrink: 0;
  will-change: transform;
}

.marquee-img .elementor-widget-image img {
  display: block;
}


.marquee-text-container {
  overflow: hidden;
  width: 100%;
}

.marquee-wrapper {
  display: flex;
  width: max-content;
}

.marquee-text-container .elementor-widget-heading {
  flex-shrink: 0;
  white-space: nowrap;
  padding-right: 2px; /* spacing instead of gap */
}

Marquee Style CSS Classes

marquee-img
marquee-text-container

Marquee Style JS Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/CustomEase.min.js"></script>


<script>
window.addEventListener("load", () => {
  if (!window.gsap) return;
  gsap.registerPlugin(ScrollTrigger);

  const marquees = [];
  const CLONE_COUNT = 6; // 👈 increase / decrease here

  function setupMarquee(container, items) {
    const wrapper = document.createElement("div");
    wrapper.className = "marquee-wrapper";

    // original
    items.forEach(item => wrapper.appendChild(item));

    // clone MANY times
    for (let i = 0; i < CLONE_COUNT; i++) {
      items.forEach(item => {
        wrapper.appendChild(item.cloneNode(true));
      });
    }

    container.appendChild(wrapper);

    const width = items.reduce((acc, el) => {
      const style = getComputedStyle(el);
      return acc + el.offsetWidth + parseFloat(style.marginRight || 0);
    }, 0);

    marquees.push({
      wrapper,
      loopWidth: width * (CLONE_COUNT + 1),
      singleWidth: width,
      x: 0,
      speed: -0.6,
      baseSpeed: 0.6
    });
  }

  /* TEXT */
  document.querySelectorAll(".marquee-text-container").forEach(container => {
    const item = container.querySelector(".elementor-widget-heading");
    if (!item) return;
    setupMarquee(container, [item]);
  });

  /* IMAGE */
  document.querySelectorAll(".marquee-img").forEach(container => {
    const items = Array.from(
      container.querySelectorAll(".elementor-widget-image")
    );
    if (!items.length) return;
    setupMarquee(container, items);
  });

  /* SINGLE TICKER */
  gsap.ticker.add(() => {
    marquees.forEach(m => {
      m.x += m.speed;

      // BIG LOOP RESET (far away)
      if (m.x <= -m.loopWidth) m.x += m.loopWidth;
      if (m.x >= 0) m.x -= m.loopWidth;

      gsap.set(m.wrapper, { x: m.x });
    });
  });

  /* SCROLL DIRECTION */
  ScrollTrigger.create({
    start: 0,
    end: "max",
    onUpdate(self) {
      const boost = Math.min(Math.abs(self.getVelocity()) / 1200, 2);
      marquees.forEach(m => {
        m.speed =
          self.direction === -1
            ? m.baseSpeed + boost
            : -(m.baseSpeed + boost);
      });
    }
  });
});
</script>

Sticky Position Style CSS

.sticky {
    position: sticky;
    top: 20px;
}

Sticky Position Style CSS Class

sticky

Video Play Button Style CSS

.video-play .elementor-custom-embed-play{
    padding: 25px;
    background: white;
    line-height: 0;
    border-radius: 100%;
}

.video-play img{
    height: 608px;
    width: 600px;
}

@media (max-width: 1024px){
    .video-play img{
    height: 550px;
    
}
}

@media (max-width: 767px){
    .video-play img{
    height: 290px;
    
}
}

Video Play Button Style CSS Class

video-play

Banner Heading Style CSS

.dual-text .ekit-heading--title > span {
    box-shadow: 8px 8px 0px #000000;
}

Banner Heading Style CSS Class

dual-text

Icon Gap Style CSS

.icon-fix-gap{
    line-height: 0;
}

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

Icon Gap Style CSS Class

icon-fix-gap

Blog Post Style CSS

.blog-post .wpr-grid-extra-icon-right{
    font-size: 20px;    
    }
    
.blog-post .wpr-button-effect{
    display: inline-flex!important;
}

.blog-post .wpr-grid-item-inner{
        display: flex;
    flex-direction: row-reverse;
}

.blog-post .wpr-grid-item-below-content{
    width: 560px!important;
}

.blog-post .wpr-grid-media-wrap{
    width: calc(100% - 560px)!important;
}

@media(max-width: 1024px){
    .blog-post .wpr-grid-item-below-content{
    width: 50%!important;
}

.blog-post .wpr-grid-media-wrap{
    width: 50%!important;
}
}



.blog-post .wpr-grid-image-wrap, .blog-post .wpr-grid-media-wrap{
    display: flex;
    height: 440px;
    width: 100%;
}

.blog-post img{
    object-fit: cover;
}

.blog-post .wpr-grid-item{
    overflow: hidden;
}

@media(max-width: 767px){
    .blog-post .wpr-grid-item-inner{
    flex-direction: column;
}
    
    .blog-post .wpr-grid-item-below-content{
    width: 100%!important;
}

.blog-post .wpr-grid-media-wrap{
    width: 100%!important;
}

.blog-post .wpr-grid-image-wrap, .blog-post .wpr-grid-media-wrap{
    
    height: 290px;
   
}
}


.blog-post-grid img{
    height: 280px;
    object-fit: cover;
}

.blog-post-grid .wpr-grid-item-below-content{
    overflow: hidden;
}

.blog-post-grid .wpr-grid-item{
    transition: all 0.3s ease;
}

.blog-post-grid .wpr-grid-item:hover {
    box-shadow: 4px 4px 0px 0px #B88DFF!important;
}

.blog-post-grid .inner-block{
    background-color: #F5F4F1;
}

/*==================*/

.blog-post .elementskit-post-body {
    border-radius: 0 0 24px 24px;
}

.blog-post .elementskit-entry-header img {
    height: 280px;
    object-fit: cover;
}

Blog Post Style CSS Classes

blog-pos
blog-post-grid

How To Make Digital Marketing Agency Website 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