Master
&
Steps
Tour
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
Welcome!
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.
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.
✓ Scroll into view — the page travels to each step with an eased motion. Set it from instant to slow, or leave it in the middle for a natural pace.
✓ Start on view — the tour waits until the first step is fully visible, so it never runs off-screen while the visitor is still reading further up.
✓ Only from a link — no automatic start at all: the tour runs for the people you send it to, and stays invisible to everyone else.
✓ Hide on small screens — set a minimum width and the tour simply won't run below it, on phones or narrow windows.
ⓘ 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.
✓ Expiry days — how long the count is remembered. When it runs out, the counter resets and the visitor is eligible again.
✓ Max shows — how many times the tour is allowed to start. One is usually enough.
✓ Cookie name — give each tour its own key, so pages with different tours don't overwrite each other.
ⓘ 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.
✓ Separator word — change "of" to any word you like, so the counter speaks your visitors' language.
✓ Size — inherits the notice description style, with its own size control.
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.
✓ Style the whole tour without leaving the editor.
ⓘ 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 — theme color, opacity and a fade-in from fast to slow. Add a backdrop blur for a glass effect.
✓ Border — three styles, a choice of widths, color and opacity, all following your theme.
✓ Glow — a colored shadow around the border, with its own color and opacity. Combined with the pulse, the glow breathes with it.
✓ Pulse — decide how many times it beats and how fast, from a single soft flash to a continuous heartbeat. It restarts on every step.
ⓘ 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.
✓ Fluid width — min and max instead of a fixed value. Set them to the same number for a fixed panel.
✓ Arrow — turn it off when the entry animation rotates the notice, and it reads as a panel instead.
✓ Button labels — Next, Back and Done are all editable, so the tour speaks your visitors' language.
✓ Several entry animations — Fade, Fade Smooth, Zoom In, Zoom Out, Slide Up, Slide Down, Tilt Left, Tilt Right, Tilt Up, Tilt Down, Open Flap Top, Open Flap Bottom, Open Flap Left, Open Flap Right, Pulse In, Pulse Out, Bounce, Tada.
ⓘ 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.
✓ Keys work only while the tour is running: outside it, the page behaves normally.
✓ Worth telling your visitors — add a short line like "Next: ↓ → & space bar | Back: ↑ ←" to your first Step, or wherever you invite them to start the tour.
ⓘ 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.
✓ The description keeps your line breaks, so you can write short paragraphs.
ⓘ 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.
✓ Always runs, a linked tour ignores the view limit, so support can send the same link again months later and it still works.
✓ Self-cleaning, the keyword disappears from the address bar the moment the tour starts, so it never ends up in a bookmark or a shared URL.
✓ Its own message, replace the title and text of that Step for visitors arriving from the link, and the same tour opens with the right words for the right context.
✓ Works with any trigger, or on its own, set the Master to "Only from a link" and the tour stops running by itself: each Step becomes a target you hand out.
✓ Free to leave in place, a keyword nobody uses does nothing at all. Give every Step one while you build, and they're ready the day you need them.
ⓘ 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®