My demo page will be using the Hongkiat\u2019s CSS Equal Height demo<\/a> as an example. It will guide you through all the key aspects of the demo page interface. Check out the demo link below to see what we will be making.<\/p>\n I do not want want to focus much on the HTML or CSS because this is all relative to your own page. However there is something I want to point out in using Intro.js (which I did not do in this tutorial). Basically you have 2 different options for setting up the various \u201csteps\u201d of the tour. These steps may be hard-coded into a JavaScript array <\/strong>as I have done, or you may append HTML attributes onto the various elements<\/strong> in your page.<\/p>\n Here is an example from the main plugin\u2019s demo page:<\/p>\n data-step<\/strong> signifies which numerical step should be used while data-intro<\/strong> will hold the text to be displayed in the tooltip.<\/p>\n I prefer to keep this stuff inside JS variables instead because it makes the HTML cleaner, plus all the important codes are located in one file<\/strong> rather than scattered throughout different page elements.<\/p>\n But if you just want to test the waters you may use this easier technique with HTML5 data attributes.<\/p>\n Now my document head also contains scripts related to the original Hongkiat demo page. I don\u2019t need to delve any further into these styles since they do not affect the tour in any way. But it is important to note that we need a copy of jQuery as a dependency<\/strong>, along with introjs.css<\/strong> and intro.js<\/strong>.<\/p>\n All of these files will come packaged with the plugin download off Github<\/a>.<\/p>\n Originally the introjs.css file contains a number of helpful default styles for your tooltip effects. These may be overwritten in your own stylesheet if you have a distinct look and feel to the page. All I have edited is the font size to make the letters bigger with a taller line-height property.<\/p>\n These other alternate styles are only important for creating a tour button <\/strong>found in the lower-right hand corner of the page. This displays only once<\/strong> after the user initially visits the page and offers a brief tour<\/strong>, if needed. For my demo the guided page tour will start automatically, but some users would rather setup a tour button instead.<\/p>\n There is not a whole bunch of difficult JavaScript to understand but the syntax is rigorous when you are unfamiliar with the language. I will break it down into block sections; that way it\u2019ll be easier to understand. Please note all of these codes are contained at the bottom of my HTML page<\/strong>.<\/p>\n However you could make a separate JS file to segregate codes<\/strong> if that is easier.<\/p>\n First we setup an important variable related to the tour feature. We make a new tour variable named introguide<\/strong> which calls the main introJS plugin function. The startbtn variable can be used for setting up a related tour button in the page. Afterwards we need to setup a large index containing each tour\u2019s step(s), targeted element, and tooltip content.<\/strong><\/p>\n Notice this data is setup by calling introguide.setOptions({})<\/strong> which is an inner function of the plugin. We pass an array set with the list of steps for our guided tour. The elements may be any typical jQuery selector although classes are often not recommended unless you only have 1 on the page.<\/p>\n The position value is also available using data-position<\/strong> but it will default out to the bottom. I am including this key in each step merely for clarity.<\/p>\n The only line of code we need is to call introguide.start()<\/strong>. This may be kept inside an event handler which triggers only after the user clicks on a link or button. However it\u2019s not a requirement, and the tour can initiate right after the DOM finishes loading.<\/p>\n There are callback functions to use whenever the tour finishes, and we can use these callbacks to re-show the button if needed<\/strong>. I have these codes commented out for this demo but you should know these callback methods are available to run any JS codes after the tour finishes, or after the user exits the tour at some point.<\/p>\n I really like the Intro.js plugin because documentation is straightforward and easy to understand. This can work in almost any webpage using jQuery as an included library. I like this example running over the Hongkiat demo layout because it shows exactly what is possible in a typical website tour. I would advise everyone interested in this technique to keep your eyes open!<\/p>\n Plenty of new social networks and startups are using guided tours, and when you find such examples online they can be immensely beneficial when crafting your own website tours.<\/p>\n Although my personal preference leans towards Intro.js I cannot say this is the absolute best solution. There are so many other alternative website tour plugins<\/strong> which are worth mentioning in this article. Check out the small list below where I have compiled a roundup of related JS tour plugins which may be useful to developers.<\/p>\n A guided website tour can provide so much benefit to your new startup or redesigned layout. Usability is crucial for the successful performance of any website. And a guided webpage tour is an exceptional method to build up comfort using any layout. I hope this tutorial may offer a peek into the wonders of Intro.js and building guided tours for your users.<\/p>\n If I have glossed over any confusing topics or if you have furt\n her ideas please share with us in the post discussion area below.<\/strong><\/p>","protected":false},"excerpt":{"rendered":" There are numerous plugins for creating your own guided website tour. This animated page effect is very useful to new visitors who are just learning the ropes of your website layout. How do they know all the important interface features and menu links? By using a guided tour it is easy to explain all of…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,4117,911,286],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n\n
Getting Started<\/h2>\n
<h1 data-step=\"1\" data-intro=\"Hello all! :) This project's called Intro.js.\">Intro<span style=\"font-weight: normal;\">.js<\/span><\/h1>\r\n<\/pre>\n
<!doctype html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\">\r\n<title>jQuery Live Demo Tour - CSS Equal Height on Hongkiat.com<\/title>\r\n<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js\"><\/script>\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\">\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/demo-style.css\">\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/introjs.css\">\r\n<script type=\"text\/javascript\" src=\"js\/nav.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/intro.js\"><\/script>\r\n<\/head>\r\n<\/pre>\n
Tiny CSS Updates<\/h2>\n
#tourbtn {\r\n position: fixed;\r\n right: 15px;\r\n bottom: 35px;\r\n}\r\n#tourbtn a {\r\n background: #bac081;\r\n padding: 8px 15px;\r\n font-size: 12px;\r\n line-height: 22px;\r\n font-weight: bold;\r\n color: #454a50;\r\n text-decoration: none;\r\n -webkit-border-radius: 4px;\r\n -moz-border-radius: 4px;\r\n border-radius: 4px;\r\n}\r\n#tourbtn a:hover {\r\n background: #cacf96;\r\n}<\/pre>\njQuery Codes with Intro.js<\/h2>\n
$(function(){\r\n var introguide = introJs();\r\n \/\/ var startbtn = $('#startdemotour');\r\n}<\/pre>\n\r\nintroguide.setOptions({\r\n steps: [\r\n {\r\n element: '.nav-bar',\r\n intro: 'This guided tour will explain the Hongkiat demo page interface.<br><br>Use the arrow keys for navigation or hit ESC to exit the tour immediately.',\r\n position: 'bottom'\r\n },\r\n {\r\n element: '.nav-logo',\r\n intro: 'Click this main logo to view a list of all Hongkiat demos.',\r\n position: 'bottom'\r\n },\r\n {\r\n element: '.nav-title',\r\n intro: 'Hover over each title to display a longer description.',\r\n position: 'bottom'\r\n },\r\n {\r\n element: '.readtutorial a',\r\n intro: 'Click this orange button to view the tutorial article in a new tab.',\r\n position: 'right'\r\n },\r\n {\r\n element: '.nav-menu',\r\n intro: \"Each demo will link to the previous & next entries.\",\r\n position: 'bottom'\r\n }\r\n ]\r\n});<\/pre>\n\r\nintroguide.start();\r\n\/**\r\n startbtn.on('click', function(e){\r\n e.preventDefault();\r\n introguide.start();\r\n $(this).hide();\r\n });\r\n \r\n * oncomplete re-display the button\r\n * hide by default since we don't need this functionality.\r\n introguide.oncomplete(function() {\r\n if(startbtn.css('display') == 'none') {\r\n startbtn.show();\r\n }\r\n });\r\n introguide.onexit(function() {\r\n if(startbtn.css('display') == 'none') {\r\n startbtn.show();\r\n }\r\n }); \r\n**\/<\/pre>\n![\"demo](\"https:\/\/assets.hongkiat.com\/uploads\/introjs-step-by-step-guide-tutorial\/guided-tour-preview-highlights-readmore.jpg\")
<\/p>\n\n
Related Libraries<\/h2>\n
\n
Final Thoughts<\/h2>\n