Dark call-to-action band
A dark rounded band with a headline and supporting line on the left and one button on the right.
When to use it
The block that belongs at the bottom of almost every page, and the one most worth keeping in a reusable library because you will paste it forty times. It is a single flex row that becomes a stacked block on phones. Keep the copy to one promise and one action — a call-to-action band with two competing buttons converts worse on the page and converts messier in the editor, since the buttons end up in separate wrappers.
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 outer padding wrapper
- Container (flex row) × 1 — the dark band
- Container × 1 — the text column
- Heading × 1
- Text Editor × 1
- Button × 1
Things worth knowing
- Below 760px the flex row becomes a block and the button drops underneath. That rule is written into Elementor’s responsive fields, so you can tune it in the panel.
- The band has its own radius and background, which means you can paste it inside an existing page section without it fighting the surrounding layout.
- Keep the button text under about five words. Long button labels wrap and the row height jumps on tablet widths.
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>Dark call-to-action band</title>
<style>
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f2f5f8}
.outer{max-width:1120px;margin:0 auto;padding:44px 22px}
.cta{padding:48px 40px;background:#14233a;color:#fff;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:28px}
h2{font-size:32px;line-height:1.2;letter-spacing:-.03em;margin:0 0 10px}
.cta p{margin:0;color:#b9c7d8;line-height:1.75;font-size:15px}
.button{display:inline-block;padding:15px 28px;background:#ff5b35;color:#fff;text-decoration:none;border-radius:9px;font-weight:800;white-space:nowrap}
@media(max-width:760px){.cta{display:block;padding:34px 24px}.button{margin-top:22px}h2{font-size:25px}}
</style>
</head>
<body>
<div class="outer">
<section class="cta">
<div>
<h2>Convert your first page in about a minute</h2>
<p>Paste the HTML, pick native components, copy the result into Elementor. Nothing is uploaded.</p>
</div>
<a class="button" href="#start">Open the converter</a>
</section>
</div>
</body>
</html>