Website kits
Restaurant home page
Restaurant home page: hero with opening hours and booking button, three signature dishes, story teaser, guest quotes, location band and booking close.
When to use it
The front page of a neighborhood restaurant, ordered by what people decide first. The hero answers “are they open tonight and can I get a table” before anything else: the hours sit directly under the headline and the Book a table button follows them, so on a phone both appear before the photo. Three signature dishes come next because food photos do more for a booking than any sentence. The story teaser and guest quotes give a reason to choose you over the place next door, and the dark location band repeats the address, hours and phone for people who scrolled straight to the bottom. A short booking prompt closes the page. Replace the hours and dish photos first; a photo that does not match what arrives at the table costs more goodwill than no photo. Keep the guest quotes only if they are real reviews you have permission to reuse.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 20
- Container (grid) × 2
- Container (grid, 3 columns) × 3
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 12
- Heading × 8
- Icon List × 1
- Button × 4
- Image × 2
- Image Box × 3
- Testimonial × 3
Things worth knowing
- The three dish cards each hold one image, one heading and one paragraph, so they convert to Image Box widgets; the price is part of the description text.
- The hours block in the hero becomes one Icon List widget with a circle icon per line, provided the Icons option is set to match the Elementor icon library.
- Each guest quote is a figure with a blockquote and a caption, which converts to a Testimonial widget with the name and the description after the dash in separate fields.
- The hero and story photos become Image widgets and the dish cards keep empty image slots; upload your own photos to the Media Library and select them after import.
- All two- and three-column rows stack 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>Linden & Salt — neighborhood bistro</title>
<style>
body{margin:0;font-family:'Lato',Helvetica,Arial,sans-serif;color:#231f1b;background:#f6efe3}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;color:#231f1b;font-weight:700}
h1{font-size:56px;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.75;color:#6e6358;margin:0 0 18px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#a64b2f;margin:0 0 14px}
.button{display:inline-block;padding:15px 28px;border-radius:999px;background:#a64b2f;color:#f6efe3;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.03em}
.ghost{display:inline-block;padding:14px 26px;border-radius:999px;border:1px solid #231f1b;color:#231f1b;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.03em}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.hero{padding:64px 0 80px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.hours{display:flex;flex-direction:column;gap:8px;margin:0 0 28px;padding:18px 22px;border-left:3px solid #5f6234;background:#e9dcc6}
.hours > div{display:flex;gap:12px;align-items:center;font-size:16px;color:#231f1b}
.dot{color:#5f6234;font-size:10px}
.hero-img{width:100%;height:520px;object-fit:cover;border-radius:6px;display:block;background:#e9dcc6}
.head{max-width:640px;margin:0 0 40px}
.dishes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.dish{background:#f6efe3}
.dish img{width:100%;height:300px;object-fit:cover;border-radius:6px;display:block;margin:0 0 18px;background:#e9dcc6}
.dish p{font-size:16px;margin:0}
.sand{background:#e9dcc6}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.story-img{width:100%;height:440px;object-fit:cover;border-radius:6px;display:block;background:#f6efe3}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.quote{margin:0;padding:30px;border:1px solid #e9dcc6;border-radius:6px;background:#f6efe3}
.quote blockquote{margin:0 0 18px;font-family:'Playfair Display',Georgia,serif;font-size:19px;line-height:1.6;color:#231f1b}
.quote cite{font-style:normal}
.quote figcaption{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5f6234}
.dark{background:#231f1b}
.dark h2,.dark h3{color:#f6efe3}
.dark p{color:#e9dcc6}
.visit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.visit p{margin:0;font-size:16px}
.cta{text-align:center}
.cta .inner{max-width:640px;margin:0 auto}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.hero{padding:36px 0 56px}
.hero .wrap,.story,.dishes,.quotes,.visit{grid-template-columns:minmax(0,1fr);gap:28px}
h1{font-size:38px}
h2{font-size:29px}
.hero-img{height:300px}
.story-img{height:280px}
.dish img{height:240px}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<div>
<p class="eyebrow">Neighborhood bistro on Larkspur Row</p>
<h1>Seasonal cooking, a short menu and a table that’s yours all evening</h1>
<p>We cook what the farms send us that week, over wood and in cast iron. Walk-ins welcome at the bar; tables are best booked.</p>
<div class="hours">
<div><span class="dot">●</span><span>Tue–Thu · 5:00–10:00 pm</span></div>
<div><span class="dot">●</span><span>Fri–Sat · 5:00–11:00 pm</span></div>
<div><span class="dot">●</span><span>Sun · 12:00–9:00 pm · Closed Mondays</span></div>
</div>
<div class="actions">
<a class="button" href="/contact/#book">Book a table</a>
<a class="ghost" href="/menu/">See the menu</a>
</div>
</div>
<img class="hero-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/restaurant/dining-room.jpg" width="1600" height="1000" alt="Warm bistro dining room at dusk with wooden tables, candles and a long bar">
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">From the kitchen</p>
<h2>Three dishes people come back for</h2>
<p>The menu changes with the season, but these stay on in some form all year.</p>
</div>
<div class="dishes">
<article class="dish">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/restaurant/dish-lamb.jpg" width="1200" height="1200" alt="Wood-roasted lamb shoulder with charred carrots and salsa verde on a ceramic plate">
<h3>Wood-roasted lamb shoulder</h3>
<p>Slow-cooked for six hours, finished over oak, with charred carrots and salsa verde. $34</p>
</article>
<article class="dish">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/restaurant/dish-agnolotti.jpg" width="1200" height="1200" alt="Hand-pinched agnolotti in brown butter with sage leaves in a shallow bowl">
<h3>Squash agnolotti</h3>
<p>Hand-pinched every afternoon, brown butter, crisp sage and aged sheep’s cheese. $24</p>
</article>
<article class="dish">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/restaurant/dish-tart.jpg" width="1200" height="1200" alt="Slice of burnt honey custard tart with a spoon of crème fraîche">
<h3>Burnt honey tart</h3>
<p>Short pastry, a just-set honey custard and a spoon of cultured crème fraîche. $11</p>
</article>
</div>
</div>
</section>
<section class="sand">
<div class="wrap story">
<img class="story-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/restaurant/kitchen-pass.jpg" width="1000" height="1250" alt="Chef plating a dish at the kitchen pass under warm lights">
<div>
<p class="eyebrow">Our story</p>
<h2>A small room that started as a supper club</h2>
<p>Linden & Salt began as Friday dinners for twelve in a borrowed kitchen. We opened on Larkspur Row with the same idea: one menu, cooked by the people you can see from your seat, priced so it can be a Tuesday night out.</p>
<p>Most of what we cook comes from farms within a two-hour drive, and we name every one of them.</p>
<a class="ghost" href="/about/">Read our story</a>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">Guests on Linden & Salt</p>
<h2>What regulars tell us</h2>
</div>
<div class="quotes">
<figure class="quote">
<blockquote>“We came for a birthday and have booked the same corner table every month since. The menu is never quite the same twice.”</blockquote>
<figcaption><cite>Dana R.</cite> — guest since opening</figcaption>
</figure>
<figure class="quote">
<blockquote>“They remembered my partner’s nut allergy from the booking note without us mentioning it again. That is why we come back.”</blockquote>
<figcaption><cite>Marcus T.</cite> — Millbrook resident</figcaption>
</figure>
<figure class="quote">
<blockquote>“Sitting at the bar watching the kitchen work is the best seat in the house. Order the lamb if it is on.”</blockquote>
<figcaption><cite>Priya S.</cite> — bar regular</figcaption>
</figure>
</div>
</div>
</section>
<section class="dark">
<div class="wrap">
<div class="visit">
<div>
<h3>Find us</h3>
<p>214 Larkspur Row, Millbrook. Two minutes from Millbrook Station; street parking after 6 pm.</p>
</div>
<div>
<h3>Opening hours</h3>
<p>Tue–Thu 5–10 pm · Fri–Sat 5–11 pm · Sun 12–9 pm. Kitchen closes 45 minutes before we do.</p>
</div>
<div>
<h3>Call or write</h3>
<p>(555) 014-2290 · [email protected]. We reply to emails within one working day.</p>
</div>
</div>
</div>
</section>
<section class="cta">
<div class="wrap">
<div class="inner">
<h2>Book your table</h2>
<p>Reservations open 30 days ahead. For groups of seven or more, use the private dining request so we can plan the menu with you.</p>
<a class="button" href="/contact/#book">Reserve now</a>
</div>
</div>
</section>
</body>
</html>