Business SitesElementorWordPress

How to Create Consultant & Consulting Website in wordpress (Elementor Tutorial 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
Kitpapa Ready made Elementor template kits.
Get Templates
Project Files Download the resources used in this tutorial.
Download Files

Prompt Used in This Tutorial

Hide horizontal overflow for the entire page CSS
<style>
/* Hide horizontal overflow for the entire page */
html, body {
   overflow-x: hidden;
}
p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}
ul.elementor-icon-list-items {
    margin: 0;
    padding: 0;
}

ul.elementor-icon-list-items li {
    list-style: none;
}
</style>
Button Style CSS
.black-bg-btn:hover svg path {
    stroke: #05061A;
}

.white-bg-btn:hover svg path {
    stroke: #FFFFFF;
}
.hero-btn-1 svg,
.hero-btn-2 svg {
    max-width: 13px;
    max-height: 13px;
}
Button Style CSS Classes
black-bg-btn
white-bg-btn
hero-btn-1
hero-btn-2
Single Banner Gradient BG Style CSS
.three-layer-bg {
    background: linear-gradient(90deg, rgba(207, 169, 255, 0.08) 0%, rgba(207, 169, 255, 0.4) 51%, rgba(207, 169, 255, 0.08) 100%);
}
Single Banner Gradient BG Style CSS Class
three-layer-bg
Rotated Animation Style CSS
.rotate-image {
    animation: rotate360 20s linear infinite;
}

@keyframes rotate360 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
}
Rotated Animation Style CSS
rotate-image
Dot Animation Style CSS
.dot-animation .dot {
    animation: wave 1.3s infinite;
    z-index: 2555;
}

.dot-animation .dot1 {
    animation-delay: 0.3333s;
    animation-delay: 0s;
}

.dot-animation .dot2{
    animation-delay: 0.6666s;
    animation-delay: 0.3333s;
}

 .dot-animation .dot3{
    animation-delay: 0.9999s;
    animation-delay: 0.6666s;
}

@keyframes wave {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-0.5rem);
    }
    100% {
        transform: translateY(0px);
    }
}
Dot Animation Style CSS Class
dot-animation
dot
dot1
dot2
dot3
Move Up and Down Animation CSS
.sun-bounce {
    animation: MoveUpDown 4s linear infinite;
}

@keyframes MoveUpDown {
    0%,
    100% {
        transform: translateY(20px);
    }
    50% {
        transform: translateY(0px);
    }
}
Move Up and Down Animation CSS CLass
sun-bounce
Pulse Animation CSS
.bulb-icon-pulse,.icon-pulse-animation .elementor-icon svg {
    animation: pulse 2s infinite linear;
    animation-direction: alternate;
}

@keyframes pulse {
    from {
        transform: scale(0.8);
    }

    to {
        transform: scale(1);
    }
}
Pulse Animation CSS Class
bulb-icon-pulse
icon-pulse-animation
Team Member Social Icon Style CSS
.member-social {
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.member-image-wrap:hover .member-social {
    opacity: 1;
    visibility: visible;
    right: 12px !important;
}
Team Member Social Icon Style CSS
member-image-wrap:hover
member-social

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

Related Tutorials

From learning the right skills to building a stronger digital presence, we help you turn ideas into practical, professional results.

Vibe Code a REAL Animated WordPress Website with Claude + Elementor

21.8K views

View Tutorial

Vibe Coding Full Course for Beginners – Build & Launch a Real SaaS

3.3K views

View Tutorial

Edit Videos with ChatGPT Codex — Raw Clips to Finished Reel

3.4K views

View Tutorial

Browse All Tutorials