Skip to content
C-130Component

Guided Spotlight Tour

Product-tour demo built as a plain, fully editable Etch tree: section > container > header (eyebrow, h2, intro) > tour stage (a mock app frame — sidebar nav, topbar with an Invite button, three content cards) with a dimm…

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.

Guided Spotlight Tour 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
Component
Category
Interactive
Responsive
Desktop to phone
Works with
Etch, ACSS, plain CSS

Options 9

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

data-theme
lightdark

re-themes the whole section

data-autoplay
truefalse

data-delay
number

ms

data-loop
truefalse;

restarts from step 1 after the last step instead of finishing

data-dim
numberdefault 0.6

0-1; darkness of the overlay outside the spotlight

data-spotlight-shape
circleroundedrect

data-progress
dotsfractionnone

data-skip
truefalse;

show the Skip / close button

data-restart
truefalse;

show a Replay tour button once the tour finishes or is skipped

Component props 1

Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.

Tour Step4 in this pattern · 4 props
PropTypeDefault
title
text

Your dashboard, redesigned

description
text

Every project, every teammate, one screen that finally makes sense at…

target
text

dashboard

placement
text

right

Included in Pro From €39 a year, with all 469 patterns.

Get Pro

More patterns

Keep browsing.

L-000

Quick View

Desktop, 1440px
Pro
demo.etchedy.com

The real preview of this pattern. Every pattern adapts to your ACSS tokens.

Unlock with ProSee plansIncluded in your plan