Website kits
Property detail page
Single property page: photo grid, key facts list, description, floor plan, nearby amenities, listing agent card and a viewing request form.
When to use it
One listing, laid out the way a serious buyer reads it. The address and price sit at the top with the viewing button, because a buyer who has clicked through from the grid already knows they are interested. Three photos follow, then the key facts as a scannable list — bedrooms, bathrooms, size, year built, lot, parking, tax and heating — before any prose. The description covers what the facts cannot: condition, layout and light. The floor plan has its own section with room totals, since buyers compare plans more carefully than photos, and the location list gives walking times rather than adjectives. In the side column the listing agent is named with a direct phone number, and the viewing form asks for a preferred date and time so the first reply can confirm a slot. Replace the photos, facts and floor plan first. Tip: state the property tax figure; buyers will ask for it anyway.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 16
- Container (grid) × 2
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 11
- Heading × 7
- Button × 4
- Image × 4
- Icon List × 2
- Form × 1
Things worth knowing
- The viewing request is a <form> and converts to an Elementor Pro Form with name, email, phone, date, a time select and a notes field. It needs Elementor Pro, and the submit action (email, CRM or webhook) must be set after import.
- The key facts and the location list each become one Icon List widget. The facts are laid out in two columns in the source; an Icon List stacks its rows, so expect a single column unless you split it into two widgets.
- The three photos and the floor plan arrive as four separate Image widgets, not an Image Gallery, so the large-plus-two-small layout of the photo grid is kept as Containers.
- The agent’s Call and Email links become Button widgets. On screens below 780px the side column moves below the description, so the agent card and form follow the amenities.
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>14 Quillfeather Lane property 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}
h1,h2,h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:#1f3d2f;margin:0}
h1{font-size:48px;line-height:1.1;margin:0 0 10px}
h2{font-size:30px;line-height:1.2;margin:0 0 16px}
h3{font-size:24px;line-height:1.25;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 12px}
.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}
.top{padding:48px 0 28px}
.top .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.price{font-family:'DM Serif Display',Georgia,serif;font-size:34px;line-height:1.2;color:#1f3d2f;margin:0}
.area{font-size:16px;color:#5f6156}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.photos{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:240px 240px;gap:12px}
.photos > div:first-child{grid-row:1 / span 2}
.photos img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
.body{padding:56px 0 80px}
.body .wrap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:56px;align-items:start}
.block{padding:0 0 44px;margin:0 0 44px;border-bottom:1px solid #e8dcc6}
.facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 28px}
.facts > div{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.6;color:#23261f}
.dot{color:#c49a55;font-size:10px;line-height:2.6}
.copy p{margin:0 0 16px;color:#23261f}
.plan{width:100%;height:auto;aspect-ratio:1 / 1;max-width:560px;object-fit:cover;border:1px solid #e8dcc6;border-radius:10px;display:block;margin:0 0 16px;background:#e8dcc6}
.plan-sizes{font-size:15px;color:#23261f;margin:0 0 16px}
.near{display:flex;flex-direction:column;gap:12px}
.near > div{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.6;color:#23261f}
.arrow{color:#1f3d2f;font-size:16px;line-height:1.6}
.side{display:flex;flex-direction:column;gap:24px}
.agent{background:#1f3d2f;border-radius:12px;padding:30px 28px}
.agent .eyebrow{color:#c49a55}
.agent h3{color:#fbf8f2}
.agent p{color:#e8dcc6;margin:0 0 20px;font-size:15px}
.agent .call{display:block;text-align:center;padding:14px 20px;border-radius:6px;background:#c49a55;color:#23261f;text-decoration:none;font-weight:700;font-size:15px;margin:0 0 10px}
.agent .mail{display:block;text-align:center;padding:13px 20px;border-radius:6px;border:1px solid #e8dcc6;color:#fbf8f2;text-decoration:none;font-weight:600;font-size:15px}
.viewing{background:#e8dcc6;border-radius:12px;padding:30px 28px;display:flex;flex-direction:column;gap:14px}
.viewing h3{margin:0}
.viewing p{font-size:14.5px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;font-weight:600;color:#23261f}
.field input,.field select,.field textarea{font:inherit;font-size:15px;padding:12px 14px;border:1px solid #5f6156;border-radius:6px;background:#fbf8f2;color:#23261f}
.field textarea{min-height:96px;resize:vertical}
.viewing button{font:inherit;font-weight:700;font-size:15px;padding:15px 20px;border:0;border-radius:6px;background:#1f3d2f;color:#fbf8f2;cursor:pointer}
@media(max-width:780px){
.wrap{padding:0 16px}
.top{padding:32px 0 20px}
.top .wrap{flex-direction:column;align-items:flex-start;gap:20px}
h1{font-size:34px}
h2{font-size:26px}
.price{font-size:28px}
.photos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:220px 140px}
.photos > div:first-child{grid-row:auto;grid-column:1 / span 2}
.body{padding:40px 0 56px}
.body .wrap,.facts{grid-template-columns:minmax(0,1fr)}
.body .wrap{gap:40px}
.block{padding:0 0 32px;margin:0 0 32px}
}
</style>
</head>
<body>
<section class="top">
<div class="wrap">
<div>
<p class="eyebrow">For sale · Brackenford</p>
<h1>14 Quillfeather Lane</h1>
<p class="area">Four-bedroom brick house, eight minutes’ walk from Brackenford Station</p>
</div>
<div>
<p class="price">$725,000</p>
<div class="actions">
<a class="btn" href="#viewing">Request a viewing</a>
<a class="btn-line" href="#floor-plan">See the floor plan</a>
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="photos">
<div><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"></div>
<div><img src="https://htmltoelementor.com/wp-content/uploads/hte-library/realestate/interior-living.jpg" width="1600" height="1000" alt="Living room with a painted brick fireplace, oak floors and a sand-colored linen sofa"></div>
<div><img src="https://htmltoelementor.com/wp-content/uploads/hte-library/realestate/interior-kitchen.jpg" width="1600" height="1000" alt="Kitchen with forest green cabinets, brass handles and a pale stone countertop"></div>
</div>
</div>
</section>
<section class="body">
<div class="wrap">
<div>
<div class="block">
<h2>Key facts</h2>
<div class="facts">
<div><span class="dot">●</span><span><strong>4 bedrooms</strong> including a primary suite</span></div>
<div><span class="dot">●</span><span><strong>2.5 bathrooms</strong> one on each floor</span></div>
<div><span class="dot">●</span><span><strong>2,150 sq ft</strong> plus a 310 sq ft basement</span></div>
<div><span class="dot">●</span><span><strong>Built 1928</strong> rewired and replumbed in 2019</span></div>
<div><span class="dot">●</span><span><strong>0.18 acre lot</strong> with a south-facing yard</span></div>
<div><span class="dot">●</span><span><strong>Detached garage</strong> and driveway for two cars</span></div>
<div><span class="dot">●</span><span><strong>Property tax</strong> about $8,900 a year</span></div>
<div><span class="dot">●</span><span><strong>Heating</strong> gas boiler with radiators, 2021</span></div>
</div>
</div>
<div class="block copy">
<h2>About this home</h2>
<p>14 Quillfeather Lane has been in one family for 31 years, and it shows in the right ways: original oak floors, the 1928 fireplace and deep window sills have all been kept, while the wiring, plumbing and roof were replaced between 2019 and 2022.</p>
<p>The ground floor runs from a front sitting room with the fireplace through to a kitchen and dining room across the back of the house, with French doors onto the yard. Upstairs are four bedrooms; the primary bedroom has its own bathroom and a built-in closet along one wall.</p>
<p>The yard faces south and gets sun from late morning until evening. The detached garage has power and has been used as a workshop.</p>
</div>
<div class="block" id="floor-plan">
<h2>Floor plan</h2>
<p class="plan-sizes">First floor 1,120 sq ft · Second floor 1,030 sq ft · Basement 310 sq ft</p>
<img class="plan" src="https://htmltoelementor.com/wp-content/uploads/hte-library/realestate/floor-plan.jpg" width="1200" height="1200" alt="Floor plan line drawing of a two-story house showing the room layout on both floors">
<p>Measured by Fernhollow Estates in September 2026. Room sizes are within two inches; the plan is a guide and not to scale.</p>
</div>
<div>
<h2>Location and amenities</h2>
<div class="near">
<div><span class="arrow">→</span><span>Brackenford Station, 8 minutes on foot, 52 minutes to the city</span></div>
<div><span class="arrow">→</span><span>Larkspur Hill Elementary School, 6 minutes on foot</span></div>
<div><span class="arrow">→</span><span>Saturday farmers market on Market Square, 10 minutes on foot</span></div>
<div><span class="arrow">→</span><span>Riverside trail and Fennimore Park at the end of the lane</span></div>
</div>
</div>
</div>
<aside class="side">
<div class="agent">
<p class="eyebrow">Listing agent</p>
<h3>Maya Ellison</h3>
<p>Maya has sold homes in Brackenford for eleven years and has shown this house to every buyer so far. She can tell you what neighboring houses sold for.</p>
<a class="call" href="tel:+15550142290">Call (555) 014-2290</a>
<a class="mail" href="mailto:[email protected]">Email Maya</a>
</div>
<form class="viewing" id="viewing" action="#" method="post">
<h3>Request a viewing</h3>
<p>Viewings run Monday to Saturday. We confirm a time by phone or email within one working day.</p>
<div class="field">
<label for="v-name">Full name</label>
<input id="v-name" name="name" type="text" autocomplete="name" required>
</div>
<div class="field">
<label for="v-email">Email</label>
<input id="v-email" name="email" type="email" autocomplete="email" required>
</div>
<div class="field">
<label for="v-phone">Phone</label>
<input id="v-phone" name="phone" type="tel" autocomplete="tel">
</div>
<div class="field">
<label for="v-date">Preferred date</label>
<input id="v-date" name="preferred_date" type="date">
</div>
<div class="field">
<label for="v-time">Preferred time</label>
<select id="v-time" name="preferred_time">
<option>Morning, 9 am to 12 pm</option>
<option>Afternoon, 12 pm to 4 pm</option>
<option>Evening, 4 pm to 7 pm</option>
</select>
</div>
<div class="field">
<label for="v-notes">Anything we should know?</label>
<textarea id="v-notes" name="notes" placeholder="For example: we have a house to sell first"></textarea>
</div>
<button type="submit">Request a viewing</button>
</form>
</aside>
</div>
</section>
</body>
</html>