Layouts give you an easy way to quickly style the look and feel of your Guides. There are 10 layouts available in Adopt. You can choose to "start from scratch" and input your own building blocks within an empty guide container, or use a Layout with pre-populated building block to give you an idea of how to start your guide. This article discusses the types of Layouts.
The Visual Design Studio lets you create Guides based off of three general types of Layouts:
- Lightbox (1)
- Banner (2)
- Tooltip (3)
A Lightbox is a customizable box that appears above your app or page. It can take on any size or dimension, as well as contain any type of content, such as text, images, or a video. Lightboxes can be used for almost anything, but are excellent tools to make general announcements.
Banners function similarly to Lightboxes, but it will appear on either the very top or bottom of a page and will span across the entire width. This makes them great for announcing an important message without obstructing a user’s entire screen.
Note: Banners have built-in animation that slides them into view from the top or bottom. Be mindful when starting from a Banner layout and changing the size (adjusting from "full width" to a fixed pixel width) or location (adjusting to "relative to element") to that of a Lightbox or Tooltip as that animation will still apply.
A tooltip is great for providing in-line support for common questions. Tooltips can be activated in a variety of ways, such as hover overs or badges. They can be placed anywhere on a page. To locate them relative to a specific element, you can edit the location settings in the Edit Container box.