Conference footer
Dark conference footer recapping the date and venue, with a Get tickets button, contact emails, a code of conduct link 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 closes the one-page site with a recap for people who scroll to the bottom without clicking anything: the event name, the date and city in yellow, one sentence on who the event is for and a last Get tickets button. The venue column repeats the address and the nearest station. The contact column splits enquiries by inbox, so ticket and invoice questions reach the person who can answer them, and the Good to know column links the code of conduct, refunds and travel. Speakers and partners often look for a code of conduct before they agree to take part, so give it its own page and keep the link here. Replace the email addresses first, using the inboxes you will actually answer from. The copyright line deliberately has no year, so the footer does not need editing for next season’s event.
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 become Heading widgets, the event name, date and every line of text become Text Editor widgets, and Get tickets, with its magenta background, becomes a Button widget linking to #tickets.
- Code of conduct links to /code-of-conduct/, a page this kit does not include; create it or change the link. Refunds and transfers and Accessibility and travel link to #faq and #venue, which only work once the page’s CSS IDs are renamed to faq and venue.
- Use it as an Elementor Theme Builder footer (Elementor Pro) or paste it at the bottom of the page. Below 780px the four columns stack into one and the small-print row splits into two lines.
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>Conference footer</title>
<style>
body{margin:0;font-family:'Work Sans',Helvetica,Arial,sans-serif;color:#eef1fa;background:#101a4d}
.foot{background:#101a4d;padding:64px 0 28px;border-top:6px solid #d61f63}
.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 #4f5878}
.brand{margin:0 0 6px;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:28px;font-weight:700;letter-spacing:-.02em;color:#ffffff}
.date{margin:0 0 18px;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:20px;font-weight:700;color:#ffc83d}
h2{margin:0 0 12px;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ffc83d}
p{margin:0 0 8px;font-size:15px;line-height:1.7;color:#eef1fa}
a{color:#ffffff}
.tickets{display:inline-block;margin-top:8px;padding:12px 22px;border-radius:6px;background:#d61f63;color:#ffffff;text-decoration:none;font-size:15px;font-weight:700}
.small{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px}
.small p{margin:0;font-size:13px;color:#eef1fa}
@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">Halden Product Summit</p>
<p class="date">May 14–15 · Port Halden</p>
<p>A two-day regional conference for product managers, designers, researchers and engineers.</p>
<a class="tickets" href="#tickets">Get tickets</a>
</div>
<div>
<h2>Venue</h2>
<p>Halden Exchange Hall<br>40 Quayside Lane<br>Port Halden</p>
<p>Eight minutes from Port Halden Central</p>
</div>
<div>
<h2>Contact</h2>
<p>[email protected]</p>
<p>Tickets and invoices: [email protected]</p>
<p>Partners: [email protected]</p>
</div>
<div>
<h2>Good to know</h2>
<p><a href="/code-of-conduct/">Code of conduct</a></p>
<p><a href="#faq">Refunds and transfers</a></p>
<p><a href="#venue">Accessibility and travel</a></p>
</div>
</div>
<div class="small">
<p>© Halden Product Summit. An independent, volunteer-run conference.</p>
<p>Privacy policy · Photo policy · Press</p>
</div>
</div>
</footer>
</body>
</html>
