Reseller Adopt end users/customers use the Visual Design Studio to manage the Guide creation experience. This article is to help users understand the Visual Design Studio’s nomenclature.
Theme & Layouts
Themes and Layouts can help you manage your Guide branding by giving Reseller Adopt end users/customers the ability to set up a certain theme and choose from some standard layouts to get started with Guide building.
Theme is used to style your default Theme for your Guide containers, typography, and buttons. To edit your default theme, select the "Manage Theme" button next to the "+ Create Guide" button on the Guides dashboard page. The Designer will open and then you will see options to edit your default theme:
Once you've adjusted your theme to your liking, be sure to select "Save."
Layouts are Guide templates that give you a starting point for your Guide steps.
When you first open the Visual Design Studio, the Guide Designer will launch over your application. It will include multiple tools, as well as a Guide preview.
The Action Bar will appear at the top of the Guide Designer. It contains the following:
- Title of the current guide
- Publication status
- The application the guide is in
- Drop down to change which guide you're working on
- Activation settings
- Navigation mode
- Preview mode
- Exit designer
- Save current work
- Any applicable alerts
- The ability to move the Action Bar to the top or bottom of the screen
- The step tray
The Step Tray can be accessed by clicking on the arrow at the center of the Action Bar. In the Step Tray, you will see options to customize your activation method and add additional steps to your Guide.
Activation refers to how your Guide appears to users. You can access your Guide’s Activation options from the button on the Action Bar, or by opening the Step Tray and clicking on the Activation box on the left-hand side:
You will have three Activation options to choose from, along with an additional option for device type:
- Automatic: Guide appears once automatically until dismissed or advanced.
- Badge: Guide appears after a visitor clicks or hovers over a badge icon.
- Target Element: Guide appears after a visitor clicks on a targeted element.
- Show My Guide On: All devices, desktop & tablets only, or mobile web only
In addition, a Guide can simultaneously utilize different activation methods to achieve a desired behavior. For instance, you can set a Guide to appear both automatically and with a badge.
The Guide Container refers to the blue border that appears when you hover over the edge of a Guide. Click on this to open the Edit Container menu, where you can change the style, location, and behavior of your Guide.
Edit Container Menu
The Edit Container menu contains multiple options for styling your Guide, editing its location, and controlling its behavior. The following is a breakdown of each element in this menu:
Note: If you are editing your guide using a Theme, you will have to change the Theme to "Custom" in order to see these options.
- Padding (px)
- Border - Color, Width (px) & Radius (for rounded corners)
- Drop Shadow - Color and size (shadow around guide container)
- Caret - (if applicable) Width (px) & Height (px) (pointer on tooltips)
- Backdrop - Color and Opacity (if using a tooltip guide, be sure to check "Show target element above backdrop")
- Close Button (allows users to X out of a guide)
- Dimensions (Guide Width in px)
- Z-index (only edit this if your guide is being hidden by something such as a modal with a higher z-index. Higher z-index means it will be the most "in-front" element.)
- Background color
- Accessibility features (ARIA label, role, autofocus settings, ARIA label for the close button)
- Position on Page
- Element Location (if applicable)
- Page Location - Sitewide or Only on this page
- Toggle to filter dynamic elements when targeting
- Close “x” Button
A Guide is comprised of Building Blocks. Each Building Block will offer you an option to add:
- Horizontal Line
- Date Block
- Open Text Poll
- Yes/No Poll
- Number Scale Poll
- Multi Choice Poll
You can access the Building Blocks menu by placing your cursor inside a Guide and clicking on the blue horizontal line that appears. It will look like this: