LP Builder · Components

Announcement bar `announce-bar`

Thin top bar carrying the offer or promise, dollar-framed where possible.

default in: Advertorial · Listicle (editorial) · PM page (PDP-style)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

Audience call out `audience-callout`

One line naming exactly who the page is for, so the reader self-selects.

default in: Advertorial · PM page (PDP-style)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

Hero `hero`

Rating, headline, sub, price anchor (was/now/save), CTA, trust micro-line, hero image.

default in: Advertorial · Listicle (editorial) · PM page (PDP-style)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

Bold / attention-grabbing promise `bold-promise`

A single audacious benefit statement, usually the headline of the hero.

optional — add from the library

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

Irresistible intrigue `intrigue`

Curiosity-gap statement that pulls the reader down the page (authority voice works well).

default in: Advertorial

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The problem `problem`

2-4 pain scenes the reader already agrees with; confirmation bias, loss-sharpened.

default in: Advertorial · Listicle (editorial) · PM page (PDP-style)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

Consequences of inaction `consequences`

What staying with the status quo quietly costs; bridges problem to solution.

default in: Advertorial

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

Awards / PR mention `awards-pr`

CHOICE badges, press logos, awards; borrowed authority.

default in: PM page (PDP-style)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The solution `solution`

Product reveal: claim, mechanism, contextual proof quote, demo video/image.

default in: Advertorial · PM page (PDP-style)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

Customer reviews / ratings `reviews-ratings`

Aggregate rating + volume with 3+ selected review cards (Yotpo, user-curated).

default in: Advertorial · Listicle (editorial) · PM page (PDP-style)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

<span class="eyebrow">Owners said it first</span>
<h2>0.0 out of 5, from 000 verified reviews</h2>
<div class="grid g3" style="margin-top:8px">
  <div class="card"><span class="stars">★★★★★</span><p style="margin:6px 0">"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</p><b style="font-size:10px;color:var(--cobalt)">Xxxx X.</b><small style="display:block;font-size:9px;opacity:.55">Verified Buyer · Month 0, 0000</small></div>
  <div class="card"><span class="stars">★★★★★</span><p style="margin:6px 0">"Ut enim ad minim veniam, quis nostrud exercitation."</p><b style="font-size:10px;color:var(--cobalt)">Xxxx X.</b><small style="display:block;font-size:9px;opacity:.55">Verified Buyer · Month 0, 0000</small></div>
  <div class="card"><span class="stars">★★★★★</span><p style="margin:6px 0">"Duis aute irure dolor in reprehenderit in voluptate."</p><b style="font-size:10px;color:var(--cobalt)">Xxxx X.</b><small style="display:block;font-size:9px;opacity:.55">Verified Buyer · Month 0, 0000</small></div>
</div>
<div class="centered" style="margin-top:6px;opacity:.5;font-size:11px">← carousel: 10 reviews with arrows →</div>

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

Testimonial videos `testimonial-videos`

Single-customer video stories (UGC/creator), named and verified — the video is the proof.

optional — add from the library

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

Survey results `survey-results`

Stat tiles from post-purchase surveys. HARD RULE: ships only with real data, else remove.

optional — add from the library

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

UGC videos `ugc-videos`

Horizontal carousel of real-customer phone videos.

default in: Advertorial · PM page (PDP-style)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

Before / After `before-after`

Two-panel contrast of life before vs after the product.

default in: Advertorial

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

USPs `usps`

3-4 cards: benefit-led heading, mechanism explanation, optional proof quote.

default in: Advertorial · Listicle (editorial) · PM page (PDP-style)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

Measurements / will it fit `measurements`

Dimensions, footprint, weights, delivery-box sizes; kills the fit objection.

default in: Advertorial · PM page (PDP-style)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

Assembly / demo video `assembly-video`

Real-time proof of an ease claim (assembly, conversion) with caption + quote.

default in: Advertorial · PM page (PDP-style)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

3 reasons why this is for you `three-reasons`

Numbered closing arguments: value anchor, risk reversal, urgency.

default in: Advertorial · Listicle (editorial)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

Friction-less `frictionless`

Order -> delivered -> built -> trial in 3-4 steps; time/energy risk reversal.

default in: Advertorial

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

