How to Add Guides and Styling

Effortlessly kickstart your journey with our beginner-friendly guides!

Let’s look at how you can add a guide to a screen in Tours 2.0

‍

Step 1: ‍

Open the editor. First, click the respective button where you want to attach the guide. 

Step 2: ‍

It opens a small menu, where you choose the option to add a guide.

‍

Step 3:‍

You're creating a pointer guide -

a small popup attached to the product element you want to highlight in your demo.

Enter the text of the guide, And specify its title. If you don't want to have a title in your pointer guide, just enter a space in its place - this row will be removed after saving.

Go to settings to customize the guide further.

‍

‍

Step 4:

Choose the placement of your pointer guide in relation to the screen element. Always try to move the pointer away from corners.

Change the order in which this guide appears on the screen. The default order is set as you create guides one by one.

Check the order of all guides in 'Manage guides' if needed.

Set up background overlay if you want to highlight only the guide and it's attached element. 

Save settings and go back to text.

Click on 'Done' to save your guide.

‍

Step 5:

Clicking on the badge opens your pointer guide in preview.

‍

Use it to check the text formatting, to edit the guide further, Or to delete it from the storyboard.

‍

Step 6:

Now let's see behind the 'Guides' button here.

Here we can add a different type of a guide - a Post guide

‍

Step 7:

A post guide is a bigger text box that overlays the whole product screen, and usually conveys a bigger message. Often used at the start/end of the demo, and useful for complex explanations.

Here you can also add a title, or skip it by just adding a space, and enter the main text itself.

‍

Define the settings the post guide offers.

You can also change the guide order, or set up an overlay. 

Save changes before going back to the text, and click Done.

‍

Step 8:

After creating some guides, you might want to check what you have so far - not just the numbers, but the text as well. This is when you'll click to 'manage guides'

‍

In this storyboard you will see all the guides on this screen

Drag and drop guides to reorder them, or click to edit one of them further.

Remove all guides if you need to start with a clean slate.

Note that you can also access the 'Manage guides' section from the pointer guide badge, and when you define the guide settings.

‍

Save your screen at the end of guide editing.