Construction company footer
Dark builder footer with the wordmark, a quote button, services, studio address, contact details, service area and a licensing 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 for every page of the builder site. Prospective clients scroll here to check the practical things: whether you work in their town, where your studio is, how to reach you, and whether you mention licensing and insurance at all. It holds four columns — the name with a one-line description and a quote button, the four services, the studio address with the towns you cover, and phone, email and office hours — and a small-print row for the copyright, the licensed-and-insured line and links such as warranty terms and careers. Replace the towns first and keep them identical to the quote page and your business listings, since a mismatch there sends people elsewhere. Many states require a contractor license number on advertising, including websites; if yours does, put the real number in the small-print line instead of the generic wording. The service names are plain text, so link them to your services page sections after import.
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 × 14
- 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, and only Request a quote, with its ochre 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 service names and the small-print items are plain text, not links; add links in the Text Editor 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>Construction company footer</title>
<style>
body{margin:0;font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif;color:#d9d5cd;background:#1c1d1f}
.foot{background:#1c1d1f;padding:72px 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 44px;border-bottom:1px solid #575b60}
.brand{margin:0 0 12px;font-family:'Archivo',Arial,sans-serif;font-size:21px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#f3f1ec}
h2{margin:0 0 14px;font-family:'Archivo',Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#c4932f}
p{margin:0 0 8px;font-size:15px;line-height:1.7;color:#d9d5cd}
.quote{display:inline-block;margin-top:12px;padding:13px 22px;background:#c4932f;color:#1c1d1f;border-radius:3px;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.small{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px}
.small p{margin:0;font-size:13px;color:#d9d5cd}
@media(max-width:780px){.foot{padding:52px 0 24px}.wrap{padding:0 16px}.cols{grid-template-columns:minmax(0,1fr);gap:30px}.small{flex-direction:column;gap:6px}}
</style>
</head>
<body>
<footer class="foot">
<div class="wrap">
<div class="cols">
<div>
<p class="brand">Corbel Design-Build</p>
<p>Design-build renovations and custom homes across Ashgrove Valley, from first drawing to final walkthrough.</p>
<a class="quote" href="/quote/">Request a quote</a>
</div>
<div>
<h2>Services</h2>
<p>Kitchens</p>
<p>Additions</p>
<p>Whole-home renovation</p>
<p>Custom homes</p>
</div>
<div>
<h2>Studio</h2>
<p>88 Millrace Lane<br>Ashgrove</p>
<p>Visits by appointment</p>
<p>Serving Fennick, Lower Brayton, Wren Hollow and Marlow Heights</p>
</div>
<div>
<h2>Contact</h2>
<p>(555) 018-4471</p>
<p>[email protected]</p>
<p>Mon–Fri · 8 am–5 pm</p>
</div>
</div>
<div class="small">
<p>© 2026 Corbel Design-Build. Licensed and insured general contractor; license details on request.</p>
<p>Privacy policy · Warranty terms · Careers</p>
</div>
</div>
</footer>
</body>
</html>
