Creative agency footer
Dark agency footer with a large closing line and Start a project button, studio address, contact details, page links 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 that ends every page of the studio site. Long case studies and service pages finish here, so it opens with one more invitation, a large closing line and a Start a project button, before the practical details. Below that sit four columns: the studio name with a one-line description, the address with a note that visits are by appointment, email, phone and social channels, and links to the main pages. The small-print row carries the copyright line, a note that client work is shown with permission, and privacy and accessibility links. Rewrite the closing line in your own voice first, since it is the last thing a reader sees before deciding whether to get in touch. Then make sure the address, email and phone match the contact page exactly. If you publish a newsletter or a journal, add it to the Pages column rather than to the header.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 9
- 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 closing line and every line of contact text arrive as Text Editor widgets, the three column titles as Heading widgets, and only Start a project, with its pink background, becomes a Button.
- Instagram, LinkedIn and Newsletter are plain text, not links or icons; link them in the Text Editor after import or replace the line with a Social Icons widget.
- 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 closing line and button stack, the four columns become 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>Agency footer</title>
<style>
body{margin:0;font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif;color:#a3a1a8;background:#0e0e10}
.foot{background:#0e0e10;padding:80px 0 28px;border-top:1px solid #2a2a31}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding:0 0 56px;border-bottom:1px solid #2a2a31}
.big{margin:0;max-width:640px;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:48px;font-weight:700;line-height:1.05;letter-spacing:-.04em;color:#f2efe9}
.start{display:inline-block;padding:16px 28px;border-radius:999px;background:#ff4d8d;color:#0e0e10;text-decoration:none;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:16px;font-weight:700;white-space:nowrap}
.cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px;padding:48px 0}
.brand{margin:0 0 12px;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:24px;font-weight:700;letter-spacing:-.03em;color:#f2efe9}
h2{margin:0 0 14px;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#f2efe9}
p{margin:0 0 8px;font-size:15px;line-height:1.7;color:#a3a1a8}
a{color:#a3a1a8}
.small{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;border-top:1px solid #2a2a31}
.small p{margin:0;font-size:13px}
@media(max-width:780px){.foot{padding:56px 0 24px}.wrap{padding:0 16px}.top{flex-direction:column;align-items:flex-start;gap:24px;padding:0 0 40px}.big{font-size:34px}.cols{grid-template-columns:minmax(0,1fr);gap:28px;padding:40px 0}.small{flex-direction:column;gap:6px}}
</style>
</head>
<body>
<footer class="foot">
<div class="wrap">
<div class="top">
<p class="big">Got a brief, half a brief or just a hunch? Send it over.</p>
<a class="start" href="/contact/">Start a project</a>
</div>
<div class="cols">
<div>
<p class="brand">Lowtide Studio</p>
<p>An independent brand, web and product design studio of twelve people, working with teams in any time zone.</p>
</div>
<div>
<h2>Studio</h2>
<p>41 Foundry Lane, Unit 3<br>Easthaven</p>
<p>Visits by appointment</p>
</div>
<div>
<h2>Contact</h2>
<p>[email protected]</p>
<p>(555) 018-4420</p>
<p>Instagram · LinkedIn · Newsletter</p>
</div>
<div>
<h2>Pages</h2>
<p><a href="/work/">Work</a></p>
<p><a href="/services/">Services</a></p>
<p><a href="/contact/">Contact</a></p>
</div>
</div>
<div class="small">
<p>© 2026 Lowtide Studio. Client names and work shown with permission.</p>
<p>Privacy policy · Accessibility</p>
</div>
</div>
</footer>
</body>
</html>
