Four-column footer with bottom bar
Site footer with a brand blurb column, three link columns and a bottom bar holding the small print and text social links.
When to use it
A footer for a business site with more than a handful of pages: a short description and an email address in the first column, then three columns of links grouped by what a visitor is looking for, which are what you offer, who you are, and where to get help. The bottom bar carries the legal line and the social profiles, which is where people expect to find them. Rewrite the blurb first; it appears on every page, so name the service and the place in plain words. Then point the legal links at pages that exist, because a privacy policy link that returns a 404 is worse than no link at all. Like the header, the footer is meant for Elementor Theme Builder, which needs Elementor Pro; without Pro, save it as a template and insert it at the bottom of each page. For a local business, keep the street address in the bottom bar identical to the one on your contact page and business listings.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- pending
Things worth knowing
- The column titles are styled paragraphs rather than headings, so they arrive as Text Editor widgets. A footer repeats on every page and should not add three extra headings to each page’s outline.
- Every footer link, including the email address, becomes its own Text Editor widget containing a link (12 in the link columns). Change a URL through the link button in the Text Editor toolbar.
- The three text social links are recognised by their domains and become one Social Icons widget with Instagram, LinkedIn and Facebook brand icons, so the text labels are replaced by icons. Replace the placeholder profile URLs in the widget’s items.
- The four columns become a grid Container that drops to one column below 780px, and the bottom bar switches from a row to a column at the same breakpoint.
- To use it site-wide with Elementor Pro: Templates → Theme Builder → Footer, paste the converted block and set the display condition to Entire Site.
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>Four-column footer with bottom bar</title>
<style>
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#c3cfdd;background:#fff}
.site-footer{background:#14233a;color:#c3cfdd}
.wrap{max-width:1160px;margin:0 auto;padding:64px 24px 0}
.cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px}
.brand{margin:0 0 14px;font-size:21px;font-weight:800;letter-spacing:-.02em;color:#fff}
.blurb{margin:0 0 18px;font-size:14.5px;line-height:1.8;color:#a9b8cb;max-width:340px}
.mail{font-size:15px;font-weight:700;color:#ff7a56;text-decoration:none}
.label{margin:0 0 16px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.links{display:flex;flex-direction:column;gap:11px}
.links a{font-size:14.5px;color:#c3cfdd;text-decoration:none}
.bottom{border-top:1px solid #2b3d57;padding:22px 0 28px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.small{margin:0;font-size:13px;line-height:1.7;color:#8597ad}
.social{display:flex;gap:22px}
.social a{font-size:13px;font-weight:600;color:#c3cfdd;text-decoration:none}
@media(max-width:780px){
.wrap{padding:48px 20px 0}
.cols{grid-template-columns:1fr;gap:30px;padding-bottom:36px}
.bottom{flex-direction:column;align-items:flex-start;gap:12px}
}
</style>
</head>
<body>
<footer class="site-footer">
<div class="wrap">
<div class="cols">
<div class="about">
<p class="brand">Larkfield Studio</p>
<p class="blurb">Website planning, design and build for small service businesses. We work with a handful of clients at a time, so every project has one person you can call.</p>
<a class="mail" href="mailto:[email protected]">[email protected]</a>
</div>
<div class="col">
<p class="label">Services</p>
<div class="links">
<a href="/services/website-design/">Website design</a>
<a href="/services/rebuilds/">Site rebuilds</a>
<a href="/services/care-plans/">Care plans</a>
<a href="/services/copywriting/">Copywriting</a>
</div>
</div>
<div class="col">
<p class="label">Company</p>
<div class="links">
<a href="/about/">About</a>
<a href="/work/">Recent work</a>
<a href="/process/">How we work</a>
<a href="/careers/">Careers</a>
</div>
</div>
<div class="col">
<p class="label">Help</p>
<div class="links">
<a href="/contact/">Contact</a>
<a href="/faq/">FAQ</a>
<a href="/privacy-policy/">Privacy policy</a>
<a href="/terms/">Terms of service</a>
</div>
</div>
</div>
<div class="bottom">
<p class="small">© 2026 Larkfield Studio LLC · 1420 Alder Row, Suite 3, Portland, OR 97205</p>
<div class="social">
<a href="https://www.instagram.com/">Instagram</a>
<a href="https://www.linkedin.com/">LinkedIn</a>
<a href="https://www.facebook.com/">Facebook</a>
</div>
</div>
</div>
</footer>
</body>
</html>