Full pages
Service landing page
A complete campaign page: hero, problems grid, three-step process and a closing call to action.
When to use it
A full page you can put behind an ad and fill in, rather than a layout exercise. It has the four sections a service page actually needs and nothing else: what you offer, what it fixes, how it works, and what to do next. Convert it one section at a time using the copy root in the structure map — a four-section page imported in one action is hard to check, and if one block comes across wrong you end up redoing all of it.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 5 — one per section plus the inner panel
- Container (grid) × 3 — the hero split and two card grids
- Heading × 8 — section titles and card titles
- Text Editor × 9 — lead paragraphs and card bodies
- Button × 2
Things worth knowing
- The numbered steps use a CSS counter, and counters live in pseudo-elements that static markup cannot expose. The numbers will not come across — add them as text or use Elementor’s own numbering after import.
- Convert section by section with the copy root rather than importing the whole page at once. It takes the same total time and every step is verifiable.
- The hero is a two-column grid that collapses below 780px; check the stacked order on a phone before publishing.
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>Service landing page</title>
<style>
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#14233a;background:#fff}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:70px 0}
.hero{background:linear-gradient(135deg,#14233a,#2b4568);color:#fff}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:38px;align-items:center}
h1{font-size:50px;line-height:1.08;letter-spacing:-.035em;margin:0 0 18px}
h2{font-size:34px;letter-spacing:-.03em;margin:0 0 14px}
h3{font-size:18px;margin:0 0 8px}
p{line-height:1.8;color:#5b6b82}
.hero p{color:#c5d3e4}
.button{display:inline-block;padding:15px 26px;background:#ff5b35;color:#fff;text-decoration:none;border-radius:9px;font-weight:800}
.panel{background:#fff;border-radius:16px;padding:30px;color:#14233a}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{padding:26px;border:1px solid #e3e9f1;border-radius:13px;background:#fff}
.steps{counter-reset:step}
.steps .card:before{counter-increment:step;content:counter(step);width:30px;height:30px;display:grid;place-items:center;background:#ff5b35;color:#fff;border-radius:50%;font-weight:800;margin-bottom:12px}
.tint{background:#f6f8fb}
.center{text-align:center}
.center > p{max-width:660px;margin:0 auto 26px}
@media(max-width:780px){.hero .wrap,.grid{grid-template-columns:1fr}h1{font-size:34px}h2{font-size:27px}}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<div>
<h1>Get a practical plan for your next project</h1>
<p>Clear scope, fast replies and a delivery date you can hold someone to.</p>
<a class="button" href="#contact">Book a consultation</a>
</div>
<div class="panel">
<h2>What you receive</h2>
<p>A review of where the project stands, a written plan with a timeline, and a clear first step you can start on this week.</p>
</div>
</div>
</section>
<section>
<div class="wrap center">
<h2>Problems this solves</h2>
<p>Describe the situation your client is in before they contact you. Specific beats flattering.</p>
<div class="grid">
<article class="card"><h3>No clear scope</h3><p>Scattered requirements turned into an ordered plan with a first step.</p></article>
<article class="card"><h3>Slow replies</h3><p>One point of contact, and an answer inside a working day.</p></article>
<article class="card"><h3>Hard to compare</h3><p>Options written side by side so a decision takes minutes, not weeks.</p></article>
</div>
</div>
</section>
<section class="tint">
<div class="wrap">
<h2>How it works</h2>
<div class="grid steps">
<article class="card"><h3>Send the brief</h3><p>Tell us the goal and where things stand today.</p></article>
<article class="card"><h3>Get the plan</h3><p>A written proposal with scope, timeline and price.</p></article>
<article class="card"><h3>Start work</h3><p>Confirm the details and the first milestone begins.</p></article>
</div>
</div>
</section>
<section id="contact">
<div class="wrap center">
<h2>Ready to talk it through?</h2>
<p>Send a short message describing the project and you will get a reply with the next step.</p>
<a class="button" href="mailto:[email protected]">Contact us</a>
</div>
</section>
</body>
</html>