The Visual Design Studio provides you with an intuitive point-and-click interface to build Guides and track their usage. This article provides a quick introduction to the Visual Design Studio, how it works, and its key features.
Why Did We Build the Visual Design Studio?
While the Legacy Designer is a powerful tool you can use to create a variety of different Guides, it requires a basic knowledge of coding languages such as HTML and CSS. Customer feedback indicated that there was significant demand for a completely visual way to build, customize, and style Guides. We created the Visual Design Studio to make Pendo’s Guide creation accessible to teams across an organization, regardless of their technical knowledge.
How Is the Visual Design Studio Different From the Legacy Designer?
The Visual Design Studio completely reimagines how to create Guides within Pendo. Instead of editing code, you can use a visual point-and-click interface. This makes it easy for any user, regardless of technical knowledge, to build and customize Guides.
Key differences between the Legacy Designer and Visual Design Studio include:
The Guide Details page has been optimized in the Visual Design Studio. You can now preview each step of a Guide, as well as edit key settings such as Activation, Segment, and Scheduling without having to go into the Designer itself.
Choosing which Layout to use is now much easier within the Visual Design Studio. Before launching the Designer, you will see a Layout library that displays both Pendo default Layouts and custom Layouts you and your team have built.
Admins can quickly edit which Layouts users see, as well as set a default style for Guide backgrounds, text, and buttons so that newly created Guides match your organization’s brand requirements.
The Visual Design Studio includes major changes to how you edit and interact with Guides. Instead of using a side panel, you can now launch and edit the Designer directly above your application. You can even change the Layout type without leaving the Designer.
Building Blocks are one of the most significant updates within the Visual Design Studio. This feature allows you to add in a variety of different elements to your Guides with just a few clicks. Easily insert a block of text into a Walkthrough or add a poll to a Lightbox, then quickly reorder these elements to your liking.
Getting Started with the Visual Design Studio
The following is a quick introduction to using the Visual Design Studio. For a more thorough discussion, refer to the Create a Guide article.
How to Find the Visual Design Studio
Click “Guides” in the left-hand menu, then choose either “Create a Guide” or “Visual Design Studio” in the top right-hand corner.
In the Layout Library, you can either create a new Layout from scratch or choose a default Layout. You can create five general types of Guides:
Any Guide you create can be saved as a custom Layout for future use.
For more information, including recommendations on when to use specific Layouts, refer to the Layouts article.
Opening the Designer
You can access the Designer from the Guide Details page. Simply click on “Manage in App” (1 or 2) to open the Visual Design Studio, then add the page URL you would like the Guide to appear on.
The Visual Design Studio launches directly above your application, allowing you to immediately begin editing your Guide within its native environment. To begin, there are three main elements to know: the Edit Container toolbox, the Step Tray, and the Building Block toolbox.
The Edit Container toolbox will automatically be open when you first launch the Designer. You can use it to edit how your Guide looks, where it is located, and how it behaves.
The Step Tray is located at the top of the screen by default. To open it, simply click on the down arrow. You can use the Step Tray to view each step of your Guide, reorder and delete them, and access the Guide Activation options.
Open the Building Block toolbox by clicking on the blue line that appears when you place your cursor inside your Guide. You will then be able to add in multiple Building Blocks, such as text or an image, as well as custom code.
Frequently Asked Questions
How do I test a Guide?
You can do this by segmenting the Guide to yourself. Refer to the Create a Guide article for full instructions.
How can I change a Layout within the Designer?
First, open up the Step Tray, then click on the gray box that says “+Add Step”. This will prompt you to choose a new Layout. Once you have done this and styled your new Layout, simply open the Step Tray once again, hover over the previous Layout you would like to delete, and click on the ellipses (“…”) on the top-right corner. This will give you the option to delete that Layout.