<span class="eyebrow">Easier than you think</span>
<h2>From lorem to ipsum</h2>
<div class="grid g4" style="margin-top:8px">
  <div class="card centered"><div style="font-size:18px;color:var(--cobalt)">◎</div><div style="font-size:8px;font-weight:700;opacity:.5;letter-spacing:.14em">STEP 1</div><h3>Lorem in 2 minutes</h3><p style="font-size:10px">Ipsum dolor sit.</p></div>
  <div class="card centered"><div style="font-size:18px;color:var(--cobalt)">◎</div><div style="font-size:8px;font-weight:700;opacity:.5;letter-spacing:.14em">STEP 2</div><h3>Shipped free</h3><p style="font-size:10px">Consectetur elit.</p></div>
  <div class="card centered"><div style="font-size:18px;color:var(--cobalt)">◎</div><div style="font-size:8px;font-weight:700;opacity:.5;letter-spacing:.14em">STEP 3</div><h3>Built in 00 minutes</h3><p style="font-size:10px">Sed do eiusmod.</p></div>
  <div class="card centered"><div style="font-size:18px;color:var(--cobalt)">◎</div><div style="font-size:8px;font-weight:700;opacity:.5;letter-spacing:.14em">STEP 4</div><h3>Try it 000 nights</h3><p style="font-size:10px">Tempor incididunt.</p></div>
</div>

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

Comparison tab `comparison-table`

Product vs typical alternative(s), loss-framed heading, tick/cross rows.

default in: Advertorial · Listicle (editorial) · PM page (PDP-style)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

Myth busting `myth-busting`

Myth/Truth pairs dismantling category objections with logic + authority.

default in: Advertorial

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

Objections `objections`

Every 'but...' quoted and answered; cover money, time, energy, identity (TIMER).

default in: Advertorial

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

Back in stock / selling fast `back-in-stock`

Genuine scarcity or velocity statement. HARD RULE: only if true from inventory.

optional — add from the library

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

Sale / offer box `sale`

Anchored price drop, dollar-framed saving, per-night reframe, instalments, CTA.

default in: Advertorial · Listicle (editorial)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

Bundles `bundles`

Relevant attach offer (verify live bundle exists before shipping).

default in: Advertorial

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

PDP buying block `pdp-buying-block`

Same module as the PDP above-the-fold: gallery, size/variant pickers, price, ATC.

default in: PM page (PDP-style)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

Add to cart tiles `atc-tiles`

One tile per colour/variant, each with image, price and its own ATC button.

default in: Advertorial

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

<span class="eyebrow">Choose yours</span>
<h2>Pick a lorem. That's the hard part.</h2>
<div class="grid g4" style="margin-top:8px">
  <div class="card" style="padding:0;overflow:hidden"><div class="ph" style="height:56px;border-radius:0">✕</div><div style="padding:8px"><h3 style="font-size:11px">Lorem</h3><div style="font-size:10px"><s>$0,000</s> <b data-dynamic>$0,000</b></div><a class="btn" style="width:100%;padding:6px;font-size:10px">Add to cart</a></div></div>
  <div class="card" style="padding:0;overflow:hidden"><div class="ph" style="height:56px;border-radius:0">✕</div><div style="padding:8px"><h3 style="font-size:11px">Ipsum</h3><div style="font-size:10px"><s>$0,000</s> <b data-dynamic>$0,000</b></div><a class="btn" style="width:100%;padding:6px;font-size:10px">Add to cart</a></div></div>
  <div class="card" style="padding:0;overflow:hidden"><div class="ph" style="height:56px;border-radius:0">✕</div><div style="padding:8px"><h3 style="font-size:11px">Dolor</h3><div style="font-size:10px"><s>$0,000</s> <b data-dynamic>$0,000</b></div><a class="btn" style="width:100%;padding:6px;font-size:10px">Add to cart</a></div></div>
  <div class="card" style="padding:0;overflow:hidden"><div class="ph" style="height:56px;border-radius:0">✕</div><div style="padding:8px"><h3 style="font-size:11px">Amet</h3><div style="font-size:10px"><s>$0,000</s> <b data-dynamic>$0,000</b></div><a class="btn" style="width:100%;padding:6px;font-size:10px">Add to cart</a></div></div>
