HTML Examples Library for Elementor

Your Value Proposition

A clear, concise description

Get started

Gradient Hero Section

Hero section with a gradient background, heading, subheading and CTA. Perfect for landing page headers.

HeroHeadingButton

<section style="background:linear-gradient(135deg,#FF7F50 0%,#E8622E 100%);padding:80px 20px;text-align:center;">
  <h1 style="color:white;font-size:48px;font-weight:700;margin-bottom:16px;">
    Your Best Value Proposition
  </h1>
  <p style="color:rgba(255,255,255,0.85);font-size:20px;margin-bottom:32px;">
    A clear, concise description of what you offer.
  </p>
  <a href="#contacto" style="background:white;color:#FF7F50;padding:14px 36px;border-radius:8px;font-weight:600;text-decoration:none;font-size:16px;">
    Get started
  </a>
</section>

Solutions
for your business

Clearly describe your value proposition here.

Learn more

Split Hero (2 Columns)

Two-column hero: text on the left, visual/image on the right. More dynamic than a centered hero.

Hero2 columnsFlexbox

<section style="display:flex;align-items:center;gap:60px;padding:80px 20px;max-width:1100px;margin:0 auto;">
  <div style="flex:1;">
    <h1 style="font-size:44px;font-weight:700;line-height:1.15;margin-bottom:20px;color:#1A1A1A;">
      The solution your business needs
    </h1>
    <p style="font-size:18px;color:#5A5A5A;line-height:1.7;margin-bottom:32px;">
      Describe your value proposition. Explain what makes your solution different.
    </p>
    <div style="display:flex;gap:16px;flex-wrap:wrap;">
      <a href="#contacto" style="background:#FF7F50;color:white;padding:14px 32px;border-radius:8px;font-weight:600;text-decoration:none;font-size:16px;">Start for free</a>
      <a href="#demo" style="border:2px solid #DDD9D4;color:#1A1A1A;padding:14px 32px;border-radius:8px;font-weight:600;text-decoration:none;font-size:16px;">Watch demo</a>
    </div>
  </div>
  <div style="flex:1;background:linear-gradient(135deg,#1A1A1A,#2D2D2D);border-radius:16px;min-height:320px;display:flex;align-items:center;justify-content:center;">
    <p style="color:rgba(255,255,255,0.4);font-size:14px;">Your image or illustration here</p>
  </div>
</section>

Service 1

Short description

Service 2

Short description

Service 3

Short description

Services Card Grid

A grid of 3 cards with an icon, title and description. Great for services or features sections.

ServicesFlexboxCards

<div style="display:flex;gap:24px;padding:60px 20px;flex-wrap:wrap;">
  <div style="flex:1;min-width:220px;background:white;border-radius:12px;padding:32px;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid #f0ede8;">
    <div style="width:48px;height:48px;background:#FF7F50;border-radius:12px;margin-bottom:20px;"></div>
    <h3 style="font-size:20px;font-weight:700;margin-bottom:12px;color:#1A1A1A;">Service One</h3>
    <p style="color:#5A5A5A;line-height:1.6;">A description of the first service you offer your clients.</p>
  </div>
  <div style="flex:1;min-width:220px;background:white;border-radius:12px;padding:32px;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid #f0ede8;">
    <div style="width:48px;height:48px;background:#1A1A1A;border-radius:12px;margin-bottom:20px;"></div>
    <h3 style="font-size:20px;font-weight:700;margin-bottom:12px;color:#1A1A1A;">Service Two</h3>
    <p style="color:#5A5A5A;line-height:1.6;">A description of the second service you showcase on your site.</p>
  </div>
  <div style="flex:1;min-width:220px;background:white;border-radius:12px;padding:32px;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid #f0ede8;">
    <div style="width:48px;height:48px;background:#E8622E;border-radius:12px;margin-bottom:20px;"></div>
    <h3 style="font-size:20px;font-weight:700;margin-bottom:12px;color:#1A1A1A;">Service Three</h3>
    <p style="color:#5A5A5A;line-height:1.6;">A description of your third service or competitive advantage.</p>
  </div>
</div>

Why choose us?

Competitive advantage one

Competitive advantage two

Competitive advantage three

Feature List with Checkmarks

A list of advantages or benefits with check icons. Perfect for "why choose us?" sections or value propositions.

FeaturesListBenefits

