Product launch landing page
Single-product sales page: hero with price and Buy button, benefits, feature close-ups, specs table, box contents, star reviews, comparison, guarantee, FAQ.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page your ads, launch emails and pre-order links point to, for a brand selling one physical product. It is ordered as a sales conversation. The hero puts the photo, the price and the Buy button together, with shipping and returns right under the button, because the cost of trying is the first doubt. Four benefits say what it does in a sentence each; the close-ups then prove the claims with photos of the parts people ask about. Specs and the box contents answer the practical questions, the reviews and the comparison with typical alternatives handle “why this one”, and the dark guarantee band and FAQ remove the last objections before the final Buy button. Replace the hero photo and price first, then every spec number with figures you have measured yourself. Use only reviews from real buyers, with their permission. For ad traffic, keep the price and Buy button visible on the first phone screen — here they sit above the photo once the columns stack.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 43
- Container (grid) × 7
- Container (grid, 4 columns) × 1
- Container (grid, 3 columns) × 3
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 35
- Button × 4
- Heading × 15
- Icon List × 5
- Image × 5
- Icon Box × 7
- Star Rating × 3
- Accordion × 1
Things worth knowing
- The four benefit cards and the three guarantee cards convert to Icon Box widgets, and the shipping line under the hero buttons, the in-the-box list and the three comparison columns become five Icon List widgets with check and cross icons, using the library’s match-the-Elementor-icon-library setting.
- The specifications are a real HTML table. It does not become an HTML widget: it converts to one Text Editor widget holding the table inside a horizontally scrollable wrapper, so you edit the rows in the editor’s text view.
- Each review’s star row converts to a Star Rating widget (5, 5 and 4 out of 5, the empty star outlined), and the quote and the name become Text Editor widgets. They are not Testimonial widgets, because Elementor’s Testimonial has no rating field.
- The six questions become one Accordion widget. The three Buy buttons point at the placeholder /checkout/ and must be changed to your real checkout link; See the details keeps its jump to the benefits section through a converted anchor ID.
- The five photos arrive as Image widgets with empty slots to fill from the Media Library. Below 780px every row stacks in source order, so the middle feature row shows its text before its photo.
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>Fennick Carry Bottle — insulated 20 oz bottle</title>
<style>
body{margin:0;font-family:'Figtree',Helvetica,Arial,sans-serif;color:#1c1d20;background:#f4f2ee}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:88px 0}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:#1c1d20;font-weight:600}
h1{font-size:58px;line-height:1.04;letter-spacing:-.025em;margin:0 0 18px}
h2{font-size:40px;line-height:1.12;letter-spacing:-.015em;margin:0 0 14px}
h3{font-size:22px;line-height:1.3;margin:0 0 8px}
p{font-size:17px;line-height:1.7;color:#6a6c70;margin:0 0 18px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#1c1d20;margin:0 0 14px}
.buy{display:inline-block;padding:16px 30px;border-radius:6px;background:#d99a1e;color:#1c1d20;text-decoration:none;font-weight:700;font-size:16px}
.ghost{display:inline-block;padding:15px 28px;border-radius:6px;border:1px solid #1c1d20;color:#1c1d20;text-decoration:none;font-weight:700;font-size:16px}
.top{background:#f4f2ee;border-bottom:1px solid #e4e1db}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.logo{margin:0;font-family:'Fraunces',Georgia,serif;font-size:24px;font-weight:600;letter-spacing:-.01em;color:#1c1d20}
.top-buy{display:inline-block;padding:10px 20px;border-radius:6px;background:#1c1d20;color:#ffffff;text-decoration:none;font-weight:700;font-size:15px}
.hero{padding:56px 0 88px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center}
.price{font-family:'Fraunces',Georgia,serif;font-size:30px;font-weight:600;color:#1c1d20;margin:0 0 24px}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 24px}
.assure{display:flex;flex-wrap:wrap;gap:8px 22px}
.assure > div{display:flex;gap:8px;align-items:center;font-size:15px;color:#1c1d20}
.tick{color:#d99a1e;font-size:14px}
.hero-img{width:100%;height:600px;object-fit:cover;border-radius:10px;display:block;background:#e4e1db}
.head{max-width:660px;margin:0 0 44px}
.white{background:#ffffff}
.benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.benefit{padding:28px 26px;border:1px solid #e4e1db;border-radius:10px;background:#f4f2ee}
.b-icon{display:inline-block;color:#d99a1e;font-size:22px;line-height:1;margin:0 0 14px}
.benefit h3{font-size:20px}
.benefit p{font-size:16px;margin:0}
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;margin:0 0 72px}
.feature-last{margin:0}
.feature img{width:100%;height:480px;object-fit:cover;border-radius:10px;display:block;background:#e4e1db}
.feature h2{font-size:34px}
.specs-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{text-align:left;padding:14px 0;border-bottom:1px solid #e4e1db;vertical-align:top}
p a{color:#1c1d20;text-decoration:underline;text-underline-offset:3px}
th{width:34%;font-weight:700;color:#1c1d20}
td{color:#6a6c70}
.box-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:center}
.box-img{width:100%;height:440px;object-fit:cover;border-radius:10px;display:block;background:#e4e1db}
.inbox{display:flex;flex-direction:column;gap:14px}
.inbox > div{display:flex;gap:12px;align-items:center;font-size:17px;color:#1c1d20}
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.review{margin:0;padding:30px;border-radius:10px;background:#ffffff;border:1px solid #e4e1db}
.stars{margin:0 0 14px;color:#d99a1e;font-size:18px;letter-spacing:.12em}
.review blockquote{margin:0 0 18px;font-size:17px;line-height:1.65;color:#1c1d20}
.review figcaption{font-size:14px;font-weight:700;color:#6a6c70}
.compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.col{padding:30px 28px;border-radius:10px;border:1px solid #e4e1db;background:#ffffff}
.col-main{background:#1c1d20;border-color:#1c1d20}
.col-main h3{color:#ffffff}
.col h3{font-size:21px;margin:0 0 18px}
.rows{display:flex;flex-direction:column;gap:12px}
.rows > div{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.5;color:#1c1d20}
.col-main .rows > div{color:#f4f2ee}
.yes{color:#d99a1e;font-size:14px}
.no{color:#6a6c70;font-size:14px}
.dark{background:#1c1d20}
.dark h2,.dark h3{color:#ffffff}
.dark p{color:#e4e1db}
.promise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.promise-card{padding:30px 28px;border-radius:10px;border:1px solid #6a6c70}
.p-icon{display:inline-block;color:#d99a1e;font-size:22px;line-height:1;margin:0 0 14px}
.promise-card p{font-size:16px;margin:0}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.faq{display:flex;flex-direction:column;gap:12px}
details{border:1px solid #e4e1db;border-radius:10px;padding:18px 22px;background:#ffffff}
summary{font-size:17px;font-weight:700;color:#1c1d20;cursor:pointer}
details p{margin:12px 0 0;font-size:16px}
.final{text-align:center;background:#e4e1db}
.final .inner{max-width:660px;margin:0 auto}
.final .price{margin:0 0 22px}
.small{font-size:14px;margin:18px 0 0}
.foot{background:#f4f2ee;border-top:1px solid #e4e1db}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px}
.foot p{margin:0;font-size:14px;color:#6a6c70}
.foot a{color:#1c1d20}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.hero{padding:28px 0 56px}
.hero .wrap,.benefits,.feature,.specs-grid,.box-grid,.reviews,.compare,.promise,.faq-grid{grid-template-columns:minmax(0,1fr);gap:28px}
.feature{margin:0 0 48px}
.feature-last{margin:0}
h1{font-size:38px}
h2{font-size:30px}
.feature h2{font-size:27px}
.price{font-size:26px}
.hero-img{height:360px}
.feature img{height:300px}
.box-img{height:280px}
.logo{font-size:21px}
.top-buy{padding:9px 14px;font-size:14px}
.foot .wrap{flex-direction:column;align-items:flex-start;gap:6px}
}
</style>
</head>
<body>
<header class="top">
<div class="wrap">
<p class="logo">Fennick</p>
<a class="top-buy" href="/checkout/">Buy — $38</a>
</div>
</header>
<section class="hero">
<div class="wrap">
<div>
<p class="eyebrow">The Fennick Carry Bottle · 20 oz</p>
<h1>Ice at the bottom of the bottle at the end of the day</h1>
<p>A double-wall steel bottle that keeps water cold for 24 hours, opens with one hand, fits a car cup holder and does not leak in a bag.</p>
<p class="price">$38</p>
<div class="actions">
<a class="buy" href="/checkout/">Buy the bottle</a>
<a class="ghost" href="#details">See the details</a>
</div>
<div class="assure">
<div><span class="tick">✓</span><span>Free US shipping over $50</span></div>
<div><span class="tick">✓</span><span>60-day returns</span></div>
<div><span class="tick">✓</span><span>Ships in 1–2 business days</span></div>
</div>
</div>
<img class="hero-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/product/bottle-studio.jpg" width="1200" height="1200" alt="Matte graphite insulated steel bottle with a carry-loop cap standing on a warm off-white studio backdrop">
</div>
</section>
<section class="white" id="details">
<div class="wrap">
<div class="head">
<p class="eyebrow">Why people switch</p>
<h2>Four things it does every day</h2>
</div>
<div class="benefits">
<div class="benefit"><span class="b-icon">◎</span><h3>Cold for 24 hours</h3><p>Vacuum-sealed double walls keep ice frozen through a full workday and a hot car.</p></div>
<div class="benefit"><span class="b-icon">↻</span><h3>One-hand cap</h3><p>A quarter turn opens the sip spout, so you can drink while holding a leash or a bag.</p></div>
<div class="benefit"><span class="b-icon">●</span><h3>Fits cup holders</h3><p>The base is 2.9 inches across and slides into most car and bike cup holders.</p></div>
<div class="benefit"><span class="b-icon">✓</span><h3>No metallic taste</h3><p>The inside is plain polished steel with no coating, so water tastes like water.</p></div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="feature">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/product/bottle-cap.jpg" width="1200" height="1200" alt="Close-up of the bottle’s screw cap with a flexible carry loop and a small sip spout">
<div>
<p class="eyebrow">The cap</p>
<h2>A loop you can hook on one finger</h2>
<p>The carry loop is molded into the cap, so there is no strap to snap. Under it, a silicone gasket seals the spout tight enough to lie flat in a backpack.</p>
<p>The cap comes apart in two pieces for cleaning, and a spare gasket ships in the box.</p>
</div>
</div>
<div class="feature">
<div>
<p class="eyebrow">The mouth</p>
<h2>Wide enough for ice cubes and a brush</h2>
<p>A 2.2-inch opening takes standard ice cubes straight from the tray and lets a bottle brush reach the bottom, so nothing grows in the corners.</p>
<p>Fill it with hot coffee instead and it stays above 140°F for around six hours.</p>
</div>
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/product/bottle-mouth.jpg" width="1200" height="1200" alt="Top-down close-up of the open bottle mouth filled with ice cubes and water">
</div>
<div class="feature feature-last">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/product/bottle-trail.jpg" width="1600" height="1000" alt="Insulated bottle in the side pocket of a canvas daypack resting on a rock beside a forest trail">
<div>
<p class="eyebrow">The finish</p>
<h2>A grip that does not slip when it sweats</h2>
<p>The outside is powder-coated in a soft matte finish that stays dry to the touch, because the vacuum layer stops condensation forming in the first place.</p>
<p>It takes knocks on trails and office floors without chipping down to bare metal. <a href="/our-story/">Read how and where it is made</a>.</p>
</div>
</div>
</div>
</section>
<section class="white">
<div class="wrap specs-grid">
<div>
<p class="eyebrow">Specifications</p>
<h2>The numbers</h2>
<p>Measured on our production samples. Insulation times are at a room temperature of 72°F with the cap closed.</p>
</div>
<table>
<tbody>
<tr><th>Capacity</th><td>20 oz (590 ml)</td></tr>
<tr><th>Keeps cold</th><td>Up to 24 hours</td></tr>
<tr><th>Keeps hot</th><td>Up to 12 hours</td></tr>
<tr><th>Size</th><td>2.9 in wide × 10.2 in tall</td></tr>
<tr><th>Weight</th><td>12.3 oz (350 g) empty</td></tr>
<tr><th>Body</th><td>18/8 stainless steel, double wall, vacuum insulated</td></tr>
<tr><th>Cap</th><td>Polypropylene with a silicone gasket, BPA-free</td></tr>
<tr><th>Cleaning</th><td>Cap top-rack dishwasher safe; hand-wash the body</td></tr>
</tbody>
</table>
</div>
</section>
<section>
<div class="wrap box-grid">
<img class="box-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/product/bottle-box.jpg" width="1600" height="1000" alt="Flat lay of the bottle beside its plain paper box, a spare silicone gasket and a small bottle brush">
<div>
<p class="eyebrow">What is in the box</p>
<h2>Everything you need, nothing to throw away</h2>
<div class="inbox">
<div><span class="tick">✓</span><span>Fennick Carry Bottle, 20 oz</span></div>
<div><span class="tick">✓</span><span>Carry-loop cap with sip spout</span></div>
<div><span class="tick">✓</span><span>Spare silicone gasket</span></div>
<div><span class="tick">✓</span><span>Narrow bottle brush</span></div>
<div><span class="tick">✓</span><span>Care card, printed on the inside of the box</span></div>
</div>
</div>
</div>
</section>
<section class="white">
<div class="wrap">
<div class="head">
<p class="eyebrow">Reviews</p>
<h2>From the first 300 owners</h2>
</div>
<div class="reviews">
<figure class="review">
<div class="stars">★★★★★</div>
<blockquote>“I fill it at 7 am and there is still ice rattling around when I leave the job site at five. It has been dropped off a tailgate twice.”</blockquote>
<figcaption>Jordan M. — bought in March</figcaption>
</figure>
<figure class="review">
<div class="stars">★★★★★</div>
<blockquote>“The loop is the reason I bought it. I carry it with my keys on one finger and it has never leaked into my laptop bag.”</blockquote>
<figcaption>Aisha K. — daily commuter</figcaption>
</figure>
<figure class="review">
<div class="stars">★★★★☆</div>
<blockquote>“Keeps coffee hot through my morning shift. One star off because it is a little tall for the cup holder in my old hatchback.”</blockquote>
<figcaption>Ben L. — night-shift nurse</figcaption>
</figure>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">How it compares</p>
<h2>The Carry Bottle next to the usual options</h2>
<p>What you typically get from a single-wall steel bottle or a plastic sports bottle at a similar size.</p>
</div>
<div class="compare">
<div class="col col-main">
<h3>Fennick Carry Bottle</h3>
<div class="rows">
<div><span class="yes">✓</span><span>Cold for up to 24 hours</span></div>
<div><span class="yes">✓</span><span>No condensation on the outside</span></div>
<div><span class="yes">✓</span><span>Leak-proof lying flat in a bag</span></div>
<div><span class="yes">✓</span><span>Wide mouth for ice and cleaning</span></div>
</div>
</div>
<div class="col">
<h3>Typical single-wall steel</h3>
<div class="rows">
<div><span class="no">✕</span><span>Warms up within an hour or two</span></div>
<div><span class="no">✕</span><span>Sweats onto desks and bags</span></div>
<div><span class="yes">✓</span><span>Light and usually cheaper</span></div>
<div><span class="no">✕</span><span>Often a narrow mouth</span></div>
</div>
</div>
<div class="col">
<h3>Typical plastic sports bottle</h3>
<div class="rows">
<div><span class="no">✕</span><span>No insulation at all</span></div>
<div><span class="no">✕</span><span>Can hold on to smells over time</span></div>
<div><span class="yes">✓</span><span>The lightest option</span></div>
<div><span class="no">✕</span><span>Squeeze lids tend to drip</span></div>
</div>
</div>
</div>
</div>
</section>
<section class="dark">
<div class="wrap">
<div class="head">
<h2>Shipping, returns and the guarantee</h2>
<p>The plain version of our policies, so you know exactly what happens after you order.</p>
</div>
<div class="promise">
<div class="promise-card"><span class="p-icon">→</span><h3>Ships in 1–2 business days</h3><p>From our warehouse in Ohio. Free US shipping over $50, otherwise a flat $5. Most orders arrive in 3–5 business days.</p></div>
<div class="promise-card"><span class="p-icon">↺</span><h3>60 days to change your mind</h3><p>Used or not, send it back within 60 days for a full refund. We email a prepaid label; you just drop it off.</p></div>
<div class="promise-card"><span class="p-icon">✓</span><h3>Two-year guarantee</h3><p>If the vacuum seal fails or the cap cracks in normal use within two years, we replace it. Dents from drops are not covered.</p></div>
</div>
</div>
</section>
<section class="white">
<div class="wrap faq-grid">
<div>
<p class="eyebrow">Questions</p>
<h2>Before you buy</h2>
<p>Something else? Email [email protected] and a person replies within one business day.</p>
</div>
<div class="faq">
<details><summary>Can I put carbonated drinks in it?</summary><p>Yes, sparkling water is fine. Open it slowly, as pressure builds a little when the drink warms up. We do not recommend it for anything fermenting, such as kombucha.</p></details>
<details><summary>Is it dishwasher safe?</summary><p>The cap can go on the top rack. Wash the body by hand with warm soapy water and the brush; dishwasher heat can damage the powder coat and the vacuum seal over time.</p></details>
<details><summary>Will it fit my car cup holder?</summary><p>The base is 2.9 inches across, which fits most car, bike and stroller cup holders. Some older cars with shallow holders will hold it but let it lean.</p></details>
<details><summary>Can I use it for hot drinks?</summary><p>Yes. Coffee and tea stay hot for up to 12 hours. Leave a little room at the top and open the spout away from your face the first time.</p></details>
<details><summary>Where do you ship?</summary><p>We ship to all 50 US states and to Canada. Canadian orders take 5–8 business days and may be charged import duties at delivery.</p></details>
<details><summary>What if it arrives damaged?</summary><p>Send a photo to [email protected] within 14 days and we will ship a replacement the same day. You do not need to return the damaged one.</p></details>
</div>
</div>
</section>
<section class="final" id="buy">
<div class="wrap">
<div class="inner">
<h2>Carry one bottle all day</h2>
<p>One size, one price, in matte graphite. Free US shipping when you order two or more.</p>
<p class="price">$38</p>
<a class="buy" href="/checkout/">Buy the bottle</a>
<p class="small">Secure checkout · 60-day returns · Two-year guarantee</p>
</div>
</div>
</section>
<footer class="foot">
<div class="wrap">
<p>© 2026 Fennick Goods, 88 Tannery Lane, Brookvale, OH</p>
<p><a href="/our-story/">Our story</a> · Shipping · Returns · Privacy · [email protected]</p>
</div>
</footer>
</body>
</html>