Real estate agency header

When to use it

The header for an agency whose two most valuable visitors are a seller ready for a valuation and a buyer looking for homes. Buy, Sell and Rent are the first three links because those are the questions people arrive with; Our agents comes last because it is where people go once they are already interested. The only filled button is Book a valuation, since a valuation is how an agency wins new listings and it should be one tap away on every page. Under the wordmark, a short line names the towns you cover, which tells an out-of-area visitor in two seconds whether to stay. Replace the agency name and that area line first, then point the four links at your real pages. On phones the links drop to a second row under the wordmark and button, so keep the labels to one or two words each.

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 × 6
• Button × 1

Things worth knowing

• The four menu links arrive as four Text Editor widgets inside one flex Container, not as a Nav Menu. If you have Elementor Pro, swap that Container for a Nav Menu widget tied to a WordPress menu so the links can be managed in one place.
• Book a valuation becomes a native Button widget because it has a background color and short text; set its link to your valuation page after import.
• Below 780px the menu wraps onto its own row under a thin divider. That layout comes from the bar’s flex-wrap and the menu’s full width, so check it in Elementor’s mobile preview after import.
• For a site-wide header, save the converted section as a Theme Builder header (Elementor Pro). Without Pro, paste it at the top of each page.

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>Fernhollow Estates header</title>
  <style>
    body{margin:0;font-family:'DM Sans',Arial,Helvetica,sans-serif;color:#23261f;background:#fbf8f2}
    .site-header{background:#fbf8f2;border-bottom:1px solid #e8dcc6}
    .bar{max-width:1160px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .brand{font-family:'DM Serif Display',Georgia,serif;font-size:26px;line-height:1.1;color:#1f3d2f;text-decoration:none;margin:0}
    .tagline{margin:4px 0 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#5f6156}
    .menu{display:flex;align-items:center;gap:30px}
    .menu a{font-size:15px;font-weight:500;color:#23261f;text-decoration:none}
    .book{display:inline-block;padding:12px 22px;border-radius:6px;background:#1f3d2f;color:#fbf8f2;text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap}
    @media(max-width:780px){.bar{flex-wrap:wrap;padding:14px 16px;gap:14px}.brand{font-size:22px}.menu{order:3;width:100%;gap:18px;flex-wrap:wrap;padding-top:12px;border-top:1px solid #e8dcc6}.menu a{font-size:14px}.book{padding:10px 16px;font-size:14px}}
  </style>
</head>
<body>
  <header class="site-header">
    <div class="bar">
      <div>
        <a class="brand" href="#home">Fernhollow Estates</a>
        <p class="tagline">Brackenford & the Ashgrove villages</p>
      </div>
      <nav class="menu" aria-label="Main">
        <a href="#buy">Buy</a>
        <a href="#sell">Sell</a>
        <a href="#rent">Rent</a>
        <a href="#agents">Our agents</a>
      </nav>
      <a class="book" href="#valuation">Book a valuation</a>
    </div>
  </header>
</body>
</html>