Website kits
Real estate listings page
Listings page with area and price filter chips shown as text, a grid of six property cards and a section on how listings are kept current.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page most visitors to an agency site spend their time on: every available home in a grid they can scan in a few seconds. Each card answers the four questions buyers filter by — where, how much, how many bedrooms and how big — so the address is the card title and the numbers sit on one line below it. The filter chips above the grid show which areas and price bands you cover; they are text, not a working filter, so either wire them to a listings plugin or treat them as a visual index that links to category pages. The dark section below the grid explains when a home is marked under offer and how fast errors are fixed, which matters because stale listings are the most common complaint about agency sites. Replace the six homes and the chip labels first. If you have more than a dozen listings, move to a listings plugin and keep this layout as its design.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 12
- Container (grid, 3 columns) × 1
- Container (grid) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 18
- Heading × 3
- Image Box × 6
- Icon List × 1
- Button × 1
Things worth knowing
- All six property cards convert to Image Box widgets, with the address line as the title and price, beds, baths and square footage as the description. The grid is a three-column Container that becomes one column below 780px.
- The filter chips are not a form. Each chip arrives as a Text Editor widget with its border and background, so nothing filters after import; link them to category pages or replace the row with your listings plugin’s filter.
- The four accuracy points in the dark band become one Icon List with check icons, which needs the “match the Elementor icon library” icon option.
- The listing alerts link is a mailto button; point it at a sign-up page or form once you have one.
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 listings 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:72px 0}
h1,h2,h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:#1f3d2f;margin:0}
h1{font-size:52px;line-height:1.08;margin:0 0 16px}
h2{font-size:36px;line-height:1.15;margin:0 0 14px}
h3{font-size:21px;line-height:1.3;margin:0 0 6px}
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}
.intro{background:#e8dcc6;padding:64px 0 40px}
.intro .lead{max-width:680px;font-size:17.5px;color:#23261f;margin:0 0 32px}
.filters{display:flex;flex-direction:column;gap:12px}
.filter-label{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1f3d2f}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-block;padding:8px 16px;border-radius:999px;border:1px solid #1f3d2f;background:#fbf8f2;color:#1f3d2f;font-size:14px;font-weight:500}
.chip-on{display:inline-block;padding:8px 16px;border-radius:999px;border:1px solid #1f3d2f;background:#1f3d2f;color:#fbf8f2;font-size:14px;font-weight:500}
.results{padding:48px 0 72px}
.count{font-size:15px;color:#23261f;margin:0 0 24px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}
.listing{background:#fbf8f2;border:1px solid #e8dcc6;border-radius:10px;overflow:hidden}
.listing img{width:100%;height:230px;object-fit:cover;display:block}
.listing h3{padding:20px 22px 6px}
.listing p{padding:0 22px 22px;font-size:15px;color:#23261f}
.current{background:#1f3d2f}
.current .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.current h2{color:#fbf8f2}
.current p{color:#e8dcc6}
.current .eyebrow{color:#c49a55}
.checks{display:flex;flex-direction:column;gap:16px}
.checks > div{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.65;color:#fbf8f2}
.tick{color:#c49a55;font-size:17px;line-height:1.6}
.alerts{text-align:center}
.alerts .wrap{max-width:720px}
.alerts p{margin:0 0 26px}
@media(max-width:780px){
section{padding:52px 0}
.wrap{padding:0 16px}
.intro{padding:40px 0 32px}
h1{font-size:36px}
h2{font-size:28px}
.cards,.current .wrap{grid-template-columns:minmax(0,1fr)}
.current .wrap{gap:28px}
.listing img{height:210px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<p class="eyebrow">Buy and rent</p>
<h1>Homes for sale and to rent</h1>
<p class="lead">Every home below has been visited by one of our agents. Each listing has room sizes, a floor plan and the name of the agent who will show it to you.</p>
<div class="filters">
<p class="filter-label">Area</p>
<div class="chips">
<span class="chip-on">All areas</span>
<span class="chip">Brackenford</span>
<span class="chip">Millbrook</span>
<span class="chip">Ashgrove villages</span>
</div>
<p class="filter-label">Price and type</p>
<div class="chips">
<span class="chip">Under $500,000</span>
<span class="chip">$500,000 to $800,000</span>
<span class="chip">Over $800,000</span>
<span class="chip">Houses</span>
<span class="chip">Apartments</span>
<span class="chip">To rent</span>
</div>
</div>
</div>
</section>
<section class="results">
<div class="wrap">
<p class="count">6 homes · sorted by newest first</p>
<div class="cards">
<article class="listing">
<img 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">
<h3>14 Quillfeather Lane, Brackenford</h3>
<p>$725,000 · 4 beds · 2.5 baths · 2,150 sq ft</p>
</article>
<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>
<article class="listing">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/realestate/listing-farmhouse.jpg" width="1600" height="1000" alt="White clapboard farmhouse with a deep front porch and open fields behind it">
<h3>Copperkettle Farm, Wrenwick Road, Ashgrove</h3>
<p>$1,340,000 · 5 beds · 3 baths · 3,620 sq ft</p>
</article>
<article class="listing">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/realestate/listing-apartment.jpg" width="1600" height="1000" alt="Bright apartment living room with tall windows, oak floors and a sand-colored sofa">
<h3>Apt 4B, 61 Hollowmere Street, Brackenford</h3>
<p>$2,150 a month · 2 beds · 1 bath · 940 sq ft</p>
</article>
</div>
</div>
</section>
<section class="current">
<div class="wrap">
<div>
<p class="eyebrow">How this page stays accurate</p>
<h2>If it is listed here, you can view it</h2>
<p>A home is marked under offer the day an offer is accepted and removed the day it closes or the owner withdraws. Prices change only after the owner confirms in writing.</p>
</div>
<div class="checks">
<div><span class="tick">✓</span><span>Listings checked against our own records every weekday morning</span></div>
<div><span class="tick">✓</span><span>Under-offer homes stay visible for 14 days, clearly labeled</span></div>
<div><span class="tick">✓</span><span>Rental availability dates confirmed with the landlord each week</span></div>
<div><span class="tick">✓</span><span>Spot an error? Tell the listing agent and it is fixed the same day</span></div>
</div>
</div>
</section>
<section class="alerts">
<div class="wrap">
<h2>Not seeing the right home yet?</h2>
<p>Tell us your area, budget and the number of bedrooms you need. We email you before new listings appear on this page, usually a day or two ahead.</p>
<a class="btn" href="mailto:[email protected]">Register for listing alerts</a>
</div>
</section>
</body>
</html>