<section style="padding:80px 20px;background:#FAF9F6;">
  <div style="max-width:900px;margin:0 auto;">
    <h2 style="font-size:36px;font-weight:700;text-align:center;margin-bottom:48px;color:#1A1A1A;">Why choose us?</h2>
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;">
      <div style="display:flex;gap:16px;align-items:flex-start;">
        <div style="width:32px;height:32px;background:#FF7F50;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <div>
          <h4 style="font-size:16px;font-weight:700;color:#1A1A1A;margin-bottom:6px;">Advantage one</h4>
          <p style="color:#5A5A5A;font-size:14px;line-height:1.6;">A short explanation of this advantage or benefit.</p>
        </div>
      </div>
      <div style="display:flex;gap:16px;align-items:flex-start;">
        <div style="width:32px;height:32px;background:#FF7F50;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <div>
          <h4 style="font-size:16px;font-weight:700;color:#1A1A1A;margin-bottom:6px;">Advantage two</h4>
          <p style="color:#5A5A5A;font-size:14px;line-height:1.6;">A short explanation of this advantage or benefit.</p>
        </div>
      </div>
      <div style="display:flex;gap:16px;align-items:flex-start;">
        <div style="width:32px;height:32px;background:#FF7F50;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <div>
          <h4 style="font-size:16px;font-weight:700;color:#1A1A1A;margin-bottom:6px;">Advantage three</h4>
          <p style="color:#5A5A5A;font-size:14px;line-height:1.6;">A short explanation of this advantage or benefit.</p>
        </div>
      </div>
      <div style="display:flex;gap:16px;align-items:flex-start;">
        <div style="width:32px;height:32px;background:#FF7F50;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <div>
          <h4 style="font-size:16px;font-weight:700;color:#1A1A1A;margin-bottom:6px;">Advantage four</h4>
          <p style="color:#5A5A5A;font-size:14px;line-height:1.6;">A short explanation of this advantage or benefit.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Free

€0

/mo

Pro

€29

/mo

Pricing Table (2 Plans)

A pricing table with two plans. The featured plan uses a dark background to stand out.

PricingPlansCTA

<div style="display:flex;gap:24px;padding:60px 20px;justify-content:center;flex-wrap:wrap;">
  <div style="background:white;border-radius:16px;padding:40px;text-align:center;border:2px solid #DDD9D4;flex:1;max-width:280px;">
    <h3 style="font-size:22px;font-weight:700;margin-bottom:8px;color:#1A1A1A;">Free</h3>
    <div style="font-size:48px;font-weight:700;color:#FF7F50;">€0</div>
    <div style="color:#5A5A5A;margin-bottom:24px;">/mo forever</div>
    <ul style="list-style:none;text-align:left;margin-bottom:32px;color:#1A1A1A;">
      <li style="padding:8px 0;border-bottom:1px solid #f0ede8;">✓ 10 conversions/mo</li>
      <li style="padding:8px 0;border-bottom:1px solid #f0ede8;">✓ Basic widgets</li>
      <li style="padding:8px 0;">✓ Export JSON</li>
    </ul>
    <a href="#" style="display:block;background:#FAF9F6;color:#FF7F50;padding:14px;border-radius:8px;font-weight:600;text-decoration:none;border:1px solid #DDD9D4;">Start for free</a>
  </div>
  <div style="background:#1A1A1A;border-radius:16px;padding:40px;text-align:center;flex:1;max-width:280px;color:white;">
    <h3 style="font-size:22px;font-weight:700;margin-bottom:8px;">Pro</h3>
    <div style="font-size:48px;font-weight:700;color:#FF7F50;">€29</div>
    <div style="opacity:0.6;margin-bottom:24px;">/mo per project</div>
    <ul style="list-style:none;text-align:left;margin-bottom:32px;">
      <li style="padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.1);">✓ Unlimited conversions</li>
      <li style="padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.1);">✓ All widgets</li>
      <li style="padding:8px 0;">✓ Priority support</li>
    </ul>
    <a href="#" style="display:block;background:#FF7F50;color:white;padding:14px;border-radius:8px;font-weight:600;text-decoration:none;">Go Pro</a>
  </div>
</div>

Pro Plan

€49/mo

billed annually

Get started

Featured Single Plan

A centered, featured pricing card, ideal for single-plan products or for highlighting your most popular plan.

PricingCTADark

