Website kits
Construction company home page
Builder home page: hero with service area and quote button, three featured projects, four services, a four-step process, assurances, client quote and CTA.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The front page for a regional builder that designs and builds renovations and new houses. The hero states what you build and, just as plainly, where: homeowners filter builders by distance before anything else, so the service area sits next to the quote button rather than in the footer. A wide project photo follows, then three finished projects, because finished work is the evidence people came for. The four services and the four-step process come next and answer “what do you do” and “how does it work”, which is where design-build differs from hiring trades separately. The dark band covers licensing, insurance, permits, lien waivers and warranty, the questions a careful client asks before signing. One client quote and a closing prompt end the page. Replace the project photos first and use only your own work. Then rewrite the warranty and insurance lines to match what your contracts actually say, since clients will hold you to the wording.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 31
- Container (grid) × 2
- Container (grid, 3 columns) × 1
- Container (grid, 4 columns) × 2
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 23
- Heading × 14
- Button × 5
- Image × 2
- Image Box × 3
- Icon List × 1
- Testimonial × 1
Things worth knowing
- The three featured project cards each hold one image, one heading and one paragraph, so they convert to Image Box widgets; the scope and duration sit in the description text.
- The licensing, insurance and warranty rows become one Icon List widget with a check icon per row, provided the Icons option is set to match the Elementor icon library.
- The client quote is a figure with a blockquote and a caption, which converts to a Testimonial widget with the name and the project after the dash in separate fields.
- The hero and crew photos become Image widgets and the project cards keep empty image slots; upload your own photos to the Media Library and select them after import.
- Below 780px every multi-column row stacks to one column; the process steps keep their 01–04 numbers because those are real text, not CSS counters.
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>Corbel Design-Build — renovations and custom homes</title>
<style>
body{margin:0;font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif;color:#1c1d1f;background:#f3f1ec}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:88px 0}
h1,h2,h3{font-family:'Archivo',Arial,sans-serif;color:#1c1d1f;font-weight:700;letter-spacing:-.015em}
h1{font-size:60px;line-height:1.04;margin:0}
h2{font-size:40px;line-height:1.1;margin:0 0 16px}
h3{font-size:21px;line-height:1.3;margin:0 0 8px}
p{font-size:17px;line-height:1.7;color:#575b60;margin:0 0 16px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#1c1d1f;margin:0 0 20px;padding-left:12px;border-left:3px solid #c4932f}
.button{display:inline-block;padding:16px 28px;background:#c4932f;color:#1c1d1f;border-radius:3px;text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.ghost{display:inline-block;padding:15px 27px;border:1px solid #1c1d1f;color:#1c1d1f;border-radius:3px;text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.hero{padding:72px 0 88px}
.hero-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:end;margin:0 0 48px}
.hero .lead{font-size:18px;color:#1c1d1f}
.area{font-size:15px;margin:0 0 26px;padding:14px 0 0;border-top:1px solid #d9d5cd}
.hero-img{width:100%;height:560px;object-fit:cover;display:block;background:#d9d5cd}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin:0 0 40px}
.head .text{max-width:620px}
.head p{margin:0}
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.project img{width:100%;height:340px;object-fit:cover;display:block;margin:0 0 18px;background:#d9d5cd}
.project p{font-size:16px;margin:0}
.white{background:#ffffff}
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid #1c1d1f;margin:0 0 36px}
.service{padding:28px 24px 8px 0}
.service p{font-size:16px;margin:0}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.step{padding:28px 26px;background:#ffffff;border-top:3px solid #c4932f}
.num{font-family:'Archivo',Arial,sans-serif;font-size:34px;font-weight:700;color:#c4932f;margin:0 0 14px;line-height:1}
.step p{font-size:16px;margin:0}
.dark{background:#1c1d1f}
.dark h2{color:#f3f1ec}
.dark p{color:#d9d5cd}
.dark .eyebrow{color:#f3f1ec}
.assure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:center}
.crew-img{width:100%;height:560px;object-fit:cover;display:block;background:#575b60}
.checks{display:flex;flex-direction:column;gap:14px;margin:8px 0 0}
.checks > div{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.6;color:#f3f1ec;padding:0 0 14px;border-bottom:1px solid #575b60}
.tick{color:#c4932f;font-size:16px;line-height:1.6}
.quote{margin:0 auto;max-width:880px;text-align:center}
.quote blockquote{margin:0 0 24px;font-family:'Archivo',Arial,sans-serif;font-size:28px;line-height:1.45;font-weight:500;color:#1c1d1f;letter-spacing:-.01em}
.quote cite{font-style:normal;color:#1c1d1f}
.quote figcaption{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#575b60}
.cta{background:#d9d5cd}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:40px}
.cta .text{max-width:640px}
.cta p{color:#1c1d1f;margin:0}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.hero{padding:40px 0 56px}
.hero-top,.projects,.services,.steps,.assure{grid-template-columns:minmax(0,1fr);gap:28px}
.hero-top{margin:0 0 28px}
.head,.cta .wrap{flex-direction:column;align-items:flex-start;gap:20px}
.services{gap:0}
.service{padding:22px 0 18px;border-bottom:1px solid #d9d5cd}
h1{font-size:38px}
h2{font-size:30px}
.hero-img{height:260px}
.project img{height:250px}
.crew-img{height:340px}
.quote blockquote{font-size:21px}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<div class="hero-top">
<div>
<p class="eyebrow">Design-build · Ashgrove Valley</p>
<h1>Renovations and custom homes, designed and built by one team</h1>
</div>
<div>
<p class="lead">We plan, price and build kitchens, additions, whole-home renovations and new houses. One contract, one project lead, and a fixed price before construction starts.</p>
<p class="area">Working within 40 minutes of our Ashgrove workshop: Fennick, Lower Brayton, Wren Hollow and Marlow Heights.</p>
<div class="actions">
<a class="button" href="/quote/">Request a quote</a>
<a class="ghost" href="/projects/">See our projects</a>
</div>
</div>
</div>
<img class="hero-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/construction/custom-home-exterior.jpg" width="1600" height="900" alt="Modern two-story custom home with dark board-and-batten siding and large lit windows at dusk">
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<div class="text">
<p class="eyebrow">Recent work</p>
<h2>Three projects finished this year</h2>
<p>Each one designed, permitted and built by our own team and trade partners.</p>
</div>
<a class="ghost" href="/projects/">All projects</a>
</div>
<div class="projects">
<article class="project">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/construction/kitchen-finished.jpg" width="1600" height="1000" alt="Renovated kitchen with a long oak island, pale plaster walls and black steel pendant lights">
<h3>Fennick farmhouse kitchen</h3>
<p>Kitchen renovation · 14 weeks on site. A bearing wall came out for a nine-foot island and a walk-in pantry.</p>
</article>
<article class="project">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/construction/addition-finished.jpg" width="1200" height="1200" alt="Single-story rear addition with tall black-framed glass doors opening onto a stone terrace">
<h3>Wren Hollow garden addition</h3>
<p>Rear addition · 7 months. A 520 sq ft family room with glass doors to the yard and radiant floor heat.</p>
</article>
<article class="project">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/construction/living-renovated.jpg" width="1200" height="1200" alt="Open-plan living and dining room in a renovated ranch house with white oak floors and a flush ceiling beam">
<h3>Linden Street ranch</h3>
<p>Whole-home renovation · 9 months. A closed 1950s plan opened up, rewired, insulated and fitted with new windows.</p>
</article>
</div>
</div>
</section>
<section class="white">
<div class="wrap">
<div class="head">
<div class="text">
<p class="eyebrow">What we build</p>
<h2>Four kinds of project, one way of working</h2>
</div>
</div>
<div class="services">
<div class="service">
<h3>Kitchens</h3>
<p>Layout changes, wall removal, new systems, cabinetry and finishes, usually 10 to 16 weeks on site.</p>
</div>
<div class="service">
<h3>Additions</h3>
<p>Ground-floor and second-story additions tied into your existing roof, heating and electrical.</p>
</div>
<div class="service">
<h3>Whole-home renovation</h3>
<p>Floor plans, kitchens, baths, insulation and windows reworked at once, often in phases.</p>
</div>
<div class="service">
<h3>Custom homes</h3>
<p>New houses on your lot, from site work and utilities to the final walkthrough.</p>
</div>
</div>
<a class="button" href="/services/">Scope, timelines and budgets</a>
</div>
</section>
<section id="process">
<div class="wrap">
<div class="head">
<div class="text">
<p class="eyebrow">How design-build works</p>
<h2>From first visit to handover</h2>
<p>The same team designs and builds, so the price is checked against the drawings at every stage instead of after them.</p>
</div>
</div>
<div class="steps">
<div class="step">
<p class="num">01</p>
<h3>Site visit and brief</h3>
<p>We walk the house or lot with you, listen to how you live, and give you a realistic budget range before any design fee.</p>
</div>
<div class="step">
<p class="num">02</p>
<h3>Design and fixed price</h3>
<p>Our designer and estimator work together, so drawings and price develop side by side. You sign one fixed-price contract.</p>
</div>
<div class="step">
<p class="num">03</p>
<h3>Permits and build</h3>
<p>We file permits, book inspections and run the site. Your project lead sends a written update every Friday.</p>
</div>
<div class="step">
<p class="num">04</p>
<h3>Handover and warranty</h3>
<p>A walkthrough, a punch list closed within 30 days, a binder of finishes and manuals, and the warranty in writing.</p>
</div>
</div>
</div>
</section>
<section class="dark">
<div class="wrap assure">
<img class="crew-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/construction/crew-on-site.jpg" width="1000" height="1250" alt="Two builders in hard hats and high-visibility vests reviewing drawings beside a timber-framed wall">
<div>
<p class="eyebrow">Before you sign</p>
<h2>Licensed, insured and in writing</h2>
<p>These are the questions a careful client asks before handing over the keys. The answers are the same on every job we take.</p>
<div class="checks">
<div><span class="tick">✓</span><span>Licensed general contractor in every town we work in, with license details printed on each contract</span></div>
<div><span class="tick">✓</span><span>General liability and workers’ compensation insurance, with certificates sent to you before work starts</span></div>
<div><span class="tick">✓</span><span>Permits filed under our license, and every inspection booked and attended by us</span></div>
<div><span class="tick">✓</span><span>Lien waivers from us and our trade partners with each payment you make</span></div>
<div><span class="tick">✓</span><span>Written warranty: two years on workmanship and ten years on structural work</span></div>
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<figure class="quote">
<blockquote>“We had renovated before with three separate trades and swore never again. This time there was one person to call, the price did not move after we signed, and the Friday updates meant we always knew what next week looked like.”</blockquote>
<figcaption><cite>Helen and Marcus D.</cite> — Wren Hollow garden addition</figcaption>
</figure>
</div>
</section>
<section class="cta">
<div class="wrap">
<div class="text">
<h2>Planning a project for next year?</h2>
<p>Design and permits usually take three to six months, so the best time to talk is well before you want a crew on site.</p>
</div>
<a class="button" href="/quote/">Request a quote</a>
</div>
</section>
</body>
</html>
