Restaurant footer
Dark restaurant footer with the wordmark, a booking button, address, opening hours, phone, email, social names as text and a small-print row.
When to use it
The footer that closes every page, and the place many visitors scroll straight to when all they want is the address or tonight’s hours. It repeats the essentials in four columns: the name with a one-line description and a booking button, the address with the nearest station, opening hours by day, and phone, email and social channels. A thin small-print row underneath carries the copyright line and links such as privacy, accessibility and gift cards. Replace the hours and phone number first and make sure they match the header, the home page and your map listing exactly — mismatched hours between a site and its listings are a common reason for a wasted trip. The social names are plain text so the block converts cleanly; turn them into links to your real profiles in the Text Editor after import, or replace that line with 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 × 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 a table, with its terracotta 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 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>Restaurant footer</title>
<style>
body{margin:0;font-family:'Lato',Helvetica,Arial,sans-serif;color:#e9dcc6;background:#231f1b}
.foot{background:#231f1b;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 #6e6358}
.brand{margin:0 0 12px;font-family:'Playfair Display',Georgia,serif;font-size:28px;font-weight:700;color:#f6efe3}
h2{margin:0 0 12px;font-family:'Lato',Helvetica,Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#f6efe3}
p{margin:0 0 8px;font-size:15px;line-height:1.7;color:#e9dcc6}
a{color:#e9dcc6}
.book{display:inline-block;margin-top:10px;padding:11px 20px;border-radius:999px;background:#a64b2f;color:#f6efe3;text-decoration:none;font-size:14px;font-weight:700;letter-spacing:.04em}
.small{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px}
.small p{margin:0;font-size:13px;color:#e9dcc6}
@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">Linden & Salt</p>
<p>A neighborhood bistro cooking with the seasons on Larkspur Row since 2021.</p>
<a class="book" href="/contact/#book">Book a table</a>
</div>
<div>
<h2>Address</h2>
<p>214 Larkspur Row<br>Millbrook</p>
<p>Two minutes from Millbrook Station</p>
</div>
<div>
<h2>Hours</h2>
<p>Tue–Thu 5–10 pm</p>
<p>Fri–Sat 5–11 pm</p>
<p>Sun 12–9 pm · Mon closed</p>
</div>
<div>
<h2>Contact</h2>
<p>(555) 014-2290</p>
<p>[email protected]</p>
<p>Instagram · Facebook · Newsletter</p>
</div>
</div>
<div class="small">
<p>© 2026 Linden & Salt. Prices and menus change with the season.</p>
<p>Privacy policy · Accessibility · Gift cards</p>
</div>
</div>
</footer>
</body>
</html>