Alternating content rows
Two stacked rows that swap sides — text and a visual panel, then a visual panel and text.
When to use it
The section you reach for when one feature needs a paragraph rather than a card. Because each row is its own two-column grid, the alternation survives conversion as a real order value rather than a CSS trick — which matters, since a client editing the page later will expect to be able to drag the columns around. Stack two or three of these between a hero and a call to action and the page reads as an argument instead of 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 × 1 — the section
- Container (grid, 2 columns) × 2 — one per row
- Heading × 2
- Text Editor × 2
- Container × 2 — the visual panels
Things worth knowing
- The second row swaps sides with an order value on the grid children rather than a float or a direction reversal, so the swap arrives as an editable Elementor order setting.
- Replace each gradient panel with an Image widget once you have the real asset. The panel keeps its radius and min-height, so the layout does not jump when you do.
- Below 780px both rows collapse to a single column and the text always comes first — check this after import, because a reversed row is the classic place a converted page reads wrong on mobile.
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>Alternating content rows</title>
<style>
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#fff;color:#14233a}
.wrap{max-width:1120px;margin:0 auto;padding:70px 22px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:56px}
.row:last-child{margin-bottom:0}
h2{font-size:32px;letter-spacing:-.025em;margin:0 0 14px}
.row p{margin:0;color:#5b6b82;line-height:1.85;font-size:15.5px}
.panel{min-height:280px;border-radius:16px;display:grid;place-items:center;color:#fff;text-align:center;padding:24px;font-size:14px;line-height:1.7}
.a{background:linear-gradient(135deg,#1d3454,#4a688c)}
.b{background:linear-gradient(135deg,#7a4630,#c07b4e)}
.swap{order:-1}
@media(max-width:780px){.row{grid-template-columns:1fr;gap:26px;margin-bottom:42px}.swap{order:0}h2{font-size:26px}}
</style>
</head>
<body>
<section class="wrap">
<div class="row">
<div>
<h2>Read the page, not the stylesheet</h2>
<p>Cascade order, media queries and utility classes mean the rule you find in a CSS file is rarely the value the browser paints. Rendering the page first and reading computed styles is why framework markup survives instead of arriving unstyled.</p>
</div>
<div class="panel a">Visual panel — replace with an Image widget</div>
</div>
<div class="row">
<div class="panel b swap">Visual panel — replace with an Image widget</div>
<div>
<h2>Collapse the wrappers nobody needs</h2>
<p>A normal page is full of divs that carry no visual meaning. Copied one to one they become an Elementor tree ten containers deep. Wrappers with no styling effect are folded away; the ones that genuinely hold padding, a background or a shadow are kept.</p>
</div>
</div>
</section>
</body>
</html>