This guide reviews the different functions and components you can use when building a popup Experience.
Configuration Tabs
The configuration tabs are the key to customize the appearance and functionality of the popup.
Content: Add new content blocks to the template or to the scratch-made popup. One or more content blocks can be added to each row.
Rows: Break down the content into different layouts using the column options provided in the row tab. Use the drop-down at the top to select from empty rows or default rows that have commonly used content components added.
Settings: Control high-level settings for the content, such as the width of the content, background color, and content alignment.
Available Content Blocks
Title: A text element using top-level text hierarchy design. Adjust the the font size, font family, text color, alignment, and more when adding a new title.
Paragraph: Another text block designed to add a greater quantity of text. Adjust font family, alignment, spacing, and font weight when configuring paragraph text.
List: Create a bulleted or numbered list by selecting the list type before adjusting properties such as the style of list, text color, font size, line height, and alignment.
Image: Add an image from the library or third-party source and then adjust image width, edit the image or apply effects, add links, and adjust padding.
Button: Create a clickable element ad adjust font size, button background and font text color, change letter spacing, or adjust alignment.
Divider: Add a visual differentiator between sections of content and adjust the weight, design, and color of the divider.
Spacer: Instead of using a visual divider, provide differentiation by adding white space between content components. Adjust the height of the spacer to determine the amount of white space.
Social: Provide a link to your social networks using pre-designed or custom icons. You can also insert social share icons and style icons using spacing and alignment.
HTML: Insert custom HTML by using the HTML block.
Video: Using YouTube of Vimeo embed a video directly into the content or provide a link to a hosted video.
Form: Collect information from a visitor and subscribe contacts to a selected email list, SMS keyword campaign, or both. Collect additional information that can be used in filtering and to personalize message content.
Icon: Add images in a vertical line. These images cannot be linked, but you can adjust size, spacing, and padding.
Menu: Add a navigation menu to redirect visitor to pages on your site.
Text: A third text block designed to add a greater quantity of text. Adjust font family, alignment, spacing, and font weight when configuring paragraph text.
Row Settings
Rows house the content of the popup. Rows contain 12 blocks that can be broken into columns. A row can contain between one and twelve columns that can then be filled with the different content blocks.
Empty row types contain no content while default row types contain some commonly used layout and content combinations.
Once a row is added, in the row configurations, use the Customize Columns section to select the number of blocks in each column to change the width, add new columns, or delete existing columns.
The final width of each row will be dependent on the width of the popup set in the settings panel. For example, in a 600px wide popup each block is 50px wide. In a 3 column row layout of 3 blocks, 6 blocks, 3 blocks the columns would be 150px, 300px, and 150px wide as depicted in the screenshot below.
Once the rows have been created you can adjust the row properties listed below.
Row Properties
Once a row has been added to the canvas you can also adjust the following properties by clicking into the row on the build canvas.
Row Background Color: Apply a background color to the height of the entire row including outside the content area.
Content Area Background Color: Apply a background color to the height of a row within the content area.
Content Area Rounded Corners: Applies a rounded look to the area of content within a row. Use the more options toggle to adjust the corners separately.
Content Area Border: Applies a border around all content within a row. Adjust properties such as color, design, and width. Use the more options toggle to adjust the borders separately for each side.
Do Not Stack on Mobile: Turning on this toggle will scale the content within the selected row on mobile instead of stacking content.
Reverse Stack Order on Mobile: Turning on the toggle will display the right-most column of content at the top of the stack when viewing on mobile.
Row Background Image: Enable the toggle to select an image that can fill the content area of the row or the entire row. Images can fit to the content, be centered, or repeat depending on the height of the row and type of image.
Hide On: Select the computer monitor or phone icon to hide a row on desktop or mobile respectively. This setting allows you to create one appearance for desktop and one for mobile.
Customize Columns: Add, delete, or adjust the widths of the columns in a row as described above in the row settings section/
Column Background Color: Clicking on a specific column in the customize section populates a color selector below where a background color can be applied to the selected column if this should differ from the color set at the row or settings level.
Padding: Clicking on a specific column in the customize section use the padding option to adjust the white space around a row. These can be adjusted at the same rate for all sides, or customized per side by tuning the more options toggle to on.
Border: Clicking on a specific column in the customize section use the padding option to add a border to the specified column. These can be adjusted to apply the same appearance to all sides, or customized per side by tuning the more options toggle to on.
Settings Panel
The settings panel control the settings for the entire popup and apply to all sections of the popup unless specifically overwritten.
Content Width Area: The total width of all content added into the columns of a content. Popups can be designed between 320px-1440px.
Content Alignment Area: Determine if the content should be left aligned or centered within the space.
Background Color: Apply a color to the entire popup including outside the content width area.
Content Area Background Color: Apply a color to the background of the content width area only. This will apply to all rows in the popup.
Default Font: The font that will populate when adding any new content that contains text, such as paragraphs, buttons, and lists.
Link Color: The default color styling that will be applied when a link is included in any content that contains text.
Optional Properties: These are not required but can help your popup be easily identified by contacts when it is open in the browser.
Title: The label that will appear in the page tab within the browser.
Description: A short blurb on the page contents.
Language: An attribute that reflects the language of the page that is used to help accessibility tools, such as screen readers.
Favicon: Upload an image that will appear in the page tab before the title.