[New Component] TOUR, guide your visitors, one step at a time, ..and more

Hi everyone! I’m excited to present Tour, our new component designed to guide visitors through your Elements projects.

Tour turns your page into a guided walkthrough :link: Options and Features

tour_multithemes_002

:information_source: You can use also your :keyboard: keyboard ↑ ↓ ← β†’ or space bar to navigate (esc to quit)

This component is extremely versatile and features a dual purpose: it can be used either as a sequential multi-step guided tour, perfect for onboarding and walkthroughs, or as a standalone tool to target and highlight a single object, as you can see in the Multi-Target page

Jump to the banner:

tour_multithemes_006

Thanks to a spotlight effect that dims the background and flexible positioning controls, it allows you to instantly capture the user’s attention right where you want it.

Jump to the promo:

tour_multithemes_003

Key features:

  • Dual Mode: Use it as a multi-step guided tour or as a focused spotlight on a single element.
  • Advanced Spotlight: Elegantly dims the background to focus attention on the active target.
  • Flexible Positioning: Advanced placement controls for tooltips and cards (top, bottom, left, right, auto-fit).
  • Interactive Controls: Smooth navigation with Next, Back, Skip, and custom finish actions.
  • Custom Drop Zones: Easily embed images, icons, or custom Elements inside the tour boxes.
  • Accessibility: Built-in keyboard navigation and focus management support.
  • Tailwind Native: Full support for Tailwind utility classes for advanced styling without limits.
  • Responsive Controls: Fine-tune visibility and layout behavior across every breakpoint. ..and much more!
  • ↑ ↓ ← β†’ or space bar to navigate

List of use cases:

  • User Onboarding: Step-by-step walkthroughs for new sign-ups, introducing core dashboard features.
  • Layout & Interface Tours: Explaining complex website structures, navigation menus, or editorial layouts.
  • Feature Highlights: Spotlighting new updates or hidden tools when users log in after a release.
  • E-Commerce & Product Discovery: Pointing out crucial details (e.g., size guides, discounts, or configuration options) via single-target highlights.
  • Guided Form Completion: Helping users navigate multi-step checkouts or lengthy application forms with contextual tooltips.
  • Interactive E-Learning: Guiding students through digital learning tools, platform controls, or interactive modules.
  • Contextual Help & Support: Replacing static FAQ pages with an on-page tour that solves common user questions instantly. DEMO with Franck :grinning_face:

Rverything you see in the demos is included with the component: you can open the demo project, explore the different configurations, and integrate them directly into your work. Once installed, you will find the demo project in the available projects panel when creating a new one (expand the list with β€˜view all’, See all library items).

Compatibility note: TOUR is fully compatible with Elements V3 and includes all updates required for Tailwind 4.

Available in the marketplace Now in promo! :astonished_face:

Let me know what you think, and happy building :folded_hands:

thanks !

Congratulations :partying_face:
A really wow product! Nice

What a phantasmic idea :clap:

Thanks Mark :folded_hands:

:folded_hands: thanks Markus, It started as a simple tour and then it grew :grinning_face:

Very cool, this should help improve conversion rates on our sites. Well done.