¡Cotiza Seguros GNP!

¡En Auto Seguro Ahorra hasta $4,200!

Cotiza fácil en GNP Seguros
Datos tu Auto
Datos Personales

Wizards

The Wizards element uses the jQuery Steps plugin and is especially useful for user onboarding, data collection, signups and more.


Explore all of Stack’s modular elements
at the Element Index Page →

Basic Wizard Markup

The Wizards element in Stack uses the jQuery Steps plugin. This plugin offers advanced wizard functionality and is ideal for developers who require multi-part onboarding, signup, tutorial processes and more.

Included here is a basic example of how to create a Wizard on your page. For more advanced examples, including form validation, see the plugin examples here: jQuery Steps by Rafael Staib

The basic layout for the Wizard requires parent .wizard element which houses h5 elements that serve as the title for each panel in the wizard and section elements which house the content for each panel. This is demonstrated in the markup snippet below:

Note: The elements in this page are currently available to Visual Composer only (not Variant)
×
[stack_wizard][stack_wizard_content title=”Intro”]

Welcome to the Wizard, using jQuery Steps

[/stack_wizard_content][stack_wizard_content title=”Navigation”]

Navigate the steps using your keyboard arrows

[/stack_wizard_content][stack_wizard_content title=”Finish”]

Use Wizards for onboarding, form data collection and more

[/stack_wizard_content][/stack_wizard]

Platiquemos
¡Hola Bienvenido! Estamos para apoyarte, ¿Qué necesitas?

Te asesoramos con Seguros GNP, compara precios y coberturas que se ajusten a tus necesidades.