Website kits
Real estate agency home page
Agency home page: photo hero with a Browse listings button, featured listing cards, selling steps, neighborhood guides, an agent quote and a valuation CTA.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
A home page for a local agency that lists both sales and rentals. The hero says who you are and where you work, and the shaded box under it reads like a search summary — areas, price range, what every listing includes — without pretending to be a working search form; the Browse listings button does the real job. Featured listings come next because buyers are the larger audience. The selling steps follow for owners, written week by week so a seller can picture the next two months. Neighborhood guides earn return visits from people who are still deciding where to live, and the agent quote puts a real voice to the agency before the valuation call to action at the bottom. Replace the three featured homes and the hero photo first. One practical tip: use a hero photo of a home on a street you actually cover; a stock mansion tells local sellers you are not their agent.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 24
- Container (grid) × 1
- Container (grid, 3 columns) × 2
- Container (grid, 4 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 18
- Heading × 9
- Icon List × 1
- Button × 6
- Image × 1
- Image Box × 3
- Icon Box × 3
- Testimonial × 1
Things worth knowing
- The three featured homes convert to Image Box widgets: the photo, the address as the title and the price, beds, baths and square footage as the description. Keep each card to those three parts — an extra line or a button inside the card turns it back into separate widgets.
- The three neighborhood cards become Icon Box widgets with a bullseye icon, and the three lines in the hero box become one Icon List. Both require the “match the Elementor icon library” icon option, which the template library uses by default.
- The agent quote becomes a native Testimonial widget, with the name and role taken from the caption under the quote.
- The selling steps carry their week labels as real text above each heading, so nothing depends on CSS counters. All grids collapse to one column below 780px.
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>Fernhollow Estates home page</title>
<style>
img{background:#e8dcc6}
body{margin:0;font-family:'DM Sans',Arial,Helvetica,sans-serif;color:#23261f;background:#fbf8f2}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
h1,h2,h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:#1f3d2f;margin:0}
h1{font-size:56px;line-height:1.05;margin:0 0 20px}
h2{font-size:40px;line-height:1.12;margin:0 0 14px}
h3{font-size:22px;line-height:1.25;margin:0 0 8px}
p{margin:0;font-size:16px;line-height:1.75;color:#5f6156}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#1f3d2f;margin:0 0 14px}
.btn{display:inline-block;padding:15px 26px;border-radius:6px;background:#1f3d2f;color:#fbf8f2;text-decoration:none;font-weight:600;font-size:15px}
.btn-line{display:inline-block;padding:14px 25px;border-radius:6px;border:1px solid #1f3d2f;color:#1f3d2f;text-decoration:none;font-weight:600;font-size:15px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.hero{padding:56px 0 80px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.lead{font-size:18px;color:#23261f;margin:0 0 28px}
.finder{background:#e8dcc6;border-radius:10px;padding:24px 26px;margin:0 0 28px}
.finder-label{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1f3d2f;margin:0 0 12px}
.finder-rows{display:flex;flex-direction:column;gap:10px}
.finder-rows > div{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;line-height:1.6;color:#23261f}
.dot{color:#1f3d2f;font-size:10px;line-height:2.5}
.hero-photo{width:100%;height:540px;object-fit:cover;border-radius:12px;display:block}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:0 0 36px}
.head p{max-width:560px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.listing{background:#fbf8f2;border:1px solid #e8dcc6;border-radius:10px;overflow:hidden}
.listing img{width:100%;height:240px;object-fit:cover;display:block}
.listing h3{font-size:21px;padding:20px 22px 6px}
.listing p{padding:0 22px 22px;font-size:15px;color:#23261f}
.sand{background:#e8dcc6}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.step{background:#fbf8f2;border-radius:10px;padding:28px 24px}
.when{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1f3d2f;margin:0 0 14px;padding:0 0 12px;border-bottom:2px solid #c49a55}
.guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 0 32px}
.guide{border-top:2px solid #1f3d2f;padding:24px 0 0}
.icon{display:block;font-size:22px;color:#1f3d2f;margin:0 0 14px}
.quote-band{background:#1f3d2f}
.quote{max-width:820px;margin:0 auto;padding:0;text-align:center}
.quote blockquote{margin:0 0 26px;font-family:'DM Serif Display',Georgia,serif;font-size:32px;line-height:1.35;color:#fbf8f2}
.quote figcaption{font-size:15px;color:#e8dcc6;line-height:1.6}
.quote strong{display:block;color:#c49a55;font-size:16px;letter-spacing:.04em}
.cta{text-align:center}
.cta .wrap{max-width:760px}
.cta p{margin:0 0 28px;font-size:17px}
.cta .actions{justify-content:center}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.hero{padding:32px 0 56px}
.hero .wrap,.cards,.steps,.guides{grid-template-columns:minmax(0,1fr)}
.hero .wrap{gap:32px}
h1{font-size:38px}
h2{font-size:30px}
.lead{font-size:16.5px}
.hero-photo{height:280px}
.head{flex-direction:column;align-items:flex-start;gap:18px}
.quote blockquote{font-size:24px}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<div>
<p class="eyebrow">Fernhollow Estates</p>
<h1>Homes in Brackenford, sold and let by people who live here</h1>
<p class="lead">An independent agency of six agents covering Brackenford, Millbrook and the Ashgrove villages. Every home we list has been visited, measured and photographed by us.</p>
<div class="finder">
<p class="finder-label">What you will find in our listings</p>
<div class="finder-rows">
<div><span class="dot">●</span><span>Houses, townhouses and apartments for sale and to rent</span></div>
<div><span class="dot">●</span><span>Asking prices from about $320,000 to $1.4 million</span></div>
<div><span class="dot">●</span><span>Floor plans and room sizes on every property page</span></div>
</div>
</div>
<div class="actions">
<a class="btn" href="#listings">Browse listings</a>
<a class="btn-line" href="#valuation">Book a valuation</a>
</div>
</div>
<img class="hero-photo" src="https://htmltoelementor.com/wp-content/uploads/hte-library/realestate/home-exterior.jpg" width="1600" height="1000" alt="Two-story red brick house with a dark green front door and a planted front garden in late afternoon light">
</div>
</section>
<section id="listings">
<div class="wrap">
<div class="head">
<div>
<p class="eyebrow">Featured listings</p>
<h2>New to the market this month</h2>
</div>
<a class="btn-line" href="#all-listings">See all listings</a>
</div>
<div class="cards">
<article class="listing">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/realestate/listing-townhouse.jpg" width="1600" height="1000" alt="Three-story cream stucco townhouse with black iron railings and a glossy black front door">
<h3>22 Thimbleberry Row, Brackenford</h3>
<p>$585,000 · 3 beds · 2 baths · 1,640 sq ft</p>
</article>
<article class="listing">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/realestate/listing-cottage.jpg" width="1600" height="1000" alt="Stone cottage with a slate roof, climbing roses around the door and a gravel path">
<h3>3 Mossgate Terrace, Ashgrove</h3>
<p>$462,000 · 2 beds · 1 bath · 1,080 sq ft</p>
</article>
<article class="listing">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/realestate/listing-modern.jpg" width="1600" height="1000" alt="Single-story modern house with vertical timber cladding and floor-to-ceiling windows facing a lawn">
<h3>9 Lanternfly Court, Millbrook</h3>
<p>$910,000 · 4 beds · 3 baths · 2,480 sq ft</p>
</article>
</div>
</div>
</section>
<section class="sand" id="sell">
<div class="wrap">
<div class="head">
<div>
<p class="eyebrow">Selling with us</p>
<h2>From first visit to keys handed over</h2>
</div>
<p>Most homes we list go under offer within six to eight weeks. This is how the time is spent, and who does what.</p>
</div>
<div class="steps">
<div class="step">
<p class="when">Week 1</p>
<h3>Valuation visit</h3>
<p>An agent walks the home with you, looks at recent sales on your street and gives a written price range.</p>
</div>
<div class="step">
<p class="when">Week 2</p>
<h3>Photos and floor plan</h3>
<p>We photograph every room in daylight and draw a measured floor plan. You approve both before anything goes live.</p>
</div>
<div class="step">
<p class="when">Weeks 3–6</p>
<h3>Viewings and offers</h3>
<p>Accompanied viewings, written feedback after each one, and every offer passed to you the same day.</p>
</div>
<div class="step">
<p class="when">To closing</p>
<h3>Sale through to keys</h3>
<p>We keep inspections, appraisals and both attorneys on schedule and tell you the moment anything slips.</p>
</div>
</div>
</div>
</section>
<section id="guides">
<div class="wrap">
<div class="head">
<div>
<p class="eyebrow">Neighborhood guides</p>
<h2>Know the street before you book a viewing</h2>
</div>
<p>Short guides written by the agents who cover each area: schools, commute times, parks and what homes typically sell for.</p>
</div>
<div class="guides">
<div class="guide">
<span class="icon">◎</span>
<h3>Brackenford</h3>
<p>The market town: a commuter station, a weekly farmers market and Victorian terraces within walking distance of both.</p>
</div>
<div class="guide">
<span class="icon">◎</span>
<h3>Millbrook</h3>
<p>Newer family homes on larger lots, two elementary schools and the riverside trail that runs into town.</p>
</div>
<div class="guide">
<span class="icon">◎</span>
<h3>Ashgrove villages</h3>
<p>Stone cottages and farmhouses, a village store in each, and a 20-minute drive to Brackenford Station.</p>
</div>
</div>
<a class="btn-line" href="#guides-all">Read the neighborhood guides</a>
</div>
</section>
<section class="quote-band">
<div class="wrap">
<figure class="quote">
<blockquote>“I would rather tell you a realistic price at the kitchen table than an exciting one that leaves your home on the market all summer.”</blockquote>
<figcaption><strong>Maya Ellison</strong> Senior sales agent, Fernhollow Estates</figcaption>
</figure>
</div>
</section>
<section class="cta" id="valuation">
<div class="wrap">
<p class="eyebrow">Free, no obligation</p>
<h2>What is your home worth today?</h2>
<p>Book a 45-minute valuation visit. You get a written price range, the recent sales it is based on, and our fee in writing.</p>
<div class="actions">
<a class="btn" href="#contact">Book a valuation</a>
<a class="btn-line" href="tel:+15550142290">Call (555) 014-2290</a>
</div>
</div>
</section>
</body>
</html>