<div style="max-width:400px;margin:60px auto;background:#1A1A1A;border-radius:20px;padding:48px 40px;text-align:center;color:white;">
  <p style="font-size:13px;font-weight:600;color:#FF7F50;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:12px;">Pro Plan</p>
  <div style="font-size:64px;font-weight:700;line-height:1;margin-bottom:4px;">€49</div>
  <div style="color:rgba(255,255,255,0.5);margin-bottom:36px;">per month, billed annually</div>
  <ul style="list-style:none;text-align:left;margin-bottom:40px;display:flex;flex-direction:column;gap:12px;">
    <li style="display:flex;align-items:center;gap:12px;color:rgba(255,255,255,0.8);">
      <span style="color:#FF7F50;font-size:18px;">✓</span> Unlimited conversions
    </li>
    <li style="display:flex;align-items:center;gap:12px;color:rgba(255,255,255,0.8);">
      <span style="color:#FF7F50;font-size:18px;">✓</span> Multi-format export
    </li>
    <li style="display:flex;align-items:center;gap:12px;color:rgba(255,255,255,0.8);">
      <span style="color:#FF7F50;font-size:18px;">✓</span> Priority support
    </li>
  </ul>
  <a href="#" style="display:block;background:#FF7F50;color:white;padding:16px;border-radius:10px;font-weight:700;font-size:16px;text-decoration:none;">Get started</a>
  <p style="font-size:13px;color:rgba(255,255,255,0.4);margin-top:16px;">No commitment · Cancel anytime</p>
</div>

Footer with Columns

Dark footer with a logo, link columns and a copyright line. Responsive with Flexbox.

FooterFlexboxDark

<footer style="background:#1A1A1A;color:white;padding:60px 20px 20px;">
  <div style="display:flex;gap:48px;margin-bottom:40px;flex-wrap:wrap;">
    <div style="flex:2;min-width:200px;">
      <h4 style="color:#FF7F50;font-size:20px;margin-bottom:12px;">MyBrand</h4>
      <p style="color:#5A5A5A;line-height:1.6;max-width:240px;">A short description of your company or project.</p>
    </div>
    <div style="flex:1;min-width:120px;">
      <h5 style="font-size:13px;font-weight:600;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.06em;color:rgba(255,255,255,0.5);">Pages</h5>
      <ul style="list-style:none;color:#5A5A5A;display:flex;flex-direction:column;gap:8px;">
        <li><a href="/" style="color:inherit;text-decoration:none;">Home</a></li>
        <li><a href="/servicios" style="color:inherit;text-decoration:none;">Services</a></li>
        <li><a href="/contacto" style="color:inherit;text-decoration:none;">Contact</a></li>
      </ul>
    </div>
    <div style="flex:1;min-width:120px;">
      <h5 style="font-size:13px;font-weight:600;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.06em;color:rgba(255,255,255,0.5);">Legal</h5>
      <ul style="list-style:none;color:#5A5A5A;display:flex;flex-direction:column;gap:8px;">
        <li><a href="/privacidad" style="color:inherit;text-decoration:none;">Privacy</a></li>
        <li><a href="/terminos" style="color:inherit;text-decoration:none;">Terms</a></li>
      </ul>
    </div>
  </div>
  <div style="border-top:1px solid #2A2A2A;padding-top:20px;color:#5A5A5A;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;">
    <span>© 2025 MyBrand — All rights reserved</span>
    <span>Made with ♥ in Spain</span>
  </div>
</footer>

Footer with Newsletter

Compact dark footer with a built-in signup form and a no-spam message.

FooterNewsletterDark

<footer style="background:#1A1A1A;color:white;padding:48px 20px 24px;">
  <div style="max-width:520px;margin:0 auto;text-align:center;margin-bottom:40px;">
    <h3 style="font-size:24px;font-weight:700;margin-bottom:8px;">Stay in the loop</h3>
    <p style="color:#5A5A5A;margin-bottom:24px;">No spam, just what matters. Unsubscribe anytime.</p>
    <form style="display:flex;gap:12px;max-width:440px;margin:0 auto;">
      <input type="email" placeholder="you@email.com"
        style="flex:1;padding:12px 16px;border:1px solid #2A2A2A;border-radius:8px;background:#2A2A2A;color:white;font-size:15px;">
      <button type="submit"
        style="background:#FF7F50;color:white;border:none;padding:12px 24px;border-radius:8px;font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap;">
        Subscribe
      </button>
    </form>
  </div>
  <div style="border-top:1px solid #2A2A2A;padding-top:20px;color:#5A5A5A;font-size:13px;text-align:center;">
    © 2025 MyBrand · <a href="/privacidad" style="color:inherit;">Privacy</a> · <a href="/terminos" style="color:inherit;">Terms</a>
  </div>
</footer>

Get in touch

Your name

you@email.com

Your message…

Send message

Contact Form

An HTML form structure. It converts to an HTML widget, with a notice suggesting the Elementor Pro Form widget.

FormHTML WidgetContact

