Boutique hotel header

When to use it

The header for every page of a small hotel or bed and breakfast site. It carries the name, a one-line tagline that says how many rooms you have and where, three links and a single colored button. The tagline matters more than it looks: “16 rooms · Wrenmouth harbor” tells a visitor arriving from a map or a booking site that this is a small, independent house, which is the reason they might book with you instead. Rooms comes first because it is the page people open next, Stay covers what they will do once there, and Location answers the question that decides many bookings. Book direct is the only filled element in the bar. Replace the wordmark and tagline first, then point the button at your booking form or your booking engine’s link. If most guests book by phone, change the button to the number with a tel: link so mobile visitors can call in one tap.

What it converts to

Converted with the Native components mode. The component list below is what this template produces — not a generic example.

• Container × 5
• HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
• Text Editor × 5
• Button × 1

Things worth knowing

• Book direct has a rosewood background and short text, so it converts to a Button widget; the wordmark, the tagline and the three menu links arrive as five Text Editor widgets with their links kept, not as a Nav Menu.
• Put the converted block in an Elementor Theme Builder header template (Elementor Pro) so it appears on every page. Without Pro, paste it at the top of each page or keep the theme header.
• Below 780px the row stacks: the wordmark and tagline center above the links, and the links wrap with the button on the same line. There is no hamburger menu, so keep the labels short.
• The link targets (/rooms/, /stay/, /contact/#getting-here and /contact/#book) are placeholders carried over from the HTML; change them to your real page URLs after import.

The HTML

This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Boutique hotel header</title>
  <style>
    body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#2b2430;background:#f7f2ea}
    .bar{background:#f7f2ea;border-bottom:1px solid #ebe1d3}
    .inner{max-width:1160px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:flex;flex-direction:column;gap:2px}
    .logo{margin:0;font-family:'Cormorant Garamond',Garamond,Georgia,serif;font-size:30px;font-weight:600;line-height:1.1;letter-spacing:.01em;color:#2b2430}
    .logo a{color:#2b2430;text-decoration:none}
    .tagline{margin:0;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#6b5f62}
    .nav{display:flex;align-items:center;gap:30px}
    .link{color:#2b2430;text-decoration:none;font-size:15px;font-weight:600;letter-spacing:.02em}
    .book{display:inline-block;padding:11px 22px;border-radius:3px;background:#8f4a4a;color:#f7f2ea;text-decoration:none;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
    @media(max-width:780px){.inner{flex-direction:column;align-items:center;padding:14px 16px;gap:12px}.brand{align-items:center}.logo{font-size:26px}.nav{gap:18px;flex-wrap:wrap;justify-content:center}.link{font-size:14px}.book{padding:9px 16px;font-size:13px}}
  </style>
</head>
<body>
  <header class="bar">
    <div class="inner">
      <div class="brand">
        <p class="logo"><a href="/">Calder House</a></p>
        <p class="tagline">16 rooms · Wrenmouth harbor</p>
      </div>
      <nav class="nav" aria-label="Main">
        <a class="link" href="/rooms/">Rooms</a>
        <a class="link" href="/stay/">Stay</a>
        <a class="link" href="/contact/#getting-here">Location</a>
        <a class="book" href="/contact/#book">Book direct</a>
      </nav>
    </div>
  </header>
</body>
</html>