This feature available on All Plans
Overview
Container Widgets have multiple uses in a campaign. They can organize your widgets into groups for various purposes, such as managing visibility or formatting. The Two Column Layout and Three Column Layout Widgets (which are also containers) can be used to adjust the visual layout of your campaign.
To add one of these widgets to your campaign either click the Container, Two Column Layout, or Three Column Layout icon in the Add Widgets Panel, or drag the icon into your preview area.
Widget Settings
The widget settings popup is where you'll make any necessary changes to your Container Widget.
Renaming the Widget
- Click the pencil icon in the top-left corner (next to the widget name).
- Enter the new name and press Enter.
CSS ID
The CSS ID (starting with a #) of your widget is displayed in the top-right corner of the popup.
Customization
Use the menu on the left side to fully customize your Container Widget. Navigate through the sections using the Back and Next buttons at the bottom of the popup. When finished, click the blue Save and Exit button to apply your changes.
Setup (Column Control)
For Two Column Layout and Three Column Layout Widgets, the Setup section allows you to define column widths.
Adjusting Column Widths
Use the slider(s) in the bar to adjust the sizing, or enter percentage values directly into the fields below.
Visibility
To control when and where the widget is visible:
- Go to the Visibility section.
- Adjust settings for:
- Date and time restrictions
- Pop-up display
- Builder-only visibility
- Country-specific visibility
For more details, refer to the Widget Visibility Help Doc.
Extras
Learn about the Main Tag, CSS Classes, and Smart Labels settings here.
Nested Containers
Need more columns than the default widgets provide? No problem! You can nest Containers or Layout Widgets inside each other to create the desired structure.
Example:
To create four columns nest two Two Column Layout Widgets inside another Two Column Layout Widget.
Note:
In the Edit Widgets Column, the layout sections are displayed as follows:
- The topmost section appears on the left side of the screen.
- The bottom-most section appears on the right side, as shown in the provided screenshot.
Container Widget Styling Options
When the Widget is selected, you can customize the styling of the specific widget. Some of the options include changing the background color, the maximum width of the widget, and widget alignment. You will see the following areas of styling available in the Style Panel:
- Widget Visibility
- Widget Background
- Widget Spacing
- Widget Borders
- Widget Text
The two and three-column Containers will also have an additional section for the column spacing.
