Online course header

When to use it

The header shared by every page of a one-course site, kept to a single row so the sales video below it stays above the fold on a laptop. A course site has few destinations, and the bar shows them all: the course itself, the full lesson list, the person teaching it, and the Enroll button, which is the only colored element so it is the first thing a returning visitor finds. The wordmark uses the instructor’s name rather than a brand, because for a solo teacher the name is what people search for and remember. Replace the name first, then decide where Enroll should go: to the pricing page, as here, if you sell more than one option, or straight to checkout if you sell one. A tip for course creators: leave a Log in link out of this bar unless your course platform runs on the same domain, and send students to their lessons from the welcome email instead.

What it converts to

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

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

Things worth knowing

• Enroll has a rose background and short text, so it converts to a Button widget; the wordmark and the Course, Curriculum and About links arrive as 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 centers above the links and the links wrap beneath it. There is no hamburger menu, so keep the labels short.
• The link targets (/, /curriculum/, /about/ and /pricing/) are placeholders carried over from the HTML; change them to your real page URLs, or point Enroll straight at your checkout.

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>Online course header</title>
  <style>
    body{margin:0;font-family:'Nunito',Helvetica,Arial,sans-serif;color:#262a3b;background:#fffdf8}
    .bar{background:#fffdf8;border-bottom:1px solid #fde8dc}
    .inner{max-width:1160px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .logo{margin:0;font-family:'Fraunces',Georgia,serif;font-size:25px;font-weight:700;letter-spacing:-.01em;color:#262a3b}
    .logo a{color:#262a3b;text-decoration:none}
    .nav{display:flex;align-items:center;gap:30px}
    .link{color:#262a3b;text-decoration:none;font-size:16px;font-weight:700}
    .enroll{display:inline-block;padding:11px 22px;border-radius:12px;background:#c93e64;color:#fffdf8;text-decoration:none;font-size:15px;font-weight:800}
    @media(max-width:780px){.inner{flex-direction:column;align-items:center;padding:14px 16px;gap:12px}.logo{font-size:22px}.nav{gap:18px;flex-wrap:wrap;justify-content:center}.link{font-size:15px}.enroll{padding:9px 18px;font-size:14px}}
  </style>
</head>
<body>
  <header class="bar">
    <div class="inner">
      <p class="logo"><a href="/">Ines Marlow Watercolor</a></p>
      <nav class="nav" aria-label="Main">
        <a class="link" href="/">Course</a>
        <a class="link" href="/curriculum/">Curriculum</a>
        <a class="link" href="/about/">About</a>
        <a class="enroll" href="/pricing/">Enroll</a>
      </nav>
    </div>
  </header>
</body>
</html>