</div>

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

Quiz `quiz`

Short self-segmentation quiz leading to a recommendation.

optional — add from the library

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

FAQ `faq`

Accordion answering the remaining pre-purchase questions, objection-first wording.

default in: Advertorial · Listicle (editorial) · PM page (PDP-style)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

Final CTA `final-cta`

Identity close, offer recap line, action+outcome button.

default in: Advertorial · PM page (PDP-style)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

Sticky add to cart button `sticky-atc`

Fixed bottom bar: price, saving pill, rating, ATC. Mobile-critical.

default in: Advertorial · Listicle (editorial) · PM page (PDP-style)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

The component's HTML

What changed and why (this is what the generator learns)

Your name

or upload a file, it replaces the box above

Footer (lite) `footer-lite`

Copyright, privacy/terms links, offer disclaimers. Every page ends with this.

default in: Advertorial · Listicle (editorial) · PM page (PDP-style)

shipped default

🎨 Edit the design ⤓ Download edit the design in words, or the HTML directly

EDIT OR UPLOAD A NEW VERSION

Components library

Announcement bar `announce-bar`

Audience call out `audience-callout`

Hero `hero`

Bold / attention-grabbing promise `bold-promise`

Irresistible intrigue `intrigue`

The problem `problem`

Consequences of inaction `consequences`

Awards / PR mention `awards-pr`

The solution `solution`

Customer reviews / ratings `reviews-ratings`

Testimonial videos `testimonial-videos`

Survey results `survey-results`

UGC videos `ugc-videos`

Before / After `before-after`

USPs `usps`

Measurements / will it fit `measurements`

Assembly / demo video `assembly-video`

3 reasons why this is for you `three-reasons`

Friction-less `frictionless`

Comparison tab `comparison-table`

Myth busting `myth-busting`

Objections `objections`

Back in stock / selling fast `back-in-stock`

Sale / offer box `sale`

Bundles `bundles`

PDP buying block `pdp-buying-block`

Add to cart tiles `atc-tiles`

Quiz `quiz`

FAQ `faq`

Final CTA `final-cta`

Sticky add to cart button `sticky-atc`

Footer (lite) `footer-lite`

Feedback on the tool

Components library

Announcement bar announce-bar

Audience call out audience-callout

Hero hero

Bold / attention-grabbing promise bold-promise

Irresistible intrigue intrigue

The problem problem

Consequences of inaction consequences

Awards / PR mention awards-pr

The solution solution

Customer reviews / ratings reviews-ratings

Testimonial videos testimonial-videos

Survey results survey-results

UGC videos ugc-videos

Before / After before-after

USPs usps

Measurements / will it fit measurements

Assembly / demo video assembly-video

3 reasons why this is for you three-reasons

Friction-less frictionless

Comparison tab comparison-table

Myth busting myth-busting

Objections objections

Back in stock / selling fast back-in-stock

Sale / offer box sale

Bundles bundles

PDP buying block pdp-buying-block

Add to cart tiles atc-tiles

Quiz quiz

FAQ faq

Final CTA final-cta

Sticky add to cart button sticky-atc

Footer (lite) footer-lite

Feedback on the tool

Announcement bar `announce-bar`

Audience call out `audience-callout`

Hero `hero`

Bold / attention-grabbing promise `bold-promise`

Irresistible intrigue `intrigue`

The problem `problem`

Consequences of inaction `consequences`

Awards / PR mention `awards-pr`

The solution `solution`

Customer reviews / ratings `reviews-ratings`

Testimonial videos `testimonial-videos`

Survey results `survey-results`

UGC videos `ugc-videos`

Before / After `before-after`

USPs `usps`

Measurements / will it fit `measurements`

Assembly / demo video `assembly-video`

3 reasons why this is for you `three-reasons`

Friction-less `frictionless`

Comparison tab `comparison-table`

Myth busting `myth-busting`

Objections `objections`

Back in stock / selling fast `back-in-stock`

Sale / offer box `sale`

Bundles `bundles`

PDP buying block `pdp-buying-block`

Add to cart tiles `atc-tiles`

Quiz `quiz`

FAQ `faq`

Final CTA `final-cta`

Sticky add to cart button `sticky-atc`

Footer (lite) `footer-lite`