How to Make a Business Website using WordPress and Elementor 2023

Quick Summary

FREELANCING MASTERY is now LIVE!

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

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

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 ⏰

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.

If you're searching for how to make a website, how to make a professional website from scratch, how to create a WordPress website step by step, WordPress tutorial for beginners, best website making course, Elementor tutorial for beginners – then this tutorial is for you.

And, lastly, If you want me to build your AWESOME website at an affordable price,

Tools and Links Used

Bluehost WordPress hosting with a free domain included.

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

Floating Animation CSS

@keyframes animationFramesOne {
  0% {
    transform:  translate(0px,0px)  rotate(0deg) ;
  }
  20% {
    transform:  translate(73px,-1px)  rotate(36deg) ;
  }
  40% {
    transform:  translate(141px,72px)  rotate(72deg) ;
  }
  60% {
    transform:  translate(83px,122px)  rotate(108deg) ;
  }
  80% {
    transform:  translate(-40px,72px)  rotate(144deg) ;
  }
  100% {
    transform:  translate(0px,0px)  rotate(0deg) ;
  }
}

@-webkit-keyframes animationFramesOne {
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  20% {
    -webkit-transform:  translate(73px,-1px)  rotate(36deg) ;
  }
  40% {
    -webkit-transform:  translate(141px,72px)  rotate(72deg) ;
  }
  60% {
    -webkit-transform:  translate(83px,122px)  rotate(108deg) ;
  }
  80% {
    -webkit-transform:  translate(-40px,72px)  rotate(144deg) ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
}

.animationFramesOne {
	-webkit-animation: animationFramesOne 12s linear infinite;
	animation: animationFramesOne 12s linear infinite;
}
.animationFramesOne.two {
	-webkit-animation: animationFramesOne 20s linear infinite;
	animation: animationFramesOne 20s linear infinite;
}


@keyframes contactSwimmer {

  0%,
  100% {
    -webkit-transform: translateX(0) translateY(0) rotate(0);
    transform: translateX(0) translateY(0) rotate(0);
  }

  25%,
  75% {
    -webkit-transform: translateX(15px) translateY(20px) rotate(10deg);
    transform: translateX(15px) translateY(20px) rotate(10deg);
  }

  50% {
    -webkit-transform: translateX(60px) translateY(35px) rotate(15deg);
    transform: translateX(60px) translateY(35px) rotate(15deg);
  }
}

.contactSwimmer {
	-webkit-animation-name: contactSwimmer;
	animation-name: contactSwimmer;
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}

@keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

.rotateme {
	-webkit-animation-name: rotateme;
	animation-name: rotateme;
	-webkit-animation-duration: 8s;
	animation-duration: 8s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}

Animation Classes

animationFramesOne
contactSwimmer
rotateme

How to Make a Business Website using WordPress and Elementor 2023

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