Add and edit guide content

With the exception of the close (X) button in the top-right or top-left corner of a guide, you add content to overlay and embedded guides using building blocks. There are several formatting options available for positioning and editing guide content. For information about each building block type and their formatting options, see Guide building blocks.

For consistency and efficiency:

• You can style text and button building blocks in advance using guide 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.

Permissions

To add building blocks to a guide, you must have one of the following permissions:

• Guide Content Editor or Guide Content Creator default app-level role permissions. 
• Create/Edit Guides custom app-level roles.
• Admin user permissions.

For more information, see Roles and permissions.

Add building blocks to a guide

You can add building blocks to a step in a guide by adding new rows and by adding columns to rows.

To add a building block to a guide:

1. Ensure you're in the right step of your guide. If the steps of your guide aren't visible, select the View Steps tab of the Visual Design Studio toolbar. From here, hover over the step that you want to add content to and select Edit Step.
   
   
    
2. Add your building block.
   • If there's no content in your guide yet, hover over the center of your guide and select Click to Add Content.
     
     
      
   • To add a building block above or below an existing building block, hover over the location that you want to add a building block to 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.
     
     
3. Choose your content building block from the Building Blocks window.
4. Edit the content of the building block. For information about what you can edit for each building block type, see Guide building blocks.

Tip: Use Option on Mac or Alt on Windows to view all current building blocks and their bounding boxes.

Add columns to a row

Rows allow you to add building blocks side-by-side in columns. A row in a guide step can include:

• Up to four buttons. For more information, see Button in Guide building blocks.
• Any combination of two of the following building blocks: text, button, and image. For example, you might want to include an icon (image) next to a title (text), or have two columns of text.

To add a column to a row, hover over an existing building block in your guide and select the Add Column plus (+) icon that appears. Choose one of the selectable building blocks: Text, Button, or Image and then edit the building block as needed.

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	Selecting this option allows you to edit the background color of the row, its spacing (padding and margins), and the horizontal and vertical alignment of the columns.
	Duplicate row	Selecting this option allows you 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 numbers, 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.

For information about each building block type and how you can edit building blocks, see Guide building blocks.

Add and edit a close (X) button

For both overlay and embedded guides, you can add or remove a close (X) button from the Styling tab of the Edit Container window in the Visual Design Studio. For instructions, see Edit overlay guide step settings or Create an embedded guide.

If you include a close button in your guide, you can edit it like you edit building blocks in the Visual Design Studio. Select the X icon from its location in your guide and then choose Custom from the Close Button Style dropdown menu to edit the following:

• Color. The default color for the close button icon, set with a hexadecimal, RGB numbers, visual color selector, or slider.
• Hover Color. The color of the close button icon when the visitor hovers over it, set with a hexadecimal, RGB numbers, visual color selector, or slider.
• Padding. The space between the close button icon and the border of the close button icon. You edit the top, bottom, left, and right padding independently.
• Margin. The space between the border of the close button icon and the two sides of the icon closest to the edges of the guide step. You edit the top, bottom, left, and right margins independently.
• Alignment (Horizontal). Whether the close button icon is aligned to the left or right of the guide step.