Building blocks are the elements used to add content to a guide. Each building block provides controls for adding and formatting items such as text, buttons, images, polls, and videos.
Some building blocks can be styled using a theme. Themes allow you to define default styles for elements like text and buttons so that guides remain visually consistent across your application. When a theme is applied, text and button building blocks automatically use the theme’s styling unless you customize them.
Prerequisites
To add a building block to a guide, you must have permission to create or edit guides.
Building block types
The following building blocks are available to help you build your guides:
- Text. For more information, see Text building block.
- Button. For more information, see Button building block.
- Horizontal line. For more information, see Horizontal line building block.
- Image. For more information, see Image building block.
- Video. For more information, see Video building block
- Polls. For more information, see Poll building block.
- Close (X) button. For more information, see Close (X) button building block.
Add a building block
You can add content to a guide by using building blocks. To do this:
- Go to Guides.
- Open the guide you want to edit.
- Select Edit in my app to open the Visual Design Studio.
- Select View steps, then choose the step you want to edit.
- Hover over the step you want to edit and select Edit step. If the step is blank, select Click to Add Content.
- To add a building block above or below an existing block, hover over the location where you want to add the block and select the Add Row plus (+) icon that appears.
- To add a text, button, or image building block to the left or right of an existing building block, hover over the building block and select the Add Column plus (+) icon that appears. You can edit the width of building block columns.
For more information, see Columns and rows.
- Select the type of building block you want to add from the Add Building Block menu.
Columns and rows
You can control the layout of your guide step using rows and columns. Rows organize content across the guide step and stack vertically from top to bottom, while columns divide each row into side-by-side sections that hold building blocks. A single row in a guide step can include the following layouts:
- Up to four buttons in one row (using columns).
- Up to two columns using text, button, or image building blocks. For example, you might place an image next to text, or use two columns of text.
Edit a building block
To edit an existing building block, you can do this by selecting the content you want to edit. The edit menu for that building block will open and you can make your changes.
Edit rows
Hover over the row in your guide step to see the Edit Row menu.
This menu provides you with the following options:
| Edit row | Select this option to edit the background color of the row, its spacing (padding and margins), and the horizontal and vertical alignment of the columns. | |
| Duplicate row | Select this option to copy and paste the row's content into another row directly below it, which you can then edit as required. This is useful if you want to copy this row's style settings. | |
| Row positioning | If you have more than one row of content in your guide step, you can use the arrows to move the row up or down the guide step. You only see these arrows if you have more than one row in your guide step. |
The Edit Row window allows you to edit the following:
- Background Color. Set the color and transparency of the row’s background color using a hexadecimal, RGBA values, or visual color selector and sliders.
- Padding. Add or remove space between the contents of your row and the container for that row. You edit the top, bottom, left, and right padding independently.
- Margins. Add or remove space between the row and the edges of your guide (the guide container) or neighboring rows. You edit the top, bottom, left, and right margins independently.
- Horizontal. Stack-align building blocks on a row: to the left, to the center, to the right, or evenly distributed.
- Vertical. For building blocks of different heights on the same row, align them: at the top, centered, or at the bottom.
Edit building blocks
Hover over a building block in your guide step to see the Edit Building Block menu:
The menu provides you with the following options:
| Edit building block | This opens a window with all the edit options relevant to the building block type. For most building blocks, you can also open this window by just selecting the building block. | |
| Delete building block | This permanently deletes the building block from the guide step. Deleting a building block can't be undone and there's no confirmation window for this action. | |
| Column positioning | If you have more than one column of content in the same row, you can use the arrows to move one of these columns across the row. You only see these arrows if you have more than one column in a row. |