Website kits
Construction services page
Builder services page: kitchens, additions, whole-home renovation and custom homes, each with scope, typical timeline, budget range and cost drivers.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page homeowners open to find out whether their project is realistic before they call anyone. Each of the four services gets the same block in the same order — what the work includes, how long it typically takes, a typical budget range, and the handful of things that push the cost up — so a visitor comparing a kitchen with an addition can read across like a spec sheet. Budget ranges are the part most builders leave off and the part people most want; showing them filters out mismatched enquiries and makes the quote form far more useful. A short section on how pricing works (paid design, fixed-price contract, allowances) closes the page before the quote button. Replace every range with numbers from your own last two years of jobs, and label them as typical rather than quoted. When costs move, update the ranges here first: a figure that is a year out of date sets up a difficult first meeting.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 26
- Container (grid) × 5
- Container (grid, 2 columns) × 4
- Container (grid, 3 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 29
- Heading × 11
- Button × 2
- Image × 4
- Icon List × 4
- Icon Box × 3
Things worth knowing
- Each “What drives the cost” list converts to its own Icon List widget with an arrow icon per row, provided the Icons option matches the Elementor icon library; the four lists are independent, so editing one does not change the others.
- The timeline and budget figures in each block are a small Container with two Text Editor widgets each, so you edit the label and the range separately.
- The three pricing cards (paid design, fixed price, allowances) each hold one glyph, one heading and one paragraph and convert to Icon Box widgets with bullseye, check and circle icons; swap them for more literal icons in the panel if you prefer.
- The four service photos become Image widgets with empty image slots; select your own project photos after import. Below 780px each block stacks with the photo above the text.
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>Services — Corbel Design-Build</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:80px 0}
h1,h2,h3{font-family:'Archivo',Arial,sans-serif;color:#1c1d1f;font-weight:700;letter-spacing:-.015em}
h1{font-size:56px;line-height:1.06;margin:0 0 20px}
h2{font-size:38px;line-height:1.12;margin:0 0 16px}
h3{font-size:19px;line-height:1.3;margin:0 0 12px}
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}
.intro{padding:72px 0 64px;border-bottom:1px solid #d9d5cd}
.intro .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:end}
.intro .lead{font-size:18px;color:#1c1d1f}
.white{background:#ffffff}
.block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start}
.photo{width:100%;height:520px;object-fit:cover;display:block;background:#d9d5cd}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:8px 0 28px;border-top:1px solid #1c1d1f;border-bottom:1px solid #1c1d1f}
.fact{padding:16px 16px 16px 0}
.label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#575b60;margin:0 0 4px}
.value{font-family:'Archivo',Arial,sans-serif;font-size:20px;font-weight:700;line-height:1.35;color:#1c1d1f;margin:0}
.drivers{display:flex;flex-direction:column;gap:10px}
.drivers > div{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.6;color:#1c1d1f}
.arrow{color:#c4932f;font-size:16px;line-height:1.6}
.dark{background:#1c1d1f}
.dark h2,.dark h3{color:#f3f1ec}
.dark p{color:#d9d5cd}
.dark .eyebrow{color:#f3f1ec}
.head{max-width:660px;margin:0 0 40px}
.pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{padding:30px 28px;border:1px solid #575b60}
.card-icon{display:inline-block;color:#c4932f;font-size:24px;line-height:1;margin:0 0 16px}
.card p{font-size:16px;margin:0}
.cta{text-align:center}
.cta .inner{max-width:640px;margin:0 auto}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.intro{padding:40px 0 44px}
.intro .wrap,.block,.pricing{grid-template-columns:minmax(0,1fr);gap:28px}
h1{font-size:36px}
h2{font-size:29px}
.photo{height:280px}
.value{font-size:17px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<div>
<p class="eyebrow">Services</p>
<h1>What we build, how long it takes and what it usually costs</h1>
</div>
<div>
<p class="lead">Every figure on this page is a typical range from recent projects in Ashgrove Valley, not a quote. Your number comes after a site visit and a priced design.</p>
<a class="button" href="/quote/">Request a quote</a>
</div>
</div>
</section>
<section id="kitchens">
<div class="wrap block">
<img class="photo" 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">
<div>
<p class="eyebrow">01 · Kitchens</p>
<h2>Kitchen renovations</h2>
<p>Full kitchen rebuilds: layout changes, wall removal with engineered beams, new wiring, plumbing and ventilation, cabinetry, counters, flooring and lighting. We bring the cabinet maker and stone fabricator in early and measure once, after the walls are framed.</p>
<div class="facts">
<div class="fact"><p class="label">Typical timeline</p><p class="value">6–10 weeks design, 10–16 weeks on site</p></div>
<div class="fact"><p class="label">Typical budget</p><p class="value">$65,000–$140,000</p></div>
</div>
<h3>What drives the cost</h3>
<div class="drivers">
<div><span class="arrow">→</span><span>Moving the sink, range or gas line instead of keeping the existing layout</span></div>
<div><span class="arrow">→</span><span>Taking out a bearing wall, which adds a beam, engineering and an inspection</span></div>
<div><span class="arrow">→</span><span>Custom cabinetry compared with semi-custom lines</span></div>
<div><span class="arrow">→</span><span>The appliance package and venting a range hood to the outside</span></div>
</div>
</div>
</div>
</section>
<section class="white" id="additions">
<div class="wrap block">
<img class="photo" 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">
<div>
<p class="eyebrow">02 · Additions</p>
<h2>Home additions</h2>
<p>Ground-floor additions, bump-outs and second stories, from the foundation to the final trim. We tie the new rooms into your existing roofline, heating and electrical service so the house reads as one building, inside and out.</p>
<div class="facts">
<div class="fact"><p class="label">Typical timeline</p><p class="value">3–5 months design and permits, 5–8 months build</p></div>
<div class="fact"><p class="label">Typical budget</p><p class="value">$220,000–$480,000 for 400–900 sq ft</p></div>
</div>
<h3>What drives the cost</h3>
<div class="drivers">
<div><span class="arrow">→</span><span>Foundation type, soil conditions and how much excavation the lot needs</span></div>
<div><span class="arrow">→</span><span>A second story that needs the existing walls and footings reinforced</span></div>
<div><span class="arrow">→</span><span>Matching existing siding, brick or roofing that is no longer made</span></div>
<div><span class="arrow">→</span><span>Whether the electrical service and heating system can carry the new space</span></div>
</div>
</div>
</div>
</section>
<section id="whole-home">
<div class="wrap block">
<img class="photo" 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">
<div>
<p class="eyebrow">03 · Whole-home renovation</p>
<h2>Whole-home renovations</h2>
<p>Reworking most of a house in one project: floor plan, kitchen and baths, wiring and plumbing, insulation and windows. Many clients stay at home for part of the work, so we plan the job in phases and agree them before the contract is signed.</p>
<div class="facts">
<div class="fact"><p class="label">Typical timeline</p><p class="value">3–5 months design, 6–12 months on site</p></div>
<div class="fact"><p class="label">Typical budget</p><p class="value">$250,000–$750,000</p></div>
</div>
<h3>What drives the cost</h3>
<div class="drivers">
<div><span class="arrow">→</span><span>What the walls hide in older houses: outdated wiring, undersized framing, lead or asbestos</span></div>
<div><span class="arrow">→</span><span>Living at home during the work, which adds phases and time</span></div>
<div><span class="arrow">→</span><span>Bringing insulation and windows up to the current energy code</span></div>
<div><span class="arrow">→</span><span>The number of kitchens and bathrooms being rebuilt</span></div>
</div>
</div>
</div>
</section>
<section class="white" id="custom-homes">
<div class="wrap block">
<img class="photo" 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>
<p class="eyebrow">04 · Custom homes</p>
<h2>Custom homes</h2>
<p>New houses on your lot, designed with our architect partners or built from your own architect’s drawings. We handle site work, utilities, the build itself and the coordination with your landscaper, and you get one schedule for all of it.</p>
<div class="facts">
<div class="fact"><p class="label">Typical timeline</p><p class="value">4–8 months design and permits, 12–18 months build</p></div>
<div class="fact"><p class="label">Typical budget</p><p class="value">$450–$700 per sq ft, before land</p></div>
</div>
<h3>What drives the cost</h3>
<div class="drivers">
<div><span class="arrow">→</span><span>The site: slope, rock, driveway length, and well and septic versus town services</span></div>
<div><span class="arrow">→</span><span>Structural complexity such as long spans, cantilevers and complex roofs</span></div>
<div><span class="arrow">→</span><span>The window package and the exterior cladding</span></div>
<div><span class="arrow">→</span><span>The level of interior finish, from flooring to built-in joinery</span></div>
</div>
</div>
</div>
</section>
<section class="dark">
<div class="wrap">
<div class="head">
<p class="eyebrow">How pricing works</p>
<h2>No open-ended estimates</h2>
<p>Every project moves through the same three steps, so you know what is fixed and what can still change.</p>
</div>
<div class="pricing">
<div class="card"><span class="card-icon">◎</span><h3>A paid design phase</h3><p>Design is a separate fixed-fee agreement, usually 4–6% of the construction budget. You own the drawings whether or not we build them.</p></div>
<div class="card"><span class="card-icon">✓</span><h3>One fixed price</h3><p>When the drawings are final, you get one price for the whole build. It changes only if you change the scope, through a signed change order.</p></div>
<div class="card"><span class="card-icon">●</span><h3>Clear allowances</h3><p>Items you have not chosen yet, such as tile or light fittings, are listed with a dollar allowance, so you can see where the budget can move.</p></div>
</div>
</div>
</section>
<section class="cta">
<div class="wrap">
<div class="inner">
<h2>Get a range for your project</h2>
<p>Tell us the project type, rough budget and timing. We reply within two working days and visit within two weeks.</p>
<a class="button" href="/quote/">Request a quote</a>
</div>
</div>
</section>
</body>
</html>