<div style="max-width:480px;margin:0 auto;padding:40px 20px;">
  <h2 style="font-size:28px;font-weight:700;margin-bottom:8px;color:#1A1A1A;">Get in touch</h2>
  <p style="color:#5A5A5A;margin-bottom:32px;">We'll get back to you within 24 hours.</p>
  <form style="display:flex;flex-direction:column;gap:16px;">
    <div>
      <label style="display:block;font-weight:500;margin-bottom:6px;color:#1A1A1A;">Name</label>
      <input type="text" placeholder="Your full name"
        style="width:100%;padding:12px 16px;border:1px solid #DDD9D4;border-radius:8px;font-size:15px;background:#FAF9F6;">
    </div>
    <div>
      <label style="display:block;font-weight:500;margin-bottom:6px;color:#1A1A1A;">Email</label>
      <input type="email" placeholder="you@email.com"
        style="width:100%;padding:12px 16px;border:1px solid #DDD9D4;border-radius:8px;font-size:15px;background:#FAF9F6;">
    </div>
    <div>
      <label style="display:block;font-weight:500;margin-bottom:6px;color:#1A1A1A;">Message</label>
      <textarea rows="4" placeholder="How can we help?"
        style="width:100%;padding:12px 16px;border:1px solid #DDD9D4;border-radius:8px;font-size:15px;background:#FAF9F6;resize:vertical;"></textarea>
    </div>
    <button type="submit"
      style="background:#FF7F50;color:white;padding:14px;border-radius:8px;font-size:16px;font-weight:600;border:none;cursor:pointer;">
      Send message
    </button>
  </form>
</div>

Join the newsletter

1 email a week, 0 spam

you@email.com

Subscribe for free

Newsletter Signup

A compact signup block with a colored background for collecting emails. Ideal inside blog posts or in sidebars.

NewsletterEmailLeads

<div style="background:linear-gradient(135deg,#FF7F50,#E8622E);border-radius:16px;padding:48px 40px;text-align:center;max-width:520px;margin:0 auto;">
  <h3 style="font-size:28px;font-weight:700;color:white;margin-bottom:8px;">Join the newsletter</h3>
  <p style="color:rgba(255,255,255,0.85);margin-bottom:28px;">One weekly email with the most useful stuff. Never any spam.</p>
  <form style="display:flex;gap:12px;max-width:380px;margin:0 auto;">
    <input type="email" placeholder="you@email.com"
      style="flex:1;padding:12px 16px;border:none;border-radius:8px;font-size:15px;background:white;color:#1A1A1A;">
    <button type="submit"
      style="background:#1A1A1A;color:white;border:none;padding:12px 20px;border-radius:8px;font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap;">
      Subscribe
    </button>
  </form>
  <p style="color:rgba(255,255,255,0.6);font-size:13px;margin-top:16px;">Unsubscribe anytime in one click</p>
</div>

"

"This tool saved me hours of manual work."

María García

Web Designer

Testimonial Cards

Testimonial cards with an avatar, quote, name and job title. Ideal for social proof sections.

TestimonialsCardsFlexbox

<div style="display:flex;gap:24px;padding:60px 20px;flex-wrap:wrap;">
  <div style="flex:1;min-width:260px;background:white;border-radius:16px;padding:32px;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid #f0ede8;">
    <p style="color:#FF7F50;font-size:40px;font-weight:700;line-height:1;margin-bottom:12px;">"</p>
    <p style="color:#1A1A1A;font-style:italic;line-height:1.7;margin-bottom:20px;">
      "This tool has saved me hours of manual work. Now my Elementor conversions come out perfect."
    </p>
    <div style="display:flex;align-items:center;gap:12px;">
      <div style="width:44px;height:44px;background:#1A1A1A;border-radius:50%;"></div>
      <div>
        <strong style="display:block;font-size:15px;color:#1A1A1A;">María García</strong>
        <span style="color:#5A5A5A;font-size:13px;">Freelance Web Designer</span>
      </div>
    </div>
  </div>
  <div style="flex:1;min-width:260px;background:white;border-radius:16px;padding:32px;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid #f0ede8;">
    <p style="color:#FF7F50;font-size:40px;font-weight:700;line-height:1;margin-bottom:12px;">"</p>
    <p style="color:#1A1A1A;font-style:italic;line-height:1.7;margin-bottom:20px;">
      "An amazing tool. It converts any HTML design to Elementor in seconds without losing the styles."
    </p>
    <div style="display:flex;align-items:center;gap:12px;">
      <div style="width:44px;height:44px;background:#FF7F50;border-radius:50%;"></div>
      <div>
        <strong style="display:block;font-size:15px;color:#1A1A1A;">Carlos Ruiz</strong>
        <span style="color:#5A5A5A;font-size:13px;">WordPress Developer</span>
      </div>
    </div>
  </div>
