Website kits
Boutique hotel home page
Hotel home page: hero with check-in and check-out times and Book direct button, three room cards, reasons to book direct, breakfast, guest quotes, location.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The front page of a small hotel or B&B, ordered around the decision to book direct. The hero puts check-in, check-out and breakfast times right under the headline, because those are the facts people check before anything else, and the Book direct button follows them so both are visible on a phone before the photo. Three room cards come next with a from-price on each, then four reasons to book with you rather than through a booking site. Breakfast and the house give the stay its character, guest quotes add reassurance, and the dark location band answers “how far is it from the station and the sea”. A short booking prompt with the phone number closes the page. Replace the hero photo and the times first. Only promise book-direct benefits your contracts with booking sites allow, and keep the guest quotes only if they are real comments 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 × 21
- Container (grid) × 3
- Container (grid, 3 columns) × 2
- Container (grid, 4 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 13
- Heading × 7
- Icon List × 3
- Button × 6
- Image × 3
- Image Box × 3
- Icon Box × 4
- Testimonial × 3
Things worth knowing
- The three room cards each hold one image, one heading and one paragraph, so they convert to Image Box widgets; the from-price is part of the description text.
- The four book-direct cards convert to Icon Box widgets with check, undo, circle and star icons, and the times, amenities and distances blocks become three Icon List widgets.
- Each guest quote is a figure with a blockquote and a caption, which converts to a Testimonial widget with the name and the stay details in separate fields.
- The hero, breakfast and coast photos become Image widgets and the room cards keep empty image slots; select your own photos from the Media Library after import. All six links with a background or border become Button widgets.
- Choose “match the Elementor icon library” in the Icons option. The ✓, ● and → rows only become Icon List and Icon Box widgets in that mode; otherwise they arrive as plain text.
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>Calder House — a 16-room harbor hotel in Wrenmouth</title>
<style>
body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#2b2430;background:#f7f2ea}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:88px 0}
h1,h2,h3{font-family:'Cormorant Garamond',Garamond,Georgia,serif;color:#2b2430;font-weight:600}
h1{font-size:62px;line-height:1.04;letter-spacing:-.01em;margin:0 0 20px}
h2{font-size:44px;line-height:1.1;margin:0 0 16px}
h3{font-size:26px;line-height:1.2;margin:0 0 8px}
p{font-size:17px;line-height:1.75;color:#6b5f62;margin:0 0 18px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#8f4a4a;margin:0 0 16px}
.button{display:inline-block;padding:15px 30px;border-radius:3px;background:#8f4a4a;color:#f7f2ea;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.ghost{display:inline-block;padding:14px 28px;border-radius:3px;border:1px solid #2b2430;color:#2b2430;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.hero{padding:56px 0 88px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);gap:60px;align-items:center}
.times{display:flex;flex-direction:column;gap:10px;margin:0 0 30px;padding:20px 0;border-top:1px solid #ebe1d3;border-bottom:1px solid #ebe1d3}
.times > div{display:flex;gap:14px;align-items:center;font-size:16px;color:#2b2430}
.dot{color:#7d8a6e;font-size:10px}
.hero-img{width:100%;height:560px;object-fit:cover;display:block;background:#ebe1d3}
.head{max-width:660px;margin:0 0 44px}
.rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.room img{width:100%;height:320px;object-fit:cover;display:block;margin:0 0 20px;background:#ebe1d3}
.room p{font-size:16px;margin:0}
.more{margin:40px 0 0}
.oat{background:#ebe1d3}
.reasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.reason{padding:28px 26px;background:#f7f2ea}
.reason-icon{display:inline-block;color:#8f4a4a;font-size:22px;line-height:1;margin:0 0 16px}
.reason h3{font-size:23px}
.reason p{font-size:15px;margin:0}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:center}
.split-img{width:100%;height:460px;object-fit:cover;display:block;background:#ebe1d3}
.amenities{display:flex;flex-direction:column;gap:12px;margin:8px 0 0}
.amenities > div{display:flex;gap:14px;align-items:center;font-size:16px;color:#2b2430}
.tick{color:#7d8a6e;font-size:15px}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.quote{margin:0;padding:32px 30px;border-top:2px solid #8f4a4a;background:#ebe1d3}
.quote blockquote{margin:0 0 20px;font-family:'Cormorant Garamond',Garamond,Georgia,serif;font-size:23px;line-height:1.45;color:#2b2430}
.quote cite{font-style:normal}
.quote figcaption{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b5f62}
.dark{background:#2b2430}
.dark h2,.dark h3{color:#f7f2ea}
.dark p{color:#ebe1d3}
.dark .eyebrow{color:#ebe1d3}
.location{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.loc-img{width:100%;height:400px;object-fit:cover;display:block;background:#6b5f62}
.distances{display:flex;flex-direction:column;gap:12px;margin:6px 0 30px}
.distances > div{display:flex;gap:14px;align-items:center;font-size:16px;color:#f7f2ea}
.arrow{color:#7d8a6e;font-size:15px}
.light{display:inline-block;padding:14px 28px;border-radius:3px;border:1px solid #ebe1d3;color:#f7f2ea;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.cta{text-align:center}
.cta .inner{max-width:660px;margin:0 auto}
.cta .actions{justify-content:center}
@media(max-width:780px){
section{padding:60px 0}
.wrap{padding:0 16px}
.hero{padding:32px 0 60px}
.hero .wrap,.rooms,.split,.quotes,.location{grid-template-columns:minmax(0,1fr);gap:30px}
.reasons{grid-template-columns:minmax(0,1fr);gap:16px}
h1{font-size:42px}
h2{font-size:33px}
h3{font-size:24px}
.hero-img{height:300px}
.room img{height:260px}
.split-img{height:280px}
.loc-img{height:240px}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<div>
<p class="eyebrow">Small hotel & breakfast · Wrenmouth</p>
<h1>Sixteen quiet rooms, two streets from the harbor</h1>
<p>Calder House is a restored 1840s sea captain’s house with sixteen bedrooms, a lounge with a fire and a breakfast worth getting up for. Book with us directly for our lowest rate and a later check-out.</p>
<div class="times">
<div><span class="dot">●</span><span>Check-in from 3:00 pm to 9:00 pm</span></div>
<div><span class="dot">●</span><span>Check-out by 11:00 am</span></div>
<div><span class="dot">●</span><span>Breakfast 7:30–10:00 am, included in every rate</span></div>
</div>
<div class="actions">
<a class="button" href="/contact/#book">Book direct</a>
<a class="ghost" href="/rooms/">See the rooms</a>
</div>
</div>
<img class="hero-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/hotel/exterior.jpg" width="1600" height="1000" alt="Tall gray stone townhouse hotel with white sash windows and a dark blue front door on a quiet harbor street at early evening">
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">The rooms</p>
<h2>Four kinds of room, no two quite alike</h2>
<p>Every room has its own bathroom, a proper mattress, blackout curtains and windows that open. Rates are per room per night, breakfast for two included.</p>
</div>
<div class="rooms">
<article class="room">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/hotel/room-garden.jpg" width="1200" height="1200" alt="Calm double bedroom with a linen-covered queen bed, an oak side table and a window onto a green walled garden">
<h3>Garden Double</h3>
<p>Ground-floor rooms looking onto the walled garden, with a queen bed and a walk-in shower. From $165 a night.</p>
</article>
<article class="room">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/hotel/room-harbor.jpg" width="1200" height="1200" alt="Bright bedroom with a king bed and a cushioned window seat overlooking harbor rooftops and the sea">
<h3>Harbor View King</h3>
<p>Third-floor rooms with a king bed, a window seat and a view over the rooftops to the water. From $215 a night.</p>
</article>
<article class="room">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/hotel/room-loft.jpg" width="1200" height="1200" alt="Spacious attic suite under sloping beamed ceilings with a king bed, a sofa and a freestanding bathtub">
<h3>Loft Suite</h3>
<p>Two suites under the eaves with a sofa bed, a freestanding bath and room for a family of four. From $295 a night.</p>
</article>
</div>
<div class="more"><a class="ghost" href="/rooms/">Compare all four room types</a></div>
</div>
</section>
<section class="oat">
<div class="wrap">
<div class="head">
<p class="eyebrow">Why book with us directly</p>
<h2>The same room, on better terms</h2>
<p>Booking sites charge us a commission on every stay. When you book with us, we pass that back to you.</p>
</div>
<div class="reasons">
<div class="reason"><span class="reason-icon">✓</span><h3>Our lowest rate</h3><p>We never charge more here than a booking site does for the same room on the same dates.</p></div>
<div class="reason"><span class="reason-icon">↺</span><h3>Free cancellation</h3><p>Change or cancel without charge up to 72 hours before arrival, on every flexible rate.</p></div>
<div class="reason"><span class="reason-icon">●</span><h3>Check out at noon</h3><p>Direct guests keep the room an hour longer on request, so the last morning is not a rush.</p></div>
<div class="reason"><span class="reason-icon">★</span><h3>A real person</h3><p>Your booking comes straight to our front desk, so special requests reach someone who can act on them.</p></div>
</div>
</div>
</section>
<section>
<div class="wrap split">
<img class="split-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/hotel/breakfast.jpg" width="1600" height="1000" alt="Breakfast table by a sunny window with fresh bread, local butter, a pot of coffee, eggs and a bowl of berries">
<div>
<p class="eyebrow">Breakfast and the house</p>
<h2>Breakfast is cooked to order, every morning</h2>
<p>Eggs from a farm up the valley, bread from the bakery on Ropewalk Lane and smoked fish from the harbor. Sit in the breakfast room or take a tray up to your room.</p>
<div class="amenities">
<div><span class="tick">✓</span><span>Cooked or continental breakfast, included in every rate</span></div>
<div><span class="tick">✓</span><span>Lounge with a fire, books and an honesty bar</span></div>
<div><span class="tick">✓</span><span>Walled garden open to guests all day</span></div>
<div><span class="tick">✓</span><span>Free Wi-Fi throughout and four on-site parking spaces</span></div>
<div><span class="tick">✓</span><span>Boot room and drying rack for walkers</span></div>
</div>
</div>
</div>
</section>
<section class="oat">
<div class="wrap">
<div class="head">
<p class="eyebrow">From our guest book</p>
<h2>What guests write before they leave</h2>
</div>
<div class="quotes">
<figure class="quote">
<blockquote>“We asked for a quiet room for a light sleeper and were given the garden room at the end of the hall. Not a sound all night.”</blockquote>
<figcaption><cite>Helen and Mark</cite> — three nights in October</figcaption>
</figure>
<figure class="quote">
<blockquote>“The kippers at breakfast and the walk along the coast path afterwards were the best part of our year so far.”</blockquote>
<figcaption><cite>Jonah P.</cite> — first visit</figcaption>
</figure>
<figure class="quote">
<blockquote>“Our train was two hours late. Someone was still waiting up with a key and a pot of tea when we arrived.”</blockquote>
<figcaption><cite>Amara and Lou</cite> — returning guests</figcaption>
</figure>
</div>
</div>
</section>
<section class="dark">
<div class="wrap location">
<div>
<p class="eyebrow">Where we are</p>
<h2>On Quayside Terrace, in the old harbor quarter</h2>
<p>12 Quayside Terrace, Wrenmouth. A flat walk from the station and everything in the old town, with the coast path starting at the end of the street.</p>
<div class="distances">
<div><span class="arrow">→</span><span>Harbor and fish market · 4 minutes on foot</span></div>
<div><span class="arrow">→</span><span>Wrenmouth Station · 10 minutes on foot</span></div>
<div><span class="arrow">→</span><span>Coast path to Sallow Point · from the end of the street</span></div>
</div>
<a class="light" href="/contact/#getting-here">How to get here</a>
</div>
<img class="loc-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/hotel/coast-path.jpg" width="1600" height="900" alt="Grassy coastal footpath winding along low cliffs above a calm sea under a soft morning sky">
</div>
</section>
<section class="cta">
<div class="wrap">
<div class="inner">
<p class="eyebrow">Plan your stay</p>
<h2>Tell us your dates</h2>
<p>Send a booking request and we will reply within a few hours with availability and the exact price. Weekends from May to September go first, so plan early for summer.</p>
<div class="actions">
<a class="button" href="/contact/#book">Book direct</a>
<a class="ghost" href="tel:+15550184471">Call (555) 018-4471</a>
</div>
</div>
</div>
</section>
</body>
</html>
