Website kits
Product brand story page
Brand story page for a one-product brand: founder story, prototype photo, materials and sourcing cards, the team, care instructions and a buy prompt.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page linked from the landing page for visitors who are interested but not yet sure — usually the ones asking who is behind a brand they have never heard of. It opens with a plain explanation of why the product exists, told through the problem the founder had, because a specific frustration is more convincing than a mission statement. The prototype photo and caption show the work that went into it. Materials and sourcing come next as four cards plus a short “what we do not claim” box: say where it is made and what each part is made of, and do not use eco words you cannot back up. Three people cards tell buyers who will answer their emails, care instructions show you expect the product to be kept for years, and a dark band sends them back to buy. Replace the founder story first, then check every material claim against your supplier’s specification sheets.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 29
- Container (grid) × 3
- Container (grid, 2 columns) × 1
- Container (grid, 3 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 25
- Button × 3
- Heading × 10
- Image × 2
- Icon Box × 4
- Icon List × 1
Things worth knowing
- The four materials cards convert to Icon Box widgets with filled circle, bullseye, open circle and check icons; change them to more literal icons in the panel if you prefer.
- The three team cards are text-only, so each becomes a Container holding a Text Editor for the role, a Heading for the name and a Text Editor for the bio. Adding a photo to a card in Elementor afterwards will not break anything.
- The care list becomes one Icon List widget mixing check and cross icons, and the workshop and prototype photos become Image widgets with empty slots.
- Buy the bottle and Back to the product page convert to Button widgets with the placeholder links /checkout/ and /; set them to your checkout and landing page URLs. Below 780px all two-column rows stack.
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>Our story — Fennick</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:54px;line-height:1.06;letter-spacing:-.025em;margin:0 0 18px}
h2{font-size:38px;line-height:1.14;letter-spacing:-.015em;margin:0 0 14px}
h3{font-size:21px;line-height:1.3;margin:0 0 8px}
p{font-size:17px;line-height:1.75;color:#6a6c70;margin:0 0 18px}
p a{color:#1c1d20;text-decoration:underline;text-underline-offset:3px}
.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-light{display:inline-block;padding:15px 28px;border-radius:6px;border:1px solid #e4e1db;color:#ffffff;text-decoration:none;font-weight:700;font-size:16px}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.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}
.logo a{color:#1c1d20;text-decoration:none}
.top-buy{display:inline-block;padding:10px 20px;border-radius:6px;background:#1c1d20;color:#ffffff;text-decoration:none;font-weight:700;font-size:15px}
.intro{padding:56px 0 88px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center}
.photo{width:100%;height:500px;object-fit:cover;border-radius:10px;display:block;background:#e4e1db}
.white{background:#ffffff}
.why{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.wide{width:100%;height:520px;object-fit:cover;border-radius:10px;display:block;background:#e4e1db;margin:0 0 28px}
.caption{font-size:15px;max-width:760px;margin:0}
.head{max-width:680px;margin:0 0 44px}
.materials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.material{padding:30px 28px;border:1px solid #e4e1db;border-radius:10px;background:#ffffff}
.m-icon{display:inline-block;color:#d99a1e;font-size:22px;line-height:1;margin:0 0 14px}
.material p{font-size:16px;margin:0}
.honest{margin:32px 0 0;padding:24px 28px;border-left:3px solid #d99a1e;background:#e4e1db;border-radius:0 10px 10px 0}
.honest p{color:#1c1d20;font-size:16px;margin:0}
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.person{padding:30px 28px;border-radius:10px;background:#ffffff;border:1px solid #e4e1db}
.person .role{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6a6c70;margin:0 0 10px}
.person p{font-size:16px;margin:0}
.care-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.care{display:flex;flex-direction:column;gap:14px}
.care > div{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.55;color:#1c1d20}
.tick{color:#d99a1e;font-size:14px;line-height:1.7}
.parts{padding:30px 28px;border-radius:10px;background:#ffffff;border:1px solid #e4e1db}
.parts p{font-size:16px}
.parts p:last-child{margin:0}
.dark{background:#1c1d20;text-align:center}
.dark .inner{max-width:640px;margin:0 auto}
.dark h2{color:#ffffff}
.dark p{color:#e4e1db;margin:0 0 28px}
.dark .actions{justify-content:center}
.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}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.intro{padding:28px 0 56px}
.split,.why,.materials,.team,.care-grid{grid-template-columns:minmax(0,1fr);gap:28px}
h1{font-size:37px}
h2{font-size:29px}
.photo{height:300px}
.wide{height:240px}
.logo{font-size:21px}
.top-buy{padding:9px 14px;font-size:14px}
.honest{padding:20px}
.foot .wrap{flex-direction:column;align-items:flex-start;gap:6px}
}
</style>
</head>
<body>
<header class="top">
<div class="wrap">
<p class="logo"><a href="/">Fennick</a></p>
<a class="top-buy" href="/checkout/">Buy — $38</a>
</div>
</header>
<section class="intro">
<div class="wrap split">
<div>
<p class="eyebrow">Our story</p>
<h1>We made the bottle we kept wishing we owned</h1>
<p>Fennick is three people and one product. We spent two years on a single insulated bottle because every one we bought either leaked, sweated or would not fit the car.</p>
<p>This page is the longer answer to “why another bottle?” — and what it is made of.</p>
</div>
<img class="photo" src="https://htmltoelementor.com/wp-content/uploads/hte-library/product/workshop-bench.jpg" width="1600" height="1000" alt="Two people at a wooden workbench comparing bottle caps and taking notes in a bright small workshop">
</div>
</section>
<section class="white">
<div class="wrap why">
<div>
<p class="eyebrow">Why it exists</p>
<h2>It started with a soaked laptop bag</h2>
</div>
<div>
<p>Nora Fennick was carrying a bottle to site visits every day as a landscape architect. The one she owned kept water cold but leaked whenever it lay on its side, and the one that did not leak had a mouth too narrow to clean.</p>
<p>She sketched a cap with the carry loop molded in, so there was no strap to snap, and a spout that opened with a quarter turn. Then she spent a year finding someone who could make it seal properly.</p>
<p>We kept the product to one size and one color on purpose. It means we can keep spare parts for every bottle we have ever sold.</p>
</div>
</div>
</section>
<section>
<div class="wrap">
<img class="wide" src="https://htmltoelementor.com/wp-content/uploads/hte-library/product/prototypes-row.jpg" width="1600" height="900" alt="A row of unfinished prototype bottles and caps in different shades lined up on a pale workbench">
<p class="caption">Eleven rounds of prototypes. Most of the changes were in the cap: the thread pitch, the gasket shape and where the loop meets the lid, which is where earlier versions cracked.</p>
</div>
</section>
<section class="white">
<div class="wrap">
<div class="head">
<p class="eyebrow">Materials and sourcing</p>
<h2>What it is made of, and where</h2>
<p>Our bottles are made by a contract manufacturer in Ningbo, China, that has built vacuum bottles for more than fifteen years. We visited before signing and were there for the first production run.</p>
</div>
<div class="materials">
<div class="material"><span class="m-icon">●</span><h3>Steel body</h3><p>18/8 food-grade stainless steel, inside and out. The inner wall is left uncoated so nothing flakes off over time.</p></div>
<div class="material"><span class="m-icon">◎</span><h3>Cap and gasket</h3><p>BPA-free polypropylene with a food-grade silicone gasket. Both parts are sold separately, so a worn gasket does not mean a new bottle.</p></div>
<div class="material"><span class="m-icon">○</span><h3>Powder-coat finish</h3><p>A baked-on powder coat rather than paint, chosen because it chips far less in daily use. It is not food-contact and never touches your drink.</p></div>
<div class="material"><span class="m-icon">✓</span><h3>Packaging</h3><p>A plain paperboard box with no plastic window or insert. The care instructions are printed inside the lid, so there is no separate leaflet.</p></div>
</div>
<div class="honest">
<p>What we do not claim: we do not call the bottle carbon neutral or sustainable. The most useful thing we can do is make one that lasts for years and sell the parts that wear out.</p>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">The people</p>
<h2>Who answers your emails</h2>
</div>
<div class="team">
<div class="person"><p class="role">Design</p><h3>Nora Fennick</h3><p>Founder. Drew the first cap on the back of a site plan and still signs off every production batch.</p></div>
<div class="person"><p class="role">Operations</p><h3>Sam Okoye</h3><p>Runs the warehouse in Brookvale, Ohio, and packs most orders himself on Mondays and Thursdays.</p></div>
<div class="person"><p class="role">Customer care</p><h3>Lina Haddad</h3><p>Reads every message to [email protected] and decides on replacements. Usually replies the same day.</p></div>
</div>
</div>
</section>
<section class="white">
<div class="wrap care-grid">
<div>
<p class="eyebrow">Care instructions</p>
<h2>How to make it last</h2>
<div class="care">
<div><span class="tick">✓</span><span>Wash before first use with warm soapy water.</span></div>
<div><span class="tick">✓</span><span>Hand-wash the body; the cap can go on the top rack.</span></div>
<div><span class="tick">✓</span><span>Take the gasket out once a week and let it dry fully.</span></div>
<div><span class="tick">✕</span><span>Do not freeze it or put it in the microwave.</span></div>
<div><span class="tick">✕</span><span>Avoid bleach; use baking soda for coffee stains.</span></div>
</div>
</div>
<div class="parts">
<h3>Spare parts</h3>
<p>Gaskets wear out with daily use, usually after a year or so. A pack of two costs $6 and ships free on its own.</p>
<p>Caps are $12. If a cap cracks in normal use in the first two years, it is covered by the guarantee — <a href="mailto:[email protected]">email us</a> a photo instead.</p>
</div>
</div>
</section>
<section class="dark">
<div class="wrap">
<div class="inner">
<h2>One bottle, made to be kept</h2>
<p>$38, free US shipping over $50, and 60 days to send it back if it is not for you.</p>
<div class="actions">
<a class="buy" href="/checkout/">Buy the bottle</a>
<a class="ghost-light" href="/">Back to the product page</a>
</div>
</div>
</div>
</section>
<footer class="foot">
<div class="wrap">
<p>© 2026 Fennick Goods, 88 Tannery Lane, Brookvale, OH</p>
<p>Shipping · Returns · Privacy · (555) 014-7731 · [email protected]</p>
</div>
</footer>
</body>
</html>