</div>

"

"The best HTML to Elementor converter out there."

Ana López · CEO, MyCompany

Featured Blockquote

A large centered quote on a dark background. Perfect for highlighting a powerful line from a client or industry leader.

BlockquoteQuoteDark

<div style="background:#1A1A1A;padding:80px 20px;text-align:center;">
  <div style="max-width:680px;margin:0 auto;">
    <p style="color:#FF7F50;font-size:60px;line-height:1;margin-bottom:16px;">"</p>
    <blockquote style="color:white;font-size:24px;font-style:italic;line-height:1.6;margin:0 0 32px;">
      The best HTML to Elementor converter out there. It's saved us weeks of work on our projects.
    </blockquote>
    <div style="width:40px;height:2px;background:#FF7F50;margin:0 auto 20px;"></div>
    <cite style="color:#5A5A5A;font-size:15px;font-style:normal;">
      Ana López &middot; CEO of MyCompany
    </cite>
  </div>
</div>

Our Results

Real numbers

12K+

Users

98%

Satisfaction

150+

Countries

Stats with CSS

An example with a <style> block and CSS classes. Shows how the tool also generates the CSS file alongside the JSON.

StatsCSS ClassesDark

<style>
  .stats-section  { background:#1A1A1A; padding:80px 20px; text-align:center; }
  .stats-title    { color:white; font-size:36px; font-weight:700; margin-bottom:12px; }
  .stats-subtitle { color:#5A5A5A; font-size:18px; margin-bottom:60px; }
  .stats-grid     { display:flex; gap:32px; justify-content:center; flex-wrap:wrap; }
  .stat-card      { background:#2A2A2A; border-radius:16px; padding:40px 32px; min-width:160px; }
  .stat-number    { color:#FF7F50; font-size:48px; font-weight:700; margin-bottom:8px; }
  .stat-label     { color:rgba(255,255,255,0.5); font-size:16px; }
</style>

<section class="stats-section">
  <h2 class="stats-title">Our Results</h2>
  <p class="stats-subtitle">Numbers that show the impact of our work</p>
  <div class="stats-grid">
    <div class="stat-card"><div class="stat-number">12K+</div><div class="stat-label">Active users</div></div>
    <div class="stat-card"><div class="stat-number">98%</div><div class="stat-label">Satisfaction</div></div>
    <div class="stat-card"><div class="stat-number">150+</div><div class="stat-label">Countries</div></div>
  </div>
</section>

4.9★

Rating

24h

Response

500+

Clients

KPI Cards (Light Background)

Metric cards on a light background, with one highlighted in color. Ideal for trust sections or quick results.

KPIMetricsCards

<section style="padding:60px 20px;background:white;">
  <h2 style="text-align:center;font-size:32px;font-weight:700;color:#1A1A1A;margin-bottom:40px;">Results that speak for themselves</h2>
  <div style="display:flex;gap:20px;justify-content:center;flex-wrap:wrap;max-width:800px;margin:0 auto;">
    <div style="flex:1;min-width:160px;background:#FAF9F6;border-radius:16px;padding:32px 24px;text-align:center;border:1px solid #f0ede8;">
      <div style="font-size:48px;font-weight:700;color:#FF7F50;line-height:1;">4.9★</div>
      <div style="color:#5A5A5A;font-size:15px;margin-top:8px;">Average rating</div>
    </div>
    <div style="flex:1;min-width:160px;background:#FAF9F6;border-radius:16px;padding:32px 24px;text-align:center;border:1px solid #f0ede8;">
      <div style="font-size:48px;font-weight:700;color:#1A1A1A;line-height:1;"><24h</div>
      <div style="color:#5A5A5A;font-size:15px;margin-top:8px;">Response time</div>
    </div>
    <div style="flex:1;min-width:160px;background:#FF7F50;border-radius:16px;padding:32px 24px;text-align:center;">
      <div style="font-size:48px;font-weight:700;color:white;line-height:1;">500+</div>
      <div style="color:rgba(255,255,255,0.85);font-size:15px;margin-top:8px;">Happy clients</div>
    </div>
  </div>
</section>

Examples ready to convert

Gradient Hero Section

Split Hero (2 Columns)

Services Card Grid

Feature List with Checkmarks

Pricing Table (2 Plans)

Featured Single Plan

Footer with Columns

Footer with Newsletter

Contact Form

Newsletter Signup

Testimonial Cards

Featured Blockquote

Stats with CSS

KPI Cards (Light Background)

Have your own HTML?