Split hero with image panel
Two-column opening section: headline and buttons on the left, a visual panel on the right.
When to use it
The default opening for a product or service landing page, and the layout most often handed over as a design export. It converts cleanly because the structure is honest: one grid parent with two children, not six nested wrappers. Use it when you have a real product image to drop in — the gradient panel is a placeholder that survives conversion as a styled Container, so you can swap it for an Image widget afterwards without rebuilding the column.
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 — the outer <main>
- Container × 2 — the left text column and the right panel
- Text Editor × 2 — the eyebrow line and the lead paragraph
- Heading × 1 — the H1
- Button × 2 — primary (background) and secondary (border)
Things worth knowing
- Both buttons qualify as real Button widgets because each has a background or a border and short text. A plain text link would arrive as a Text Editor instead.
- The two-column grid collapses to one column below 760px, and that breakpoint is written into Elementor’s own responsive fields — you adjust it in the panel, not in CSS.
- Button hover states cannot be read from static HTML. Set them in Elementor after import.
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>Split hero with image panel</title>
<style>
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#14233a;background:#f6f8fb}
.hero{max-width:1180px;margin:0 auto;padding:78px 24px;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.eyebrow{color:#ff5b35;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;margin:0 0 14px}
h1{font-size:52px;line-height:1.06;letter-spacing:-.03em;margin:0 0 18px;color:#0f1d33}
.lead{font-size:17px;line-height:1.8;color:#5b6b82;margin:0 0 30px}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.button{display:inline-block;padding:14px 24px;border-radius:9px;text-decoration:none;font-weight:700;font-size:15px}
.primary{background:#ff5b35;color:#fff}
.secondary{border:1px solid #cfd8e5;color:#14233a;background:#fff}
.panel{min-height:360px;border-radius:18px;background:linear-gradient(135deg,#16273f,#41597a);display:grid;place-items:center;color:#fff;text-align:center;padding:28px}
.panel strong{display:block;font-size:22px;margin-bottom:8px}
.panel span{color:#d6e0ec;font-size:14px;line-height:1.7}
@media(max-width:760px){.hero{grid-template-columns:1fr;padding:52px 20px;gap:32px}h1{font-size:36px}}
</style>
</head>
<body>
<main class="hero">
<section>
<p class="eyebrow">Built for Elementor</p>
<h1>Ship the page you designed, not an approximation of it</h1>
<p class="lead">Keep the spacing, typography and layout you already have. Everything lands as native widgets you can still edit.</p>
<div class="actions">
<a class="button primary" href="#start">Start converting</a>
<a class="button secondary" href="#how">See how it works</a>
</div>
</section>
<section class="panel" aria-label="Product image placeholder">
<div><strong>Product image</strong><span>Swap this panel for an Image widget after import</span></div>
</section>
</main>
</body>
</html>