How to make Step-By-Step Guide Using Intro.js

demo tour preview plugin highlights steps introjs

Hello friends today we gonna learn about How to make Step-By-Step Guide Using Intro.js. So read this article, How to make Step-By-Step Guide Using Intro.js step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to make Step-By-Step Guide Using Intro.js

There are tons of plugins to create your own guided website tour. This animated page effect is very useful for first-time visitors who are just learning the ropes of your website layout. How do they know every important interface features and menu links? By taking a guided tour, these are all easy to explain features for users who are interested.

I want to focus on this tutorial on an open source jQuery plugin called Intro.js. I really like this choice because of the page dimming feature, also the easy customization of CSS to change the appearance of the tooltip. The dependencies are also simple with a requirement for jQuery and the plugin’s own custom CSS / JS files. If you are familiar with jQuery, it is very easy to get this plugin up and running in 30-60 minutes of development time.

My demo page will use CompsmagCSS Equal Height demo as an example. It will guide walk you through all the important aspects of the demo page interface. Check out the demo link below to see what we’ll be making.

back to menu ↑

To start

I don’t want to pay much attention to the HTML or CSS because this is all relative to your own page. However, there is something I would like to point out when using Intro.js (which I did not do in this tutorialBasically you have 2 different settings up the different “steps” of the tour. These steps can be hard coded in a JavaScript array as I’ve done, or you may add HTML attributes to the different elements on your page.

Here’s an example from the main plugin’s demo page:

Intro . Js

data step indicates which numeric step to use while data intro contains the text to be displayed in the tooltip.

I prefer to keep this stuff in JS variables as it makes the HTML cleaner, plus all important codes are in one file instead of scattered across different page elements.

But if you just want to test the waters, you can use this simpler technique with HTML5 data attributes.

jQuery Live Demo Tour – CSS Equal Height at Hongkiat.com

Compsmag
Logo