Master
&
Steps
Tour
Compatible with the Elements AI assistant
Component
Intro
Tour turns your page into a guided walkthrough. Highlight one element at a time, dim everything around it, and let a notice explain what your visitor is looking at — a button, a form, a section, anything you place inside a Step. Add as many Steps as you need and they run in the order they appear on the page. Every part is yours to style: the dimming, the highlight border and its glow, the notice, the buttons. And when the tour moves on, the page scrolls to the next element on its own.
No keyword in the URL → the tour starts from the beginning
A Step keyword in the URL → the tour opens on that Step and carries on from there, with Back available. That Step can show a different title and text when reached this way.
Only from a link → only the Step named in the URL opens, with a single closing button. Every Step can have its own keyword.
AI ready
Fully compatible with the Elements AI Assistant. Every option now carries a clear, plain-language description.
The AI knows how the Master and the Steps work together: it adds the Master, wraps each block in a Step and writes the notices.
You can also ask it which elements deserve a Step: it reads the page, picks the key points and builds the whole tour in one go, ready for you to fine-tune.
Example: "Add a tour to this page with a Step on the pricing table and one on the signup form, and give the form a link I can email with a personal message."
Welcome!
Master Style
Sets every style and behaviour for the whole tour. One per page.
Start Tour
This is where you decide when the tour begins, how it travels, and where it should stay out of the way. Several triggers cover the usual cases: start after a delay, wait until the first step scrolls into view, let the visitor open it with a click or a hover, or reserve it entirely for people arriving from your link. From there the tour moves on its own, scrolling the page to each element at the speed you set.
ⓘ With the click and hover triggers, the visitor acts on the content inside the first Step.
Duration
How often a visitor gets the tour. A single cookie counts how many times it has started: set the expiry in days and the maximum views, and the tour retires itself once the visitor has had it. Leave the expiry at zero and no cookie is written — the tour runs every time, which is what you want while building, not when you publish.
ⓘ The count is recorded when the tour starts, not when it finishes. A visitor who closes it halfway has still had their turn.
Step Counter
A small line in the corner of the notice telling visitors where they are: 3 of 4. It costs nothing and it answers the question everyone asks halfway through — how much longer is this. The total counts itself, so adding or removing a Step never leaves a wrong number behind.
Preview
See how your tour will look while you build it. Turn Preview on and the highlight and notice appear on the canvas with your styling applied — colors, radius, shadow, spacing, labels, animations — updating as you change them.
ⓘ Editor only, never exported.
Highlight
This is what makes a tour a tour: everything fades back except the one thing you're talking about. Two independent layers do the work. The overlay dims the rest of the page, with your color, opacity, fade-in and an optional blur. The border traces the element itself — solid, dashed or dotted, with a colored glow and a pulse that draws the eye without shouting.
ⓘ Overlay and border are independent, and any single Step can override either one.
Notice Style
One style, applied to every notice in the tour. The panel is fluid rather than fixed: set a minimum and maximum width and each notice takes only the space its text needs, staying within your limits.
Align it left, centre or right against the highlighted element, set padding, corner radius, shadow, background and text color, and decide whether the arrow points at the element or the notice reads as a plain panel. The buttons have their own set: labels, size, radius, and separate colors for normal and hover states.
ⓘ The animation plays when the notice arrives, after the page has finished scrolling.
Notice Text
Full typographic control for the notice, with a separate set for the title and the description: font, size, color, weight, letter spacing, line height, italic and case — the standard Elements text controls, responsive per breakpoint in Theme Studio.
✓ Title and description are styled independently.
Keyboard
Turn it on and the tour can be driven from the keyboard, with the keys you'd reach for anyway: down and right to move forward, up and left to go back, the space bar to advance. Esc closes the tour at any point, and works whether this option is on or off. Try it once and it becomes the natural way to run through a tour — no cursor to move, no button to aim at, just one key between you and the next step.
ⓘ Esc is always active, even with keyboard navigation off.
Advanced
✓ add custom Tailwind or utility classes for advanced layout control.
Z-index: raise it if a sticky header or a fixed element sits in front of the tour.
Step
One per element, as many as you need. Each takes its look from the Master.
Notice Content
The text for this step: a title and a description, written straight into the inspector. Neither appears on your page — the tour reads them and shows them in the notice when the step comes up. The title can be switched off entirely for steps that only need a line of text.
ⓘ Styling comes from the Master: here you only write the content.
Start from a link
Give any Step its own keyword and a URL opens the tour right there. Send yoursite.com/?pricing and whoever follows it lands on that element, scrolled into view and explained; everyone else sees the page as normal.
It's the difference between a tour that interrupts and a tour that was asked for: support can answer a ticket with a link that shows the answer instead of describing it, a welcome email can drop new customers on the exact setting they asked about, a campaign can land people on a product and explain it while they're looking at it. Because the keyword lives on the Step, one page can hold as many entry points as it has Steps.
ⓘ Pick keywords that never appear in your normal page URLs, and a different one on every Step.
Exceptions
Two overrides for this step alone: the overlay and the border. Leave them on Inherit and the step follows the Master; switch either one on or off to break the pattern where it matters.
✓ Everything else — colors, animations, buttons — always comes from the Master.
Position
Which side of the element this notice prefers: above or below. If there isn't room, it flips to the other side on its own.
Advanced
✓ add custom Tailwind or utility classes for advanced layout control.
ⓘ Built for Elements 3, using Tailwind 4's color system. ✓ Adapts automatically to dark mode.
Demo file included ready to use styles
The project includes ready-to-use tours built for real situations: a contact form that explains its own fields, a support page, a checkout, a first visit to a dashboard. Every example is ready to use — replace the text with yours and the tour is done.
ⓘ Once installed, you’ll find the demo project in the available projects panel when creating a new one.
Made with Elements®