Online course footer
Dark online course footer with the wordmark, a short promise, an Enroll button, course and about links, contact details and a small-print row.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The footer closing every page of the course site. Buyers often scroll to the bottom looking for one specific thing — the refund policy, a contact address, the free sample lesson — so the footer lists them in plain words in three short columns, with the instructor’s name, a one-line description of the course and an Enroll button on the left for anyone who has already decided. A small-print row carries the copyright line, a note that student paintings appear with permission, and the privacy policy, terms of sale and refund policy that careful buyers look for before paying. Replace the email address and the reply-time promise first, and only promise a reply time you can keep during a busy launch week. The social channel names are plain text so the block converts cleanly; link them in the Text Editor after import or swap the line for a Social Icons widget.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 8
- Container (grid) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 13
- Button × 1
- Heading × 3
Things worth knowing
- The three column titles convert to Heading widgets, the wordmark and every line of text to Text Editor widgets with their links kept, and only Enroll, with its rose background, becomes a Button.
- Use it as an Elementor Theme Builder footer template (Elementor Pro) so it shows on every page; without Pro, paste it at the bottom of each page.
- Below 780px the four columns stack into one and the small-print row splits into two lines.
- The email address, Instagram, YouTube and Newsletter are plain text, not links; add a mailto: link and your profile links, or a Social Icons widget, after import.
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>Online course footer</title>
<style>
body{margin:0;font-family:'Nunito',Helvetica,Arial,sans-serif;color:#fde8dc;background:#262a3b}
.foot{background:#262a3b;padding:64px 0 28px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px;padding:0 0 40px;border-bottom:1px solid #636879}
.brand{margin:0 0 12px;font-family:'Fraunces',Georgia,serif;font-size:26px;font-weight:700;color:#fffdf8}
h2{margin:0 0 14px;font-family:'Nunito',Helvetica,Arial,sans-serif;font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fffdf8}
p{margin:0 0 9px;font-size:15px;line-height:1.7;color:#fde8dc}
a{color:#fde8dc;text-decoration:none}
.enroll{display:inline-block;margin-top:10px;padding:11px 22px;border-radius:12px;background:#c93e64;color:#fffdf8;text-decoration:none;font-size:15px;font-weight:800}
.small{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px}
.small p{margin:0;font-size:13px}
@media(max-width:780px){.foot{padding:48px 0 24px}.wrap{padding:0 16px}.cols{grid-template-columns:minmax(0,1fr);gap:28px}.small{flex-direction:column;gap:6px}}
</style>
</head>
<body>
<footer class="foot">
<div class="wrap">
<div class="cols">
<div>
<p class="brand">Ines Marlow Watercolor</p>
<p>A self-paced online course for adults learning watercolor from the very first wash.</p>
<a class="enroll" href="/pricing/">Enroll</a>
</div>
<div>
<h2>The course</h2>
<p><a href="/curriculum/">Curriculum</a></p>
<p><a href="/curriculum/#sample">Free sample lesson</a></p>
<p><a href="/pricing/">Pricing and refunds</a></p>
</div>
<div>
<h2>About</h2>
<p><a href="/about/">Meet Ines</a></p>
<p><a href="/about/#coaching">1:1 coaching</a></p>
<p><a href="/pricing/#faq">Questions</a></p>
</div>
<div>
<h2>Contact</h2>
<p>[email protected]</p>
<p>Replies within two working days</p>
<p>Instagram · YouTube · Newsletter</p>
</div>
</div>
<div class="small">
<p>© 2026 Ines Marlow Watercolor. Student paintings shown with permission.</p>
<p>Privacy policy · Terms of sale · Refund policy</p>
</div>
</div>
</footer>
</body>
</html>
