Website kits
Construction projects page
Builder portfolio page: four project cards, then one full write-up with brief, constraints, solution, timeline, before and after, and a client quote.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The portfolio page, where prospective clients decide whether your work looks like the house they want. It opens with a grid of four finished projects, each labeled with type, town and duration, because people look for something close to their own job before they read a word. Below the grid, one project is written up in full: the brief, the constraints, the solution, a month-by-month timeline, and before and after described in plain words. That write-up does what photos cannot, showing how you think when a bearing wall, old wiring or a family living on site gets in the way. A client quote from the same project and a short prompt close the page. Swap in your own projects first, picking work from the towns you most want to grow in. For the write-up, choose a job with a real constraint you solved, not your most expensive one, and get the client’s permission before you use their street name or quote.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 14
- Container (grid, 2 columns) × 2
- Container (grid) × 2
- Container (grid, 3 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 9
- Heading × 7
- Image Box × 6
- Icon List × 2
- Testimonial × 1
- Button × 1
Things worth knowing
- The four portfolio cards and the two before-and-after cards each hold one image, one heading and one paragraph, so all six convert to Image Box widgets with empty image slots to fill from the Media Library.
- The project facts and the month-by-month timeline are two separate Icon List widgets (circle and open-circle icons) when the Icons option matches the Elementor icon library.
- The brief, constraints and solution columns are plain Containers with a Heading and a Text Editor each, so they can be lengthened without breaking any widget.
- The client quote converts to a Testimonial widget. Below 780px the portfolio grid and the three write-up columns stack to one column.
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>Projects — 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: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}
.intro{padding:72px 0 48px}
.intro .lead{max-width:680px;font-size:18px}
.grid-sec{padding-top:0}
.portfolio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}
.work img{width:100%;height:440px;object-fit:cover;display:block;margin:0 0 20px;background:#d9d5cd}
.work p{font-size:15px;letter-spacing:.04em;margin:0}
.white{background:#ffffff}
.case-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:start;margin:0 0 56px}
.facts{display:flex;flex-direction:column;gap:0;border-top:1px solid #1c1d1f}
.facts > div{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.6;color:#1c1d1f;padding:12px 0;border-bottom:1px solid #d9d5cd}
.dot{color:#c4932f;font-size:11px;line-height:2.2}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:0 0 64px}
.three p{font-size:16px;margin:0}
.phase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:56px;margin:0 0 64px}
.timeline{display:flex;flex-direction:column;gap:0}
.timeline > div{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.6;color:#1c1d1f;padding:14px 0;border-bottom:1px solid #d9d5cd}
.ring{color:#c4932f;font-size:13px;line-height:2}
.ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.ba-card img{width:100%;height:400px;object-fit:cover;display:block;margin:0 0 18px;background:#d9d5cd}
.ba-card p{font-size:16px;margin:0}
.quote{margin:0 auto;max-width:860px;text-align:center}
.quote blockquote{margin:0 0 24px;font-family:'Archivo',Arial,sans-serif;font-size:26px;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}
.dark{background:#1c1d1f}
.dark .wrap{display:flex;justify-content:space-between;align-items:center;gap:40px}
.dark h2{color:#f3f1ec}
.dark p{color:#d9d5cd;margin:0}
.dark .text{max-width:640px}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.intro{padding:40px 0 32px}
.grid-sec{padding-top:0}
.portfolio,.case-head,.three,.phase,.ba{grid-template-columns:minmax(0,1fr);gap:28px}
.case-head,.three,.phase{margin:0 0 44px}
.dark .wrap{flex-direction:column;align-items:flex-start;gap:20px}
h1{font-size:38px}
h2{font-size:29px}
.work img{height:260px}
.ba-card img{height:260px}
.quote blockquote{font-size:20px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<p class="eyebrow">Projects</p>
<h1>Recent work in Ashgrove Valley</h1>
<p class="lead">A selection of kitchens, additions, renovations and new houses from the last two years, all designed and built by our team. Ask us for references from any of them.</p>
</div>
</section>
<section class="grid-sec">
<div class="wrap portfolio">
<article class="work">
<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 · Fennick · 14 weeks on site · 2025</p>
</article>
<article class="work">
<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 · Wren Hollow · 7 months · 2025</p>
</article>
<article class="work">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/construction/bath-finished.jpg" width="1200" height="1200" alt="Renovated primary bathroom with a freestanding tub, limestone-look tile and a walk-in shower behind clear glass">
<h3>Marlow Heights primary suite</h3>
<p>Primary bath and closet · Marlow Heights · 11 weeks · 2024</p>
</article>
<article class="work">
<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">
<h3>Ridgeback Lane house</h3>
<p>Custom home · Lower Brayton · 16 months · 2024</p>
</article>
</div>
</section>
<section class="white" id="linden-street">
<div class="wrap">
<div class="case-head">
<div>
<p class="eyebrow">Project write-up</p>
<h2>Linden Street ranch: a closed 1950s plan, opened up and made warm</h2>
<p>A single-story ranch with small rooms, one bathroom for four people and almost no insulation, renovated while the family lived in it for most of the job.</p>
</div>
<div class="facts">
<div><span class="dot">●</span><span>Location · Ashgrove</span></div>
<div><span class="dot">●</span><span>Scope · Whole-home renovation, 1,850 sq ft</span></div>
<div><span class="dot">●</span><span>Timeline · 4 months design and permits, 9 months on site</span></div>
<div><span class="dot">●</span><span>Budget band · $350,000–$400,000</span></div>
</div>
</div>
<div class="three">
<div>
<h3>The brief</h3>
<p>A couple with two teenagers wanted the kitchen, dining and living rooms as one space, a second full bathroom, and a house that was not cold in January. They plan to stay for twenty years and wanted to do the work once.</p>
</div>
<div>
<h3>The constraints</h3>
<p>A bearing wall ran the length of the house, the original wiring was ungrounded, and the attic had less than three inches of insulation. The family needed to stay at home for the first half of the job, and the budget had a firm ceiling.</p>
</div>
<div>
<h3>The solution</h3>
<p>We replaced the bearing wall with a flush engineered beam so the ceiling stays flat, rewired and replumbed while the walls were open, added dense-pack insulation and new windows, and split the work into two phases: bedrooms first, living areas second.</p>
</div>
</div>
<div class="phase">
<div>
<h3>Timeline</h3>
<p>Thirteen months from the first design meeting to handover, with six weeks when the family stayed elsewhere.</p>
</div>
<div class="timeline">
<div><span class="ring">○</span><span>Months 1–4 · Design, structural engineering and permit approval</span></div>
<div><span class="ring">○</span><span>Months 5–6 · Phase one: bedrooms, the second bathroom and a new electrical service</span></div>
<div><span class="ring">○</span><span>Months 7–10 · Phase two: beam, kitchen, living and dining, with the family moved out for six weeks</span></div>
<div><span class="ring">○</span><span>Months 11–13 · Insulation, windows, trim, paint and final inspection</span></div>
<div><span class="ring">○</span><span>End of month 13 · Handover walkthrough, with the punch list closed 30 days later</span></div>
</div>
</div>
<div class="ba">
<article class="ba-card">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/construction/framing-progress.jpg" width="1600" height="1000" alt="Interior of a house under renovation with exposed timber framing, a new engineered beam on temporary posts and a cleared subfloor">
<h3>Before and during</h3>
<p>Before: a dark central hallway, a galley kitchen shut off from a dining room nobody used, and one bathroom. In month 7 the bearing wall came out, the new beam went in on temporary posts, and the open plan was visible for the first time.</p>
</article>
<article class="ba-card">
<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>After</h3>
<p>One long room from the front windows to the back deck, the kitchen island where the wall used to be, a second bathroom made from the old hall closet and linen cupboard, and a house that now holds its heat overnight.</p>
</article>
</div>
</div>
</section>
<section>
<div class="wrap">
<figure class="quote">
<blockquote>“We were worried about living through it with two kids. The phasing plan was agreed before we signed, the dust walls went up the day they said, and we only moved out for the six weeks they had told us about at the first meeting.”</blockquote>
<figcaption><cite>Ana and Joel P.</cite> — Linden Street ranch</figcaption>
</figure>
</div>
</section>
<section class="dark">
<div class="wrap">
<div class="text">
<h2>Living in a house like this one?</h2>
<p>Tell us what is not working about it. We will tell you what it could become and roughly what that costs.</p>
</div>
<a class="button" href="/quote/">Request a quote</a>
</div>
</section>
</body>
</html>
