Building blocks are used to add content to guides. There are multiple building blocks that allow you to add and format text, buttons, images, polls, and embedded videos. For detailed information about each building block, see Building blocks types.
You can style the text and button building blocks in advance using available themes. For more information, see Manage guide styling with themes. If you use a set of building blocks consistently, you can save them as a layout. For more information, see Use guide layouts.
Requirements
- Visual Design Studio
- Guide Content Editor or Guide Content Creator user role or Create/Edit Guides custom permissions
- Some building blocks have an agent version requirement
Add a building block
Tip: Hold Option on Mac/Alt on Windows to view all current building blocks and their bounding boxes.
1. Open a guide in the Visual Design Studio and view a guide step.
2. Select it to add content if you have a blank step.
If you already have content on the step:
- Add a new row by hovering above or below an existing building block
- Add a new column by hovering to the left or right of a text, button, or image building block
3. Select a building block type from the menu.
4. Select an existing building block to open the Edit menu and make any changes.
Row and block formatting
Building blocks can be added to guides vertically by adding new rows or horizontally by adding new columns. Several formatting options are available to position and edit building blocks in the guide step.
Row formatting
Edit Row opens the Edit Row menu, which has settings for background color, padding, margin, and alignment. Alignment positions content laterally across the row or vertically relative to content in the same row.
Duplicate clones the entire row and creates a new adjacent row with the same content. This is helpful for cloning the style settings used in a building block, even when you're making changes to the content inside the block.
Row positioning moves the entire row up or down, swapping it with the content that's currently there. You can easily adjust the order of building blocks and test different layouts to find the design you like the best.
Block formatting
Edit Building Block opens the edit menu for that building block, where you can edit the content and style settings. In most cases, you can access this menu directly by selecting the building block, but some building blocks, like Videos, may play content or have other native behavior instead of opening the edit menu when selected.
Duplicate in the same row is available for text, button, and image building blocks when the row capacity hasn't been reached yet. This will clone the selected content in the same row, just like adding a column with that building block type.
Delete permanently removes that building block. Be careful when you delete a building block. There is no warning modal and there isn't an undo button.
Column positioning moves the building block left or right, swapping it with the content next to it, in the same row. If the building block can't be moved, the arrow is grayed out and it can't be selected. Column positioning is only available for text, button, and image blocks.
Place building blocks side-by-side
Not all building block types can be placed next to each other. Only text, button, and image building blocks support side-by-side placement. There are limits to how many building blocks can be placed in a single row. A row can have up to four buttons or two building blocks consisting of any combination of text, button, and image building blocks. For example, two text blocks can be placed next to each other, or a button and a text block.
Existing button or multi-button building blocks work with the new side-by-side functionality. But only new text and image building blocks support side-by-side placement. Text and image building blocks created prior to the release of side-by-side building blocks on 26 May, 2021 won't support Add Column. Duplicating the building block clones the legacy functionality without side-by-side placement. You must add a new text or image building block in a new row to use side-by-side placement. You can copy and paste the content from the old building block into the new building block and then delete the old building block to use the new functionality with your existing content.