How To Make a FREE Professional Website ~Step By Step~ 2026 (WordPress And Elementor For Beginners)

(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 Professional Business Agency Website using WordPress & Elementor Free Version. This WordPress & Elementor Masterclass 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. Learn How To Make a FREE Professional Website.

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

Learn How To Make a FREE Professional Website Step By Step 2026 (WordPress And Elementor For Beginners)

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

Default Style CSS

<style>

p {
    margin: 0;
}


    .icon .elementor-icon-wrapper {
    display:flex;
}

span.elementor-icon-list-icon svg {
    margin: 0 !important;
}

li.elementor-icon-list-item .elementor-icon-list-text {
    padding: 0 !IMPORTANT;
}

</style>

Left Right Moving Animation Style Css

.projectCompleteBadge {
    animation: moviongElement 4s infinite linear;
}

@keyframes moviongElement{
    0%{
        transform: translateX(0px);
    }
    50%{
        transform: translateX(-50px);
    }
}

Left Right Moving Animation Style Css Class

projectCompleteBadge

Marquee Animation 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-img::after {
    content:'';
    position:absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #F3F3F3 3.4%, rgba(243, 243, 243, 0) 19.62%, rgba(243, 243, 243, 0) 79.95%, #F3F3F3 96.66%);
    pointer-events: none;
}

Marquee Animation Style Css

marquee-img

Marquee Animation 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>
    
//SCRIPT FOR MARQUEE
window.addEventListener("load", function() {
  if (typeof gsap === 'undefined') {
    console.error('GSAP not loaded');
    return;
  }

  gsap.registerPlugin(ScrollTrigger);

  const marquees = document.querySelectorAll(".marquee-img");

  marquees.forEach(marquee => {
    const images = marquee.querySelectorAll(".elementor-widget-image");
    if (images.length === 0) return;

    // --- Clone images for seamless loop ---
    const cloneCount = 2;
    for (let i = 0; i < cloneCount; i++) {
      images.forEach(img => {
        marquee.appendChild(img.cloneNode(true));
      });
    }

    const allImages = marquee.querySelectorAll(".elementor-widget-image");
    const firstSet = Array.from(images);
    const totalWidth = firstSet.reduce((acc, img) => acc + img.offsetWidth, 0);

    // --- Wrapper to contain all images horizontally ---
    const wrapper = document.createElement('div');
    wrapper.style.display = 'flex';
    wrapper.style.width = 'max-content';

    // Move all images into wrapper
    allImages.forEach(img => wrapper.appendChild(img));
    marquee.appendChild(wrapper);

    // --- Animation setup ---
    let progress = 0;
    const baseSpeed = 0.5; // base movement speed
    let speed = -baseSpeed; // default direction (left)
    let lastDirection = 1; // 1 = down, -1 = up

    const animate = () => {
      progress += speed;

      // Loop seamlessly using modulo math
      const wrappedProgress = ((progress % totalWidth) + totalWidth) % totalWidth;

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

    gsap.ticker.add(animate);

    // --- ScrollTrigger to detect scroll direction and velocity ---
    ScrollTrigger.create({
      trigger: marquee,
      start: "top bottom",
      end: "bottom top",
      onUpdate: (self) => {
        const velocity = self.getVelocity();
        const direction = self.direction;
        const velocityBoost = Math.abs(velocity) / 1000;

        if (direction === -1) {
          // Scrolling up → reverse marquee
          speed = baseSpeed + velocityBoost;
          lastDirection = -1;
        } else {
          // Scrolling down → forward marquee
          speed = -(baseSpeed + velocityBoost);
          lastDirection = 1;
        }
      }
    });

    // --- Smoothly reset speed when scrolling stops ---
    let scrollTimeout;
    window.addEventListener('scroll', () => {
      clearTimeout(scrollTimeout);
      scrollTimeout = setTimeout(() => {
        gsap.to({ val: speed }, {
          // Restore base speed in the *last scroll direction*
          val: lastDirection === -1 ? baseSpeed : -baseSpeed,
          duration: 0.5,
          ease: "power2.out",
          onUpdate: function() {
            speed = this.targets()[0].val;
          }
        });
      }, 150);
    });
  });
});
</script>

Button Style Css

.mybtn{
    display: flex;
}
.mybtn .elementor-button {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.mybtn .elementor-button::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #0045F4;
    border-radius: inherit;
    z-index: -1;
     transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
    transform: scaleX(1);
    transform-origin: left;
}

.mybtn .elementor-button:hover::before {
    transform: scaleX(0);
    transform-origin: right;
}



.mybtn .mybtn .elementor-button span.elementor-button-icon {
    color: transparent;
}

.mybtn .mybtn .elementor-button span.elementor-button-icon svg {
    font-size: 24px !important;
}

.mybtn .elementor-button span.elementor-button-icon {
    color: transparent;
}

.mybtn .elementor-button span.elementor-button-icon svg {
    font-size: 24px !important;
}

Button Style Css Class

mybtn

Position Aware Background Effect Style Css

.countBoxes {
  position: relative;
  overflow: hidden;
}

.countBoxes {
  position: relative;
  z-index: 1;
}

.countBoxes::before {
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #FF6841;
  transition: width 0.5s, height 0.5s;
  z-index: 0;
}

.countBoxes:hover::before {
  width: 900px;
  height: 900px;
}
 

.countBoxes{
    transition: all .5s;
}

.countBoxes .elementor-counter-number-wrapper{
    transition: all 1s ease;
}

.countBoxes:hover .elementor-counter-number-wrapper {
    color: #fff !important;
    transition: all  0.2s ease !important;
    transition-delay: 0.3s;
}

.countBoxes:hover .elementor-counter-title {
    color: #fff !important;
    transition: all  0.2s ease !important;
    transition-delay: 0.3s;
}

.countBoxes .elementor-counter-title{
    transition: all 1s ease;
}

.countBoxes  p{
   transition: all 1s ease; 
}

.countBoxes:hover  p{
    color: #fff !important;
    transition: all  0.2s ease !important;
    transition-delay: 0.3s;
}

Position Aware Background Effect Style Css Classes

countBoxes

Position Aware Background Effect JS Code

<script>
//SCRIPT FOR COUNT STYLE
  const buttons = document.querySelectorAll('.countBoxes');

  buttons.forEach((btn) => {
    btn.onmousemove = function (e) {
      const rect = btn.getBoundingClientRect();
      const x = e.clientX - rect.left; 
      const y = e.clientY - rect.top; 
      btn.style.setProperty('--x', x + 'px');
      btn.style.setProperty('--y', y + 'px');
    };
  });
</script>

Service Box Hover Style Css

.service-box:hover{
    z-index: calc(var(--z-index) + 1);
}

Service Box Hover Style Css Class

service-box

Testimonial Section Style Css

.testimonial-box:hover figure.elementor-image-box-img {
    opacity: 0;
}

.testimonial-box:hover .elementor-image-box-content p, .testimonial-box:hover .elementor-image-box-content div {
    color: #fff !important;
}


.testimonial-box:hover .testimonial-author figure.elementor-image-box-img {
    opacity: 0 !important;
}

.testimonial-box .testimonial-author figure.elementor-image-box-img img {
    transition: all .4s ease;
}

.testimonial-box .testimonial-author figure.elementor-image-box-img  {
    transition: all .4s ease;
}

.testimonial-box:hover .testimonial-author .elementor-image-box-content {
    margin-left: -62px;
}

.testimonial-author .elementor-image-box-wrapper .elementor-image-box-content {
    transition: all .4s ease;
}


@media (max-width: 767.98px){
    .testimonial-author .elementor-image-box-wrapper {
    display: flex;
}

.testimonial-author .elementor-image-box-content {
    width: max-content !important;
}

.testimonial-author figure.elementor-image-box-img {
    margin: 0 12px 0 0 !important;
}
}

Testimonial Section Style Css Classes

testimonial-box
testimonial-author

For Blog And Single Blog Style CSS

.entry-related {
    max-width: 99vw;
}

.article-post-thumbnail img
{
    max-height: 513px;
    object-fit: cover;
    border-radius: .25rem;
}

.post-archive-hero-section .hero-section-overlay {
    background: #ffffff;
    border-radius: 8px;
}

section.entry-hero.post-archive-hero-section {
    margin-top: 16px;
}

.entry-hero-container-inner {
    border-radius: 8px;
}

.blog .content-area {
    margin-top: 60px;
}

@media(max-width: 1024.98px){
	.article-post-thumbnail {
    padding-left: 20px;
    padding-right: 20px;
}
}

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

How To Make a FREE Professional Website ~Step By Step~ 2026 (WordPress And Elementor For Beginners)

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