How to Add Guides and Styling in Demoboost 2.0

Demoboost Tours 2.0 do not mix with Tours 1.0 (the old version), and the screens you create with it will only be compatible with other 2.0 screens.

Everything you do with Tours 2.0 beta is available as a separate section of the menu.

Step 1: Select ‘Tours 2.0’ and open the demo in the editor.

Step 2: Click on the element you'd like to pin the guide to, and select the ‘Guide’ button from the menu that appears.

Step 3: Select the guide type. 

There are two types of guides - Posts and Pointers: 

• Posts are full-screen guides that are shown in the middle of the screen. They're useful for welcome messages and when transitioning between different "chapters" of the demo.
• Pointers are pinned to specific elements. They're useful for explaining the purpose of the element and can be used to direct the attention of the viewer to the most important elements.

Step 4: Type in the text for your guide and adjust the formatting as needed. You can also change the order of the guide if necessary. By default, they appear in the order they are added.

Save the guide when you're done.

Step 5: The guide has been added, and this badge showcases where it is.

But there’s more! We’ve got a bonus feature to make your work with guides easier. Click on the badge to check it out.

‍

Step 6: Clicking on the badge opens a preview of the guide right in the editor! 

Now, you won’t need to open the screen preview in a separate tab every time you check changes.

You can delete the guide here, open the guide editor to change the formatting, text, or position, etc., and manage all guides on this screen by clicking 'Manage guides'.

Step 7:

Clicking on 'Manage guides' opens a side panel where you can:

• drag and drop the guides to reorder them,
• delete the guides you don't need,
• or choose which guide to edit.

Just hover over the guides to see the buttons.

Step 8:

You can also choose to remove all guides from the screen by selecting ‘Remove all guides’ 

This is particularly useful when you've copied a screen from another demo, but need to make completely different guides from scratch.

Step 9:

Close the side menu when you're done and save the screen.