Centered hero on a gradient
Single-column centered opening with an eyebrow badge, large headline, one button and a trust line.
When to use it
The simplest hero there is, and the one worth reaching for when the page has no image ready. Because there is only one column, nothing collapses at narrow widths and there is no responsive behaviour to check beyond font sizes. It is also the cheapest section to convert: fewer wrappers means a shallower Elementor tree, which matters more than people expect once a page has six or seven sections stacked on top of each other.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 1 — the full-width gradient section
- Container × 1 — the inner max-width wrapper
- Text Editor × 3 — the eyebrow badge, the lead paragraph and the trust line
- Heading × 1 — the H1
- Button × 1
Things worth knowing
- The gradient is a Container background, so it carries over as a real background setting rather than a flattened image.
- The inner max-width becomes Elementor’s content-width control, so the text column stays readable without extra CSS.
- If you add a second button later, put both inside one flex wrapper — the gap then stays a single control instead of two margins.
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>Centered hero on a gradient</title>
<style>
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#fff}
.hero{background:linear-gradient(135deg,#14233a 0%,#28405f 55%,#3a5b80 100%);padding:96px 24px;text-align:center}
.inner{max-width:760px;margin:0 auto}
.eyebrow{display:inline-block;padding:7px 15px;border-radius:999px;background:rgba(255,255,255,.12);color:#ffd9cd;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 22px}
h1{font-size:54px;line-height:1.06;letter-spacing:-.035em;margin:0 0 20px}
.lead{font-size:18px;line-height:1.8;color:#c8d5e5;margin:0 0 32px}
.button{display:inline-block;padding:16px 34px;border-radius:10px;background:#ff5b35;color:#fff;text-decoration:none;font-weight:800;font-size:16px}
.trust{margin:22px 0 0;font-size:13.5px;color:#9fb1c8}
@media(max-width:700px){.hero{padding:64px 20px}h1{font-size:34px}.lead{font-size:16px}}
</style>
</head>
<body>
<section class="hero">
<div class="inner">
<p class="eyebrow">No account needed</p>
<h1>Turn finished HTML into an editable Elementor page</h1>
<p class="lead">Paste your markup, pick native components, and paste the result straight into the editor. Your files stay in your browser.</p>
<a class="button" href="#start">Convert a page</a>
<p class="trust">Runs locally — nothing is uploaded</p>
</div>
</section>
</body>
</html>