SaaS product header

When to use it

The header for a software product site, where the two most common reasons to land on any page are to sign in or to start a trial. Both sit on the right, with the trial as the only filled button so it reads as the main action and Sign in stays available without competing. The four menu items cover what a buyer checks before committing: what the product does, what it costs, who already uses it and how well it is documented. Replace the Corvane wordmark with your logo first, then point Docs at your real help center, because a dead documentation link is one of the quickest ways to lose a technical evaluator. On phones the header stacks into three short rows, so keep menu labels to one word each and resist adding a fifth item; anything else belongs in the footer.

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

• Converts to Containers, six Text Editor widgets (the wordmark, the four menu links and Sign in) and one Button for Start free trial. Sign in is a plain link, so it stays a Text Editor rather than a Button.
• The menu links arrive as separate Text Editors, not a menu widget. With Elementor Pro, replace them with a Nav Menu widget so the links follow your WordPress menu and get a mobile toggle.
• Below 780px the bar wraps into three rows: wordmark, menu, then Sign in with the trial button. The wrap is written into the Container’s responsive settings.
• Use it as a Theme Builder header (Elementor Pro). Without Pro, paste it at the top of each page or keep your theme’s own header.

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>SaaS header</title>
  <style>
    *{box-sizing:border-box}
    body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color:#16152e;background:#ffffff}
    .bar{background:#ffffff;border-bottom:1px solid #eeecfd}
    .inner{max-width:1160px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .logo{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;font-size:23px;font-weight:800;letter-spacing:-.03em;color:#4f46e5;text-decoration:none}
    .menu{display:flex;align-items:center;gap:30px}
    .menu a{color:#5c5b78;text-decoration:none;font-size:15px;font-weight:500}
    .actions{display:flex;align-items:center;gap:18px}
    .signin{color:#16152e;text-decoration:none;font-size:15px;font-weight:600}
    .button{display:inline-block;padding:11px 20px;border-radius:9px;background:#4f46e5;color:#ffffff;text-decoration:none;font-size:15px;font-weight:700}
    @media(max-width:780px){
      .inner{flex-wrap:wrap;gap:14px 18px;padding:14px 16px}
      .menu{width:100%;gap:20px;flex-wrap:wrap}
      .menu a{font-size:14px}
      .button{padding:10px 16px;font-size:14px}
    }
  </style>
</head>
<body>
  <header class="bar">
    <div class="inner">
      <a class="logo" href="#home">Corvane</a>
      <nav class="menu" aria-label="Main">
        <a href="#product">Product</a>
        <a href="#pricing">Pricing</a>
        <a href="#customers">Customers</a>
        <a href="#docs">Docs</a>
      </nav>
      <div class="actions">
        <a class="signin" href="#signin">Sign in</a>
        <a class="button" href="#trial">Start free trial</a>
      </div>
    </div>
  </header>
</body>
</html>