This article shows users who are familiar with the Classic (formerly Legacy) Designer how to complete common actions within the Visual Designer. For more users who are comfortable with custom code and wish to add more of their own customizations should continue to use the Classic Designer.
Introduction to the Visual Design Studio
We created the Visual Design Studio to make Pendo’s Guide creation accessible to teams across an organization, regardless of their technical knowledge. Whereas the Classic Designer requires a basic knowledge of coding languages such as HTML and CSS, the Visual Design Studio uses a visual point-and-click interface. This makes building and editing Guides a more intuitive experience.
For a thorough introduction to the Visual Design Studio, refer to the Getting Started article.
Creating a Guide
Creating and editing a Guide is now a simple process with the Visual Design Studio. This video provides a quick overview:
For a more in-depth overview, refer to the Create a Guide article.
Creating a Button
Creating a button in the Classic Designer requires you to manually code it with something like this:
Then, styling your button required additional CSS coding. Creating a button in the Visual Design Studio is much easier. After choosing your desired Layout and launching the Designer, simply click on the blue line that appears between items inside the Guide to open the Building Blocks menu.
In the Building Blocks menu, choose “Button” and begin configuring actions and styling it according to your preferences. You can edit the button text, colors, and size, as well as what action it takes after a user clicks on it. No coding is required.
Layouts vs. Templates
Layouts are the Visual Design Studio’s form of Templates. Just like Templates, you can create a Layout five general types of Layouts:
This way, Pendo administrators can still create and manage Layouts so users with “Create Guide from Layouts” permission can stay within brand guidelines and update content as needed.
Navigating the Guide Details Page
The Guide Details page for the Classic Designer displays a variety of information. However, in order to edit any of it, you have to open up the Designer. In contrast, the Guide Details page for the Visual Design Studio allows you to get an at-a-glance view of your Guide and make quick changes to it, all without opening up the Designer. Even if your Guide has multiple steps, each with different settings, you can view each step and make edits accordingly.
Within the Visual Design Studio’s Guide Details page, you can edit the following:
- Activation: Control how your Guide displays to your users.
- Segment: Control which users see your Guide.
- Scheduling: Control when your Guide displays.
- Localization: Control which languages your Guide uses.
For more information, refer to the Guide Details - Settings article.
The Visual Design Studio’s Guide Details page also offers a more detailed readout of user interaction and metrics. On one page, you can view:
You can also overlay feature usage above the weekly views chart, allowing you to gain additional insight into how a Guide is affecting a particular feature.
For more information, refer to the Guide Details - Metrics article.
To learn more about the Visual Design Studio, refer to the following articles: