Take a tour of the Visual Design Studio

Themes and layouts

Themes and layouts help you to manage your guide branding by giving Pendo Admins the ability to set up specific themes and layouts for guide creators to use.

Use themes to manage your guide styling by setting the format and style of the layouts and building blocks within guides. Use themes to give guide designers the default styling they need to create visually consistent guide content quickly. Guide designers can use layouts to style the look and feel of the guides consistently across the organization. For information about themes, see Manage guide styling with themes. For information about layouts, see Use guide layouts.

Action bar in the Visual Design Studio

When you open the Visual Design Studio, it launches on top of your application. The Visual Design Studio is accessible to any Pendo user, with the exception of those who have Read Only permissions.

The action bar appears at the top of the guide designer. It contains the following:

• The title of your guide in the top-left corner.
• The View Steps access tray in the middle of the action bar.
• Options and notifications in the top-right of the action bar:
  • Save Layout saves your guide as a new layout or to update an existing layout.
  • Activation allows you to change Guide activation
  • Navigation mode allows you to navigate to another page in your application or open a modal.
  • Preview allows you to preview your guide.
  • Exit allows you to leave the Visual Design Studio. It’s important to leave the Visual Design Studio by selecting Exit rather than by closing the tab. This takes you back to the guide's details page.
  • Save allows you to save your current work. Use the down arrow (v) next to Save to choose Save and Exist instead.
  • Alerts to make you aware of any applicable notifications. Errors are yellow when present.
  • Move allows you to move the navigation bar to top orbottom of the Visual Design Studio This might be useful if you have elements in your application that are behind the Action Bar at the top of your page.

Step tray

Select the arrow at the center of the action bar to access the step tray. The step tray shows options to customize your activation method and add additional steps to your Guide.

Activation

Activation refers to how your guide appears to users. You can access your guide Activation options from the button on the action bar, or by opening the step tray and selecting the Activation box on the left-hand side:

There are three Activation options to choose from:

• Automatic. Guide appears once automatically until dismissed or advanced.
• Badge. Guide appears after a visitor selects or hovers over a badge icon.
• Target Element. Guide appears after a visitor clicks on a targeted element.

A guide can simultaneously utilize different activation methods to achieve the desired behavior. For instance, you can set a guide to appear both automatically and with a badge.

For more information, see Guide activation options.

Guide container

The Guide Container refers to the blue border that appears when you hover over the edge of a guide. Select this to open the Edit Container menu, where you can change the style, location, and behavior of your guide. For information about styling your guide using the guide container, see Create a Guide.

A guide is comprised of building blocks. Using the building blocks, you can add the following elements to each step in your guide:

• Text
• Button
• Horizontal Line
• Multi Button
• Image
• YouTube Video
• Open Text Poll
• Yes/No Poll
• Number Scale Poll
• Multi Choice Poll
• Custom Code Block

You can access the building blocks menu by placing your cursor inside a guide and selecting the blue horizontal line that appears. For more information, see Add guide content using building blocks.