L-133Layout

Echo Hero Section

Full-width landing hero built as a plain, fully editable Etch tree: backdrop layer (pulsing concentric rings / photo / looping video / animated gradient sweep / drifting canvas particles) behind a section > container > e…

Get this with ProIncluded in your plan

50 sites for €79 only, Compare all plans

Preview Desktop, 1280px

The system behind it

One pattern, your whole brand.

Echo Hero Section reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.

Type: Layout
Category: Hero
Responsive: Desktop to phone
Works with: Etch, ACSS, plain CSS

Options 6

Set on the section, in Etch’s attributes panel. No code needed.

data-layout

centeredsplitfull-bleed

centred stack, text-start with a framed "echo" preview panel, or a wide edge-to-edge headline

data-bg

ringsimagevideogradientparticles

backdrop: concentric echo rings pulsing outward (the 3D/WebGL-style signature default), a photograph, a looping muted video, an animated two-tone gradient sweep, or a dr…

data-entrance

risefadezoom

the style every content row animates in with on page load

data-entrance-delay

numberdefault 90

ms between each staggered row

data-parallax

truefalse

backdrop and visual panel drift opposite the scroll direction

data-theme

lightdark

re-themes the whole hero