Website kits
Salon home page
Salon home page: hero with hours and booking button, three service cards, new-client offer, four reasons, reviews, gallery strip and location band.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The front page of an independent hair and beauty salon, ordered around the question “can I get in, and will I like the result”. The hero puts this week’s opening hours straight under the headline with the booking button after them, so a phone visitor sees both before the photo. Three service cards show the range — cuts, color, skin and nails — with a starting price on each, because price is the first thing a new client wonders about. The new-client offer comes next, while that visitor is still deciding. Four short reasons explain what is different about your chair, then reviews back them up. A gallery strip shows real work, and the dark band repeats the address, parking and phone for people who scroll straight down. Replace the photos first with pictures of your own salon and clients’ results, taken with permission; stock hair photos are easy to spot and make the rest of the page less believable.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 25
- Container (grid) × 3
- Container (grid, 3 columns) × 3
- Container (grid, 4 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 13
- Heading × 10
- Icon List × 2
- Button × 5
- Image × 3
- Image Box × 3
- Icon Box × 4
- Testimonial × 3
Things worth knowing
- The three service cards each hold one image, one heading and one paragraph, so they convert to Image Box widgets; the from-price is part of the description text.
- The opening hours in the hero and the offer conditions each become an Icon List widget (circle and check icons), and the four reasons convert to Icon Box widgets with bullseye, check, redo and star icons, provided the Icons option matches the Elementor icon library.
- Each review is a figure with a blockquote and a caption, which converts to a Testimonial widget with the name and the text after the dash in separate fields.
- The hero photo and the two gallery photos become Image widgets and the service cards keep empty image slots; select your own photos from the Media Library after import.
- Every multi-column row, including the offer panel and the gallery strip, stacks to one column below 780px, with the hours and booking button above the hero photo.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Linnea Hair & Skin — hair and beauty salon in Ellisford</title>
<style>
body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#2f2635;background:#faf8f5}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:84px 0}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:#2f2635;font-weight:600}
h1{font-size:54px;line-height:1.08;letter-spacing:-.02em;margin:0 0 18px}
h2{font-size:38px;line-height:1.15;letter-spacing:-.01em;margin:0 0 14px}
h3{font-size:22px;line-height:1.3;margin:0 0 8px}
p{font-size:17px;line-height:1.7;color:#6d6570;margin:0 0 18px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4e6e61;margin:0 0 14px}
.button{display:inline-block;padding:15px 28px;border-radius:10px;background:#4e6e61;color:#faf8f5;text-decoration:none;font-weight:700;font-size:16px}
.ghost{display:inline-block;padding:14px 26px;border-radius:10px;border:1px solid #2f2635;color:#2f2635;text-decoration:none;font-weight:700;font-size:16px}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.hero{padding:64px 0 84px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;align-items:center}
.hours{display:flex;flex-direction:column;gap:8px;margin:0 0 28px;padding:18px 22px;border-radius:12px;background:#dfe8e2}
.hours > div{display:flex;gap:12px;align-items:center;font-size:16px;color:#2f2635}
.dot{color:#4e6e61;font-size:10px}
.hero-img{width:100%;height:540px;object-fit:cover;border-radius:18px;display:block;background:#ede6dc}
.head{max-width:660px;margin:0 0 40px}
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.service{background:#faf8f5}
.service img{width:100%;height:320px;object-fit:cover;border-radius:14px;display:block;margin:0 0 18px;background:#ede6dc}
.service p{font-size:16px;margin:0}
.more{margin:36px 0 0}
.offer-sec{padding:0 0 84px}
.offer{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;padding:52px 56px;border-radius:20px;background:#dfe8e2}
.offer h2{margin:0 0 12px}
.offer p{color:#2f2635}
.terms{display:flex;flex-direction:column;gap:14px}
.terms > div{display:flex;gap:12px;align-items:center;font-size:16px;color:#2f2635}
.tick{color:#4e6e61;font-size:16px}
.oat{background:#ede6dc}
.reasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.reason{padding:28px 26px;border-radius:14px;background:#faf8f5}
.reason-icon{display:inline-block;color:#4e6e61;font-size:24px;line-height:1;margin:0 0 14px}
.reason h3{font-size:19px}
.reason p{font-size:15px;margin:0}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.quote{margin:0;padding:30px;border:1px solid #ede6dc;border-radius:14px;background:#faf8f5}
.quote blockquote{margin:0 0 18px;font-family:'Fraunces',Georgia,serif;font-size:19px;line-height:1.6;color:#2f2635}
.quote cite{font-style:normal}
.quote figcaption{font-size:14px;font-weight:700;color:#4e6e61}
.gallery-sec{padding-top:0}
.gallery{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);gap:22px;align-items:stretch}
.gallery img{width:100%;height:360px;object-fit:cover;border-radius:14px;display:block;background:#ede6dc}
.gallery-note{padding:34px 30px;border-radius:14px;background:#ede6dc;display:flex;flex-direction:column;justify-content:center}
.gallery-note p{margin:0;font-size:16px}
.dark{background:#2f2635}
.dark h2,.dark h3{color:#faf8f5}
.dark p{color:#ede6dc}
.dark .eyebrow{color:#dfe8e2}
.visit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:0 0 40px}
.visit p{margin:0;font-size:16px}
.light{display:inline-block;padding:15px 28px;border-radius:10px;background:#dfe8e2;color:#2f2635;text-decoration:none;font-weight:700;font-size:16px}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.hero{padding:36px 0 56px}
.hero .wrap,.services,.offer,.reasons,.quotes,.gallery,.visit{grid-template-columns:minmax(0,1fr);gap:24px}
h1{font-size:38px}
h2{font-size:29px}
.hero-img{height:300px}
.service img{height:260px}
.offer-sec{padding:0 0 56px}
.offer{padding:32px 22px}
.gallery-sec{padding-top:0}
.gallery img{height:280px}
.gallery-note{padding:26px 22px}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<div>
<p class="eyebrow">Hair, color and skin on Quarry Hill Road</p>
<h1>Hair that suits the way you actually live</h1>
<p>An independent salon with seven styling chairs and three quiet treatment rooms. Every appointment starts with a proper consultation, and you see the price before anything is cut or mixed.</p>
<div class="hours">
<div><span class="dot">●</span><span>Tue–Wed · 9:00 am–6:00 pm</span></div>
<div><span class="dot">●</span><span>Thu–Fri · 9:00 am–8:00 pm</span></div>
<div><span class="dot">●</span><span>Sat · 8:30 am–4:00 pm</span></div>
<div><span class="dot">○</span><span>Closed Sundays and Mondays</span></div>
</div>
<div class="actions">
<a class="button" href="/book/">Book an appointment</a>
<a class="ghost" href="/services/">See prices</a>
</div>
</div>
<img class="hero-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/salon/salon-interior.jpg" width="1600" height="1000" alt="Bright salon floor with styling chairs, round mirrors, light oak counters and plants by tall windows">
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">What we do</p>
<h2>Cuts, color and quiet time in the treatment rooms</h2>
<p>Three teams under one roof, so a cut, a gloss and a brow tidy can be one visit instead of three.</p>
</div>
<div class="services">
<article class="service">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/salon/haircut.jpg" width="1200" height="1200" alt="Stylist cutting a client’s damp shoulder-length hair with scissors and a comb">
<h3>Cuts and styling</h3>
<p>Precision and curly cuts, restyles, blow-dries and occasion hair. Cut and blow-dry from $68.</p>
</article>
<article class="service">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/salon/color-work.jpg" width="1200" height="1200" alt="Colorist hand-painting balayage onto a client’s lengths with a brush and mixing bowl">
<h3>Color</h3>
<p>Root touch-ups, glosses, foils and hand-painted balayage, with a free patch test first. From $40.</p>
</article>
<article class="service">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/salon/treatment-room.jpg" width="1200" height="1200" alt="Calm treatment room with a made-up facial bed, folded towels and a soft lamp">
<h3>Skin, nails and brows</h3>
<p>Facials, manicures, pedicures, brow shaping and tints in our three treatment rooms. From $18.</p>
</article>
</div>
<div class="more"><a class="ghost" href="/services/">Full price list</a></div>
</div>
</section>
<section class="offer-sec">
<div class="wrap">
<div class="offer">
<div>
<p class="eyebrow">New to Linnea</p>
<h2>20% off your first visit</h2>
<p>Try us for a cut, a color or a facial. Mention it on the booking form and the discount comes off at the desk — no code to remember.</p>
<a class="button" href="/book/">Book your first visit</a>
</div>
<div class="terms">
<div><span class="tick">✓</span><span>Any one service, Tuesday to Thursday</span></div>
<div><span class="tick">✓</span><span>Consultation and patch test included</span></div>
<div><span class="tick">✓</span><span>Valid once per new client, not with other offers</span></div>
</div>
</div>
</div>
</section>
<section class="oat">
<div class="wrap">
<div class="head">
<p class="eyebrow">Why clients come back</p>
<h2>Small habits that make a big difference</h2>
</div>
<div class="reasons">
<div class="reason"><span class="reason-icon">◎</span><h3>A real consultation</h3><p>Ten minutes before every cut or color to talk through your hair, your routine and what you want to avoid.</p></div>
<div class="reason"><span class="reason-icon">✓</span><h3>Patch tests, every time</h3><p>A free skin test at least 48 hours before any new color or tint, even if another salon has done one.</p></div>
<div class="reason"><span class="reason-icon">↻</span><h3>Free fringe trims</h3><p>Pop in between cuts for a fringe or neckline tidy. It takes ten minutes and there is no charge.</p></div>
<div class="reason"><span class="reason-icon">★</span><h3>The price before you sit</h3><p>Your stylist confirms the final price at the consultation, before any scissors or color come out.</p></div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">Client reviews</p>
<h2>What our regulars say</h2>
</div>
<div class="quotes">
<figure class="quote">
<blockquote>“Mei listened when I said I had ten minutes in the morning, and cut for that. It is the first cut in years that I can style myself.”</blockquote>
<figcaption><cite>Hannah K.</cite> — client since 2023</figcaption>
</figure>
<figure class="quote">
<blockquote>“Jonah took my box-dye mess back to a soft brown over two visits and told me honestly what it would cost before we started.”</blockquote>
<figcaption><cite>Leila M.</cite> — color client</figcaption>
</figure>
<figure class="quote">
<blockquote>“I book a cut and a pedicure on the same Thursday evening. Two hours, one bill, and I leave feeling like a person again.”</blockquote>
<figcaption><cite>Andre P.</cite> — Thursday regular</figcaption>
</figure>
</div>
</div>
</section>
<section class="gallery-sec">
<div class="wrap">
<div class="gallery">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/salon/products.jpg" width="1200" height="1200" alt="Unlabeled amber and frosted glass bottles of hair care products on a light oak shelf">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/salon/stylist-mei.jpg" width="1000" height="1250" alt="Stylist finishing a smooth blow-dry with a round brush at her station">
<div class="gallery-note">
<h3>From the salon floor</h3>
<p>Recent cuts, color and finished looks go up on our Instagram every week. Bring a screenshot to your consultation if you see something you like.</p>
</div>
</div>
</div>
</section>
<section class="dark" id="visit">
<div class="wrap">
<div class="head">
<p class="eyebrow">Visit us</p>
<h2>Two minutes from Ellisford Green</h2>
</div>
<div class="visit">
<div>
<h3>Find us</h3>
<p>27 Quarry Hill Road, Ellisford. Step-free entrance; free two-hour parking in the Mill Lane lot behind us.</p>
</div>
<div>
<h3>Opening hours</h3>
<p>Tue–Wed 9–6 · Thu–Fri 9–8 · Sat 8:30–4. Last color appointments start two hours before closing.</p>
</div>
<div>
<h3>Call or write</h3>
<p>(555) 018-4471 · [email protected]. The desk answers calls during opening hours.</p>
</div>
</div>
<a class="light" href="/book/">Book an appointment</a>
</div>
</section>
</body>
</html>
