Website kits
Salon services and price list page
Salon price list grouped into cuts and styling, color, treatments, and nails and brows, with duration and from-price rows and a patch-test note.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page clients open most often after the home page, usually to check a price before booking or to work out how long to leave free in the diary. Every row gives the service name, its usual duration and a from-price, grouped the way salons think about their work: cuts and styling, color, treatments, and nails and brows. The level key sits above the list so a client knows straight away whether the listed price applies to the stylist they want. Consultations and patch tests follow the prices, because that is the moment a new color client needs to learn about the 48-hour rule, before they pick a date. Replace the prices and durations with your own first, then delete any service you do not offer rather than leaving it at “quoted”. Write “from” prices that most clients actually pay; a from-price that only applies to a pixie cut breeds arguments at the desk.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 63
- Container (grid, 2 columns) × 1
- Container (grid, 3 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 59
- Heading × 32
- Icon List × 1
- Icon Box × 3
- Button × 1
Things worth knowing
- There is no table: each service row converts to a small Container with a Heading for the name and Text Editor widgets for the duration and the price, so you can duplicate a row in Elementor to add a service.
- The stylist level key becomes one Icon List widget (open circle, bullseye and filled circle) when the Icons option matches the Elementor icon library.
- The consultation, patch test and strand test cards convert to Icon Box widgets with bullseye, check and plus icons.
- The two-column price grid stacks to one column below 780px; long service names wrap while the price stays on the right of its row.
- With about 25 rows this page converts to roughly 65 Containers, nested at most seven levels deep; that is expected for a price list and keeps every price editable in the panel.
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>Services and prices — Linnea Hair & Skin</title>
<style>
body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#2f2635;background:#faf8f5}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:76px 0}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:#2f2635;font-weight:600}
h1{font-size:52px;line-height:1.1;letter-spacing:-.02em;margin:0 0 16px}
h2{font-size:30px;line-height:1.2;margin:0 0 6px}
h3{font-size:18px;line-height:1.35;margin:0 0 2px}
p{font-size:16px;line-height:1.7;color:#6d6570;margin:0}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4e6e61;margin:0 0 14px}
.intro{padding:64px 0 36px}
.intro .lead{max-width:680px;margin:0 0 28px;font-size:18px}
.levels{display:flex;flex-direction:column;gap:10px;padding:18px 24px;border-radius:12px;background:#dfe8e2;max-width:560px}
.levels > div{display:flex;align-items:center;gap:10px;font-size:15px;color:#2f2635}
.lv{color:#4e6e61;font-size:14px}
.menu{padding-top:28px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 72px}
.group .note{font-size:15px;margin:0 0 22px;color:#4e6e61}
.row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:0 0 14px;margin:0 0 16px;border-bottom:1px solid #ede6dc}
.time{font-size:14px;color:#6d6570}
.price{font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:600;color:#2f2635;white-space:nowrap}
.oat{background:#ede6dc}
.head{max-width:660px;margin:0 0 36px}
.head h2{font-size:36px;margin:0 0 12px}
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.rule{padding:28px 26px;border-radius:14px;background:#faf8f5}
.rule-icon{display:inline-block;color:#4e6e61;font-size:24px;line-height:1;margin:0 0 14px}
.rule h3{font-size:20px;margin:0 0 8px}
.rule p{font-size:15px}
.cta{background:#2f2635;text-align:center}
.cta h2{color:#faf8f5;font-size:36px;margin:0 0 12px}
.cta p{color:#ede6dc;max-width:560px;margin:0 auto 26px;font-size:17px}
.button{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:52px 0}
.wrap{padding:0 16px}
.intro{padding:40px 0 24px}
h1{font-size:38px}
h2{font-size:26px}
.head h2,.cta h2{font-size:29px}
.grid,.rules{grid-template-columns:minmax(0,1fr);gap:44px}
.rules{gap:18px}
.levels{padding:16px 18px}
.row{gap:14px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<p class="eyebrow">Services and prices</p>
<h1>The price list</h1>
<p class="lead">Every service shows how long it takes and where the price starts. Long or very thick hair can take more time and product; your stylist confirms the final price at the consultation, before anything starts.</p>
<div class="levels">
<div><span class="lv">○</span><span>Stylist — prices as listed</span></div>
<div><span class="lv">◎</span><span>Senior stylist — add $12 to cuts, $20 to color</span></div>
<div><span class="lv">●</span><span>Creative director — add $24 to cuts, $35 to color</span></div>
</div>
</div>
</section>
<section class="menu">
<div class="wrap grid">
<div class="group">
<h2>Cuts and styling</h2>
<p class="note">Every cut includes a wash, a consultation and a finish.</p>
<div class="row"><div><h3>Cut and blow-dry</h3><p class="time">60 min</p></div><p class="price">from $68</p></div>
<div class="row"><div><h3>Restyle or big change</h3><p class="time">75 min</p></div><p class="price">from $82</p></div>
<div class="row"><div><h3>Curly cut, dry and shaped</h3><p class="time">75 min</p></div><p class="price">from $78</p></div>
<div class="row"><div><h3>Short cut or clipper cut</h3><p class="time">30 min</p></div><p class="price">from $38</p></div>
<div class="row"><div><h3>Kids’ cut, under 12</h3><p class="time">30 min</p></div><p class="price">from $28</p></div>
<div class="row"><div><h3>Blow-dry</h3><p class="time">45 min</p></div><p class="price">from $45</p></div>
<div class="row"><div><h3>Occasion hair or updo</h3><p class="time">60 min</p></div><p class="price">from $85</p></div>
</div>
<div class="group">
<h2>Color</h2>
<p class="note">New color clients need a patch test 48 hours before.</p>
<div class="row"><div><h3>Gloss or toner</h3><p class="time">30 min</p></div><p class="price">from $40</p></div>
<div class="row"><div><h3>Root touch-up</h3><p class="time">90 min</p></div><p class="price">from $78</p></div>
<div class="row"><div><h3>Full single color</h3><p class="time">2 hr</p></div><p class="price">from $105</p></div>
<div class="row"><div><h3>Partial foils</h3><p class="time">2 hr</p></div><p class="price">from $125</p></div>
<div class="row"><div><h3>Full foils</h3><p class="time">2 hr 30 min</p></div><p class="price">from $165</p></div>
<div class="row"><div><h3>Balayage, hand-painted</h3><p class="time">3 hr</p></div><p class="price">from $190</p></div>
<div class="row"><div><h3>Color correction</h3><p class="time">by consultation</p></div><p class="price">quoted</p></div>
</div>
<div class="group">
<h2>Treatments</h2>
<p class="note">Hair treatments can be added to any cut or color.</p>
<div class="row"><div><h3>Bond-repair treatment</h3><p class="time">20 min</p></div><p class="price">from $35</p></div>
<div class="row"><div><h3>Scalp treatment and massage</h3><p class="time">30 min</p></div><p class="price">from $45</p></div>
<div class="row"><div><h3>Keratin smoothing</h3><p class="time">2 hr 30 min</p></div><p class="price">from $240</p></div>
<div class="row"><div><h3>Express facial</h3><p class="time">30 min</p></div><p class="price">from $55</p></div>
<div class="row"><div><h3>Classic facial</h3><p class="time">60 min</p></div><p class="price">from $85</p></div>
</div>
<div class="group">
<h2>Nails and brows</h2>
<p class="note">In the treatment rooms, with the same price at every level.</p>
<div class="row"><div><h3>Manicure</h3><p class="time">45 min</p></div><p class="price">from $38</p></div>
<div class="row"><div><h3>Gel manicure</h3><p class="time">60 min</p></div><p class="price">from $50</p></div>
<div class="row"><div><h3>Pedicure</h3><p class="time">60 min</p></div><p class="price">from $55</p></div>
<div class="row"><div><h3>Brow shape, wax and tidy</h3><p class="time">20 min</p></div><p class="price">from $24</p></div>
<div class="row"><div><h3>Brow tint</h3><p class="time">15 min</p></div><p class="price">from $18</p></div>
<div class="row"><div><h3>Lash tint</h3><p class="time">20 min</p></div><p class="price">from $24</p></div>
</div>
</div>
</section>
<section class="oat">
<div class="wrap">
<div class="head">
<p class="eyebrow">Before your appointment</p>
<h2>Consultations and patch tests</h2>
<p>Both are free, and both exist so that nothing about your result is a surprise.</p>
</div>
<div class="rules">
<div class="rule"><span class="rule-icon">◎</span><h3>Free consultation</h3><p>Planning a big change, a correction or keratin? Book a free 15-minute consultation first. We look at your hair in daylight, talk through options and give you a written quote.</p></div>
<div class="rule"><span class="rule-icon">✓</span><h3>Patch test 48 hours ahead</h3><p>Any color, lash or brow tint needs a skin test at least 48 hours before, and again if it has been six months since your last one. Walk in Tuesday to Saturday; it takes five minutes.</p></div>
<div class="rule"><span class="rule-icon">+</span><h3>Strand test for lightening</h3><p>If your hair has been colored or lightened before, we test a hidden strand at the consultation so we know how it will lift before the full appointment.</p></div>
</div>
</div>
</section>
<section class="cta">
<div class="wrap">
<h2>Found what you need?</h2>
<p>Choose the service and, if you like, a stylist on the booking form. We confirm your time by text within one working day.</p>
<a class="button" href="/book/">Book an appointment</a>
</div>
</section>
</body>
</html>
