This feature available on All Plans
Contents
Widget Settings
Setup (Column Control)
Visibility
CSS Class
Nested Containers
Overview
Container Widgets have multiple uses for a campaign. They can be used to organize your widgets into groups for many different purposes - for example, visibility or formatting. The Two and Three Column Layout Widgets (which are also containers) can be used to change the visual layout of your campaign.
To add one of these widgets to your campaign, click the Container, Two Column Layout, or Three Column Layout icon in the Add Widgets Panel, or click and drag the icon into your preview area.
Widget Settings
The widget settings popup is where you'll make any needed changes to your Container Widget. To change the widget name, click on the pencil icon in the top-left (next to the name) then type your new name.
You will also see the CSS ID (starting with a #) of your new widget listed in the top-right corner of the popup.
You'll want to move through each item in the menu on the left side to make sure you've completely customized the Container Widget (and what you're displaying) in the way you'd like. You can navigate through these sections using the Back and Next buttons at the bottom.
When you're finished making changes to your widget, click the blue Save and Exit button.
Setup (Column Control)
The Two and Three Column Layout Widgets will have a Setup section - in this section, you'll set up your column widths. You can do this by either moving the slider(s) in the bar to the wanted sizing, or you can enter values in the fields below. Do note that these are percentage values.
Visibility
If you'd like to limit visibility of the widget to a specific date and time, make the widget a pop-up, only show the widget in your Builder, or limit in which country/countries the widget can be seen; you'd do so in the Visibility section. More information about these settings can be found in the Widget Visibility help doc.
CSS Class
In this section, you can add a CSS Class that will be associated with the Container Widget - that way you can target it with custom CSS code. Rules and naming conventions are provided so that you don't use a class that won't work. Simply add your CSS class(es) to the Extra CSS Classes field.
Nested Containers
If your campaign needs more columns than our default widgets provide, it's no problem; you can nest Container or Layout Widgets inside of each other to get the desired result. For example, if you wanted to have four columns, simply nest two Two Column Layout Widgets inside of another Two Column Layout Widget.
The result should look like this:
Note: The sections of a Two or Three Column Layout Widget in the Edit Widgets Column will always display the top-most section on the left side of the screen, and the bottom-most section on the right side - as shown in the screenshot.
