Barber Shop & Hairdressers Salon Website 2024 Using Elementor Flexbox

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 Hair Salon / Barber Shop / Hairdressers Website using Elementor Flex Container. This Elementor Masterclass is for Complete Beginners.

In this tutorial, I’ll show you how to make a professional barbershop or hair salon website very easily and at almost no cost. We’ll do it step by step, using a free software called WordPress and a FREE page builder called Elementor. You won’t need any coding or design skills.

Imagine having your amazing salon’s website LIVE in just 2-3 hours! By following this tutorial, you’ll not only create a stunning website but also save a significant amount of money by doing it yourself.

In this tutorial, you’ll learn the best methods to create a visually appealing website that will attract and impress your customers. By the end of this tutorial, you’ll be able to design your own website, upload content, and keep it up-to-date without hiring any professionals.

⏰Timestamps for creating an ELEMENTOR 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.

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

Button Style CSS

<style>

.button .elementor-button-icon{
    font-size: 26px;
    transition: all 0.4s;
    border-left: 1px solid #1E1E1E;
    margin-top: -21px!important;
    margin-bottom: -20px!important;
    padding-top: 16px;
    padding-left: 15px;
    
    
}

.button.button-white .elementor-button-icon{
    border-color: white;
}

.button .elementor-button-icon svg{
    rotate: -45deg;
    transition: all 0.4s;
}
 
.button:hover .elementor-button-icon svg{
    rotate: 0deg;
}


</style>

Button Style CSS Classes

button
button-white

Service Item CSS

.info-box .icon .elementor-icon::after{
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    transition: 0.4s;
    top: -12px;
    left: -12px;
    width: 60px;
    height: 60px;
    background-color: rgb(247 247 247 / 0%);
}

.info-box:hover .icon .elementor-icon::after{
    top: -59px;
    left: -59px;
    width: 154px;
    height: 154px;
    background-color: #F7F7F7;
}

.info-box-btn .elementor-button-icon{
    font-size: 24px!important;
    margin-top: -4px;
    fill: #969696;
    
}

.info-box-btn:hover .elementor-button-icon{
    fill: #1E1E1E;
}
.info-box-btn .elementor-button-icon svg{
    rotate: -45deg;
    transition: all 0.4s;
}
 
.info-box-btn:hover .elementor-button-icon svg{
    rotate: 0deg;
}

Service Item CSS Classes

info-box
icon
info-box-btn

Team Member CSS

.team-member .member-info{
    transition: 0.4s;
    transform: translateY(45px);
}

.team-member:hover .member-info{
    transform: translateY(0);
}

.team-member .member-info .member-socials {
    transition: 0.4s;
    opacity: 0;
    
}

.team-member:hover .member-info .member-socials{
    opacity: 1;
}

Team Member CSS Classes

team-member
member-info

Check Box CSS

.check-box:hover .elementor-icon{
    fill: #fff!important;
    color: #fff;
    background-color: #1E1E1E!important;
}

Check Box CSS Class

check-box

Portfolio Section CSS

.portfolio .item-description{
    transform: translateX(20px);
    transition: opacity 0.5s, transform 0.5s;
    opacity: 0;
}

.portfolio:hover .item-description{
    transform: translateX(0);
    opacity: 1;
}

.portfolio .item-description .tittle{
    color: #fff;
    text-decoration: underline;
    -webkit-text-decoration-color: transparent;
    text-decoration-color: transparent;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 0.06em;
}

.portfolio .item-description .tittle:hover{
    -webkit-text-decoration-color: currentColor;
    text-decoration-color: currentColor;
    
}

Portfolio Section CSS Classes

portfolio
item-description

Tab CSS

.tabs .e-n-tabs-heading{
    border-right: 1px solid #1e1e1e33;
}

Tab CSS Class

tabs

Blog Post CSS

.blog-post .jkit-postblock-content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}

.blog-post .jkit-post-meta{
    align-self: flex-start;
}

.blog-post .jkit-post-title{
   order: 2!important;
}

.blog-post .jkit-post-meta-bottom{
    order: 3;
}

Blog Post CSS Class

blog-post

Marquee Content CSS

.marquee-content{
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee-content .elementor-heading-title{
    display: inline-block;
    animation: marquee 28s linear infinite;
}

.marquee-content:hover .elementor-heading-title{
    animation-play-state: paused;
  }

@keyframes marquee {
    0% {
      transform: translateX(0%);
    }
    100% {
     transform: translateX(-50%);
    }
  }

Marquee Content CSS Class

marquee-content

Barber Shop & Hairdressers Salon Website 2024 Using Elementor Flexbox

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