How To Make a FREE Business Website ~Step By Step~ 2026

🚀 Don’t “learn WordPress” the slow way.

Quick Summary

🚀 Don’t “learn WordPress” the slow way. In this 4+ hour follow-along masterclass, you’ll build a complete, professional client-ready agency/business website from a fresh WordPress install – using Elementor + free tools , no coding , and a workflow we use on real projects. By the end, you’ll have a full website with core pages, a working contact form, a blog setup, and a clean header/footer – fully mobile responsive.

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

FREELANCING MASTERY is now LIVE!

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

👉 What you’ll build in this tutorial (step-by-step) A clean Home page (hero, services, portfolio, reviews, about section) ↪ A professional About page (team + FAQ) ↪ A complete Services page (cards + buttons + FAQ) ↪ Single Service pages (template import + editing + linking from service cards) ↪ A Contact page with a working form + notifications + Google Map ↪ An SEO-friendly Blog setup (posts + categories/tags + blog page + customization) ↪ A clean Header & Footer + navigation menu ↪ A Free logo + favicon setup ↪ Full mobile responsiveness across sections and pages

1. Get a domain + hosting (foundation setup) 2. Install WordPress (fresh install walkthrough) 3. Install FREE theme + plugins (the right stack for beginners) 4. Build the full website in Elementor (drag & drop, responsive, client-ready)

↪ Theme Kadence (and what a theme actually is)

↪ Plugins ElementsKit Lite, Royal Elementor Addons, MetForm ↪ Blog editor Classic Editor (for simple blogging workflow)

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 Entire Page Style CSS

<style>
span.elementor-icon-list-icon svg {
    margin: 0 !important;
}
span.elementor-icon-list-text {
    padding: 0 !important;
}

p{
    margin: 0 !important;
}
ul {
    margin: 0;
}



</style>

Button Style CSS

.myBTN .elementor-button-icon {
    background: #fff;
    color: transparent;
    padding: 8px;
    border-radius: 50%;
}

.elementor-button-icon{
    color: transparent !important;
}

.myBTN .elementor-button-content-wrapper{
    display: flex;
    align-items: center;
}



.myBTN .elementor-button:hover .elementor-button-icon svg{
    animation: slideTextUp 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) reverse forwards !important;
}

@keyframes slideTextUp {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        transform: translateX(-100%);
        opacity: 0;
    }
    51% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

Button Style CSS Classes

myBTN

Gradient Text Style CSS

.has-gradient-text .elementskit-section-title span {
    background: linear-gradient(180deg, #FF5100 54.15%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}


.gradient-para .elementor-heading-title {
    background: linear-gradient(180deg, #FFFFFF 0%, #417BFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

Gradient Text Style CSS Classes

has-gradient-text
gradient-para

Marquee Animation Style CSS

.marquee-item.marquee-center {
    background: #000000;
border: 1px solid #0045E6;
box-shadow: -20px 0px 35px rgba(26, 95, 255, 0.8);
}
.marquee-item.marquee-center img{
    opacity: 1 !important;
}

.marquee-item:hover img{
    opacity: 1 !important;
}

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>
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(".marquee-item");
    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(".marquee-item");
    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';
    allImages.forEach(img => wrapper.appendChild(img));
    marquee.appendChild(wrapper);
    
    // --- Animation setup ---
    let progress = 0;
    const baseSpeed = 0.5;
    let speed = -baseSpeed;
    let lastDirection = 1;
    
    // --- Track hover state ---
    let isHovering = false;
    
    // --- Function to find and highlight center item ---
    const updateCenterItem = () => {
      const marqueeRect = marquee.getBoundingClientRect();
      const centerX = marqueeRect.left + marqueeRect.width / 2;
      
      let closestItem = null;
      let minDistance = Infinity;
      
      allImages.forEach(img => {
        const imgRect = img.getBoundingClientRect();
        const imgCenterX = imgRect.left + imgRect.width / 2;
        const distance = Math.abs(centerX - imgCenterX);
        
        if (distance < minDistance) {
          minDistance = distance;
          closestItem = img;
        }
        
        // Remove class from all items
        img.classList.remove('marquee-center');
      });
      
      // Add class to center item only if not hovering
      if (closestItem) {
        if (!isHovering) {
          closestItem.classList.add('marquee-center');
        }
      }
    };
    
    // --- Hover event listeners ---
    allImages.forEach(img => {
      img.addEventListener('mouseenter', () => {
        isHovering = true;

        // Remove class from all items immediately
        allImages.forEach(item => {
          item.classList.remove('marquee-center');
        });
      });
      
      img.addEventListener('mouseleave', () => {
        isHovering = false;

        // Update center item when hover ends
        updateCenterItem();
      });
    });
    
    const animate = () => {
      progress += speed;
      const wrappedProgress = ((progress % totalWidth) + totalWidth) % totalWidth;
      gsap.set(wrapper, { x: -wrappedProgress });
      
      // Update center item highlight on each frame
      updateCenterItem();
    };
    
    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) {
          speed = baseSpeed + velocityBoost;
          lastDirection = -1;
        } else {
          speed = -(baseSpeed + velocityBoost);
          lastDirection = 1;
        }
      }
    });
    
    // --- Smoothly reset speed when scrolling stops ---
    let scrollTimeout;
    window.addEventListener('scroll', () => {
      clearTimeout(scrollTimeout);
      scrollTimeout = setTimeout(() => {
        gsap.to({ val: speed }, {
          val: lastDirection === -1 ? baseSpeed : -baseSpeed,
          duration: 0.5,
          ease: "power2.out",
          onUpdate: function() {
            speed = this.targets()[0].val;
          }
        });
      }, 150);
    });
  });
});
</script>

Marquee Animation Style CSS Classes

marquee-item
marquee-img

GIf Animation Style CSS

.tag-icon img {
  animation: awesomePulse 2s ease-in-out infinite;
  transform-origin: center;
  filter: drop-shadow(0 0 0 transparent);
}

@keyframes awesomePulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0));
  }
  
  25% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
  }
  
  50% {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.8));
  }
  
  75% {
    transform: scale(1.1) rotate(-5deg);
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
  }
}

.tag-icon img:hover {
  animation: awesomePulseHover 0.6s ease-in-out infinite;
}

@keyframes awesomePulseHover {
  0%, 100% {
    transform: scale(1.2);
    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 1));
  }
  
  50% {
    transform: scale(1.3) rotate(10deg);
    filter: drop-shadow(0 0 25px rgba(139, 92, 246, 1));
  }
}

GIf Animation Style CSS Class

tag-icon

Service Box Border Style CSS

.service-box::after {
        content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #EAEAEA 0%, rgba(234, 234, 234, 0) 100%) border-box;
    mask: /*4*/ linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
    mask-composite: exclude;
    border: 1px solid transparent;
    opacity: 0.2;
    pointer-events: none;
    border-radius: inherit;
}

.service-box:hover::after {
    background: linear-gradient(180deg, #1A5FFF 0%, rgba(26, 95, 255, 0) 100%) border-box;
    opacity: 1;
}

.service-box:hover::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent !important;
    border: 1px solid #262626;
    pointer-events:none;
}

Service Box Border Style CSS Class

service-box

Project Box Border Style CSS

.project-box::after {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background: linear-gradient(180deg, #EAEAEA 0%, rgba(234, 234, 234, 0) 100%) border-box;
    mask: /*4*/ linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
    mask-composite: exclude;
    border: 1px solid transparent;
    opacity: 0;
    pointer-events: none;
    border-radius: inherit;
}

.project-box:hover::after {
    background: linear-gradient(180deg, #1A5FFF 0%, rgba(26, 95, 255, 0) 100%) border-box;
    opacity: 1;
}

Project Box Border Style CSS Class

project-box

Project Box Button Style CSS

.btn-project .elementor-button{
    position: relative;
    z-index: 0;
}

.btn-project .elementor-button::before{
        content: '';
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #1A5FFF 0%, rgba(26, 95, 255, 0) 100%) border-box;
    mask: /*4*/ linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
    mask-composite: exclude;
    border: 1px solid transparent;
    opacity: 1;
    pointer-events: none;
    border-radius: inherit;
    position: absolute;
    z-index: -1;
}

.btn-project .elementor-button::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #262626;
    border-radius: inherit;
    z-index: -2;
    pointer-events: none;
}

Project Box Button Style CSS

btn-project
myBTN

Review Section Style CSS

.testimonial-box::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: -1;
    background: linear-gradient(180deg, rgba(18, 17, 23, 0) 0%, rgba(18, 17, 23, 0.8) 49.95%, #121117 100%);
    transition: all .4s;
}


.testimonial-box:hover .client-img img {
    opacity: 0 !important;
}

Review Section Style CSS Class

testimonial-box
client-img

Team Section Overlay Style CSS

.team-box::after{
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(18, 17, 23, 0) 39.08%, rgba(18, 17, 23, 0.7) 70.19%, #121117 100%);
    z-index: -1;
    border-radius: inherit;
}

Team Section Overlay Style CSS Class

team-box

Contact Form Style CSS

.metform-submit-btn svg {
    background: #fff;
    width: 32px !important;
    height: 32px;
    border-radius: 50%;
    padding: 8px;
}

button.metform-btn.metform-submit-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

Blog ANd SIngle Blog Archive Style CSS

.post-thumbnail-inner img {
    border-radius: 20px;
}

.post-thumbnail-inner img {
    border-radius: 20px;
}

.submit {
    background: linear-gradient(90deg, #FFFFFF 0%, #417BFF 100%) !important;
    color: #000 !important;
}

/* Post Category Gradient color code  */

.entry-taxonomies .category-links a {
    background: linear-gradient(90deg, #FFFFFF 0%, #417BFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* Post Grid Container Margin-Padding  */
article.entry {
    padding: 40px;
}

.entry-content-wrap {
    margin-top: 20px;
}

article.entry {
    border: 1px solid #262626;
}


label.float-label {
    opacity: 0;
}



#comments input::placeholder,#comments textarea::placeholder {
    opacity: 1;
}

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 Business Website ~Step By Step~ 2026

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