Built-in Template Tour Setup

Responsive product tour setup

Sticky Note Responsive Tour
Support for Allwebco tour web templates. See the help page included with your template download for the correct support links and setup info.

Setting up the tour
Edit the 6 tour HTML pages included with your download like any other HTML page. Images are located in the picts folder. Hover over any image to view the size.

Tour menu limits
The tour menu (menu-tour.js) includes 6 tabs. You can have 8 tabs, but if you add more than 8 or change the numbers to text, the buttons will wrap to the next line. The "Next" button is edited in each HTML tour page.

Adding another page to the tour
Follow these steps:
  1. Make a copy of "tour-6.htm". Rename it "tour-7.htm".
  2. Edit the "menu-tour.js". Copy and paste the last link. Edit the link so it links to the "tour-7.htm".
  3. Create an new image. Name it "tour-7.jpg" and place it inside the "picts" folder.
  4. Edit the "tour-7.htm". Change the image name to "tour-7.jpg".
  5. Edit the next button in the "tour-6.htm" page to link to "tour-7.htm". Edit the text from "Restart" to "Next >". The html code > is a right arrow. Do not use an actual > in your code.

Adding another tour
Follow these steps:
  1. Make a copy of the 6 "tour-?.htm" pages. Give them new names like "tour-1-b.htm" through "tour-6-b.htm".
  2. Make a copy of the "menu-tour.js". Rename it "menu-tour-b.js".
  3. Edit the "menu-tour-b.js" and change the links to your 6 new tour page names.
  4. Do 3 edits in each "tour-?-b.htm" page. Change the next button link, change the image name, and change the menu code to your new menu-tour .js name.
  5. Create new images for each page and place them in the "picts" folder.
  6. Add links to your new "tour-1-b.htm" in your menus, footer and site map page.

Replace / remove sound
Sound included with Allwebco Design tour templates are royalty free clips from Square Peach Music and more styles are available. No usage fees are required to use the included sounds on your website.

To replace the sound, replace 2 files for each tour page in the "sounds" folder. An mp3 and an ogg file. The ogg is used for browsers that do not support mp3. There are many free ogg converters available if you search at Google.

To remove the sound, delete the code between the "START AUDIO CODE" and "END AUDIO CODE" notes in each tour page.

Adding a video to a tour page
Open any video page included with the template. Select and copy the code between the notes "YOUTUBE VIDEO" and "END YOUTUBE VIDEO". Paste the code into any tour page in the spot you want the video to display. See your help.html to edit the code to display your Youtube video.

Tour fonts and colors
Edit the "style.css". All css for the tours will be in the section "/* TOUR STYLES */". Because it's a responsive application, the "media-queries.css" may also have multiple tour sections that are used for different screen sizes.

Related Topics:
Responsive HTML popup webpage