Boutique hotel footer
Dark hotel footer with the wordmark, a one-line description, a Book direct button, address, check-in and desk times, contact details 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 for every page of a small hotel site, and where returning guests scroll when they only need the phone number or the check-in time. Four columns repeat the essentials: the name with a one-line description of the house and a Book direct button, the street address with the walk from the station, check-in, check-out and front desk times, and phone, email and social channels. The small-print row carries the copyright line, a reminder of what the rates include, and links such as privacy, accessibility and gift vouchers. Replace the times and contact details first and check that they match the header, the home page, the contact page and your listings on booking and map sites, since a check-in time that differs between them is the kind of detail guests remember. The social names are plain text so the block converts cleanly; add links to your real profiles after import, or use a Social Icons widget instead.
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 × 12
- Button × 1
- Heading × 3
Things worth knowing
- The three column titles convert to Heading widgets, the wordmark and every line of text to Text Editor widgets, and only Book direct, with its rosewood 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 and Newsletter are plain text, not links or icons; 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>Boutique hotel footer</title>
<style>
body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#ebe1d3;background:#2b2430}
.foot{background:#2b2430;padding:68px 0 28px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px;padding:0 0 44px;border-bottom:1px solid #6b5f62}
.brand{margin:0 0 12px;font-family:'Cormorant Garamond',Garamond,Georgia,serif;font-size:32px;font-weight:600;line-height:1.1;color:#f7f2ea}
h2{margin:0 0 14px;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#f7f2ea}
p{margin:0 0 8px;font-size:15px;line-height:1.7;color:#ebe1d3}
.book{display:inline-block;margin-top:12px;padding:11px 22px;border-radius:3px;background:#8f4a4a;color:#f7f2ea;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.small{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px}
.small p{margin:0;font-size:13px;color:#ebe1d3}
@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">Calder House</p>
<p>A sixteen-room hotel and breakfast in a restored 1840s captain’s house, two streets from Wrenmouth harbor.</p>
<a class="book" href="/contact/#book">Book direct</a>
</div>
<div>
<h2>Address</h2>
<p>12 Quayside Terrace<br>Wrenmouth</p>
<p>Ten minutes on foot from Wrenmouth Station</p>
</div>
<div>
<h2>Times</h2>
<p>Check-in 3:00–9:00 pm</p>
<p>Check-out by 11:00 am</p>
<p>Front desk 7:30 am–9:00 pm</p>
</div>
<div>
<h2>Contact</h2>
<p>(555) 018-4471</p>
<p>[email protected]</p>
<p>Instagram · Newsletter</p>
</div>
</div>
<div class="small">
<p>© 2026 Calder House, Wrenmouth. Rates include breakfast and local occupancy tax.</p>
<p>Privacy policy · Accessibility · Gift vouchers</p>
</div>
</div>
</footer>
</body>
</html>
