Full pages
Product detail page
Hero, advantages grid, a detail split, a specification table and a closing quote request.
When to use it
Built for the case that comes up constantly in B2B work: a product with real specifications that a buyer will actually compare. The specification table stays a table, which is correct — Elementor has no table widget, and splitting rows into text would destroy both the meaning and the alignment. Everything around it converts to native widgets, so you edit the selling points in the panel and the table in its own markup.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 5 — one per section
- Container (grid) × 2 — the hero split and the advantages grid
- Heading × 8
- Text Editor × 6
- HTML widget × 1 — the specification table
- Button × 2
Things worth knowing
- The specification table is kept whole as an HTML widget. That is the intended result, not a conversion failure.
- Both image areas are placeholder Containers. Upload real photos to the Media Library and swap in Image widgets — a local file path cannot become an attachment.
- The table scrolls inside its own wrapper on narrow screens so the page body never scrolls sideways.
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>Product detail page</title>
<style>
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#14233a;background:#fff}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:66px 0}
.hero{background:#f6f8fb}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
h1{font-size:46px;line-height:1.1;letter-spacing:-.035em;margin:0 0 16px}
h2{font-size:32px;letter-spacing:-.03em;margin:0 0 16px}
h3{font-size:18px;margin:0 0 8px}
p{color:#5b6b82;line-height:1.8}
.button{display:inline-block;margin-top:12px;padding:14px 24px;background:#ff5b35;color:#fff;border-radius:9px;text-decoration:none;font-weight:800}
.image{min-height:300px;border-radius:16px;background:linear-gradient(135deg,#dde5ef,#8496ab);display:grid;place-items:center;color:#fff;text-align:center;padding:22px;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{padding:24px;border:1px solid #e3e9f1;border-radius:13px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{padding:13px 15px;border:1px solid #e0e7f0;text-align:left;font-size:14.5px}
th{background:#f7fafc;color:#33475f}
.cta{background:#14233a;color:#fff;text-align:center}
.cta p{color:#b9c7d8}
@media(max-width:780px){.hero .wrap,.split,.grid{grid-template-columns:1fr}h1{font-size:33px}h2{font-size:26px}}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<div>
<h1>Product name that says what it is</h1>
<p>One sentence on who it is for and the problem it removes. Save the specifications for the table further down.</p>
<a class="button" href="#quote">Request a quote</a>
</div>
<div class="image">Main product image — replace with an Image widget</div>
</div>
</section>
<section>
<div class="wrap">
<h2>Why buyers choose it</h2>
<div class="grid">
<article class="card"><h3>Consistent batches</h3><p>Material and process control that hold from sample to bulk order.</p></article>
<article class="card"><h3>Custom options</h3><p>Size, colour, finish and packaging adjusted for your market.</p></article>
<article class="card"><h3>Predictable lead time</h3><p>Production planning that supports both samples and repeat orders.</p></article>
</div>
</div>
</section>
<section>
<div class="wrap split">
<div class="image">Detail photo — replace with an Image widget</div>
<div>
<h2>Built for the way it is actually used</h2>
<p>Describe the real working conditions here — surfaces, frequency, environment. Buyers comparing two suppliers read this paragraph more carefully than the hero.</p>
</div>
</div>
</section>
<section>
<div class="wrap">
<h2>Specifications</h2>
<div class="scroll">
<table>
<tr><th>Item</th><th>Specification</th></tr>
<tr><td>Material</td><td>State the material, or custom on request</td></tr>
<tr><td>Size</td><td>Standard sizes, custom available</td></tr>
<tr><td>Colour</td><td>Stock colours, custom available</td></tr>
<tr><td>Packaging</td><td>Bulk or retail pack</td></tr>
<tr><td>MOQ</td><td>State the minimum order quantity</td></tr>
</table>
</div>
</div>
</section>
<section class="cta" id="quote">
<div class="wrap">
<h2>Ready to start a custom order?</h2>
<p>Send your size, quantity and packaging requirement and you will get a written quote back.</p>
<a class="button" href="#contact">Get a quote</a>
</div>
</section>
</body>
</html>