Salon footer
Dark plum salon footer with the name, a booking button, address and parking, opening hours by day, phone, email and a small-print row.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The footer that closes every page of the salon site, and where returning clients look when all they need is the phone number to move an appointment. Four columns repeat the essentials: the name with a one-line description and a booking button, the address with the parking tip, opening hours by day, and phone, email and social channels. A small-print row underneath holds the copyright line and links to the privacy, cancellation and accessibility pages. Replace the hours and phone number first and check they match the header, the home page, the booking page and your map listing exactly — a client who arrives on a closed Monday because the footer was out of date rarely books again. The social names and policy links are plain text so the block converts cleanly; link them to your real profiles and pages in the Text Editor after import, or use Elementor’s Social Icons widget.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 8
- Container (grid) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 13
- Button × 1
- Heading × 3
Things worth knowing
- The three column titles convert to Heading widgets, the name and every line of text to Text Editor widgets, and only Book an appointment, with its pale sage background, becomes a Button.
- Use it as an Elementor Theme Builder footer template (Elementor Pro) so it shows on every page; without Pro, paste it at the bottom of each page.
- Below 780px the four columns stack into one and the small-print row splits into two lines.
- Instagram, Facebook, Gift cards and the policy names are plain text, not links; add the links or a Social Icons widget after import.
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>Salon footer</title>
<style>
body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#ede6dc;background:#2f2635}
.foot{background:#2f2635;padding:64px 0 28px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.cols{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px;padding:0 0 40px;border-bottom:1px solid #6d6570}
.brand{margin:0 0 12px;font-family:'Fraunces',Georgia,serif;font-size:27px;font-weight:600;color:#faf8f5}
h2{margin:0 0 12px;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#dfe8e2}
p{margin:0 0 8px;font-size:15px;line-height:1.7;color:#ede6dc}
.book{display:inline-block;margin-top:10px;padding:11px 20px;border-radius:10px;background:#dfe8e2;color:#2f2635;text-decoration:none;font-size:15px;font-weight:700}
.small{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px}
.small p{margin:0;font-size:13px;color:#ede6dc}
@media(max-width:780px){.foot{padding:48px 0 24px}.wrap{padding:0 16px}.cols{grid-template-columns:minmax(0,1fr);gap:28px}.small{flex-direction:column;gap:6px}}
</style>
</head>
<body>
<footer class="foot">
<div class="wrap">
<div class="cols">
<div>
<p class="brand">Linnea Hair & Skin</p>
<p>An independent hair and beauty salon with three treatment rooms on Quarry Hill Road.</p>
<a class="book" href="/book/">Book an appointment</a>
</div>
<div>
<h2>Address</h2>
<p>27 Quarry Hill Road<br>Ellisford</p>
<p>Free parking in the Mill Lane lot</p>
</div>
<div>
<h2>Hours</h2>
<p>Tue–Wed 9 am–6 pm</p>
<p>Thu–Fri 9 am–8 pm</p>
<p>Sat 8:30 am–4 pm</p>
<p>Sun–Mon closed</p>
</div>
<div>
<h2>Contact</h2>
<p>(555) 018-4471</p>
<p>[email protected]</p>
<p>Instagram · Facebook · Gift cards</p>
</div>
</div>
<div class="small">
<p>© 2026 Linnea Hair & Skin. Prices shown are starting prices.</p>
<p>Privacy policy · Cancellation policy · Accessibility</p>
</div>
</div>
</footer>
</body>
</html>
