Heroes
Hero with a checked benefit list
Opening section that pairs the headline with three ticked benefit lines, a button and a side note card.
When to use it
Use this when the headline alone does not carry enough information — three ticked lines let a visitor scan the offer without scrolling. The list is deliberately built as a plain div with one div per row rather than a <ul>, because that is the shape the converter recognises as an Icon List. The result is one widget your client can reorder and restyle, instead of three unrelated text blocks that only look like a list.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container (grid, 2 columns) × 1
- Heading × 1
- Text Editor × 1 — the lead paragraph
- Icon List × 1 — all three rows as one editable widget
- Button × 1
- Container (card) × 1 — with Heading and Text Editor inside
Things worth knowing
- Choose “match the Elementor icon library” in the Icons option. The Icon List mapping only runs in that mode; otherwise the rows convert as ordinary text.
- The ticks are plain ✓ characters, not inline SVG and not an external icon font. The converter maps ✓ to fa-check, so the icons stay swappable in Elementor and nothing depends on a stylesheet that would be stripped anyway.
- The rows are divs, not <ul><li>. A list element is not treated as a layout container, so the same content inside a <ul> would arrive as separate text widgets.
- Keep it to three or four rows. Beyond that the hero stops being scannable and the content belongs in its own section.
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>Hero with a checked benefit list</title>
<style>
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#14233a;background:#fff}
.hero{max-width:1140px;margin:0 auto;padding:80px 24px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
h1{font-size:46px;line-height:1.1;letter-spacing:-.03em;margin:0 0 16px}
.lead{font-size:16.5px;line-height:1.85;color:#5b6b82;margin:0 0 26px}
.checks{display:flex;flex-direction:column;gap:14px;margin:0 0 30px}
.checks > div{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;line-height:1.7;color:#243a56}
.tick{color:#1a9c6b;font-size:18px;line-height:1.5}
.button{display:inline-block;padding:15px 28px;border-radius:9px;background:#14233a;color:#fff;text-decoration:none;font-weight:700}
.card{padding:34px;border:1px solid #e3e9f1;border-radius:18px;background:#f7f9fc;box-shadow:0 18px 44px rgba(18,35,57,.07)}
.card h2{margin:0 0 10px;font-size:20px}
.card p{margin:0;color:#66758a;line-height:1.8;font-size:14.5px}
@media(max-width:780px){.hero{grid-template-columns:1fr;padding:54px 20px;gap:34px}h1{font-size:33px}}
</style>
</head>
<body>
<main class="hero">
<section>
<h1>Everything you already built, now editable</h1>
<p class="lead">Bring an existing page into Elementor without pasting it into a code block or rebuilding it section by section.</p>
<div class="checks">
<div><span class="tick">✓</span><span>Headings, text, images and buttons become native widgets</span></div>
<div><span class="tick">✓</span><span>Spacing, colours and typography land on real controls</span></div>
<div><span class="tick">✓</span><span>Responsive values written per breakpoint, not guessed</span></div>
</div>
<a class="button" href="#start">Try it with your own page</a>
</section>
<aside class="card">
<h2>Before you convert</h2>
<p>Inline your CSS or keep it in a style block, upload images to the Media Library first, and use semantic tags. Those three habits account for most of the difference between a clean conversion and a messy one.</p>
</aside>
</main>
</body>
</html>