- PDF
Containers Components Properties
- PDF
Containers Components Properties
The following sections detail the properties of the Containers section components. The Containers components are:
- Container
- Grid
Container Properties
After adding the Container component to the canvas, configure its properties, design its look, and connect it to the Model.
Figure 1 and Table 1 describe the properties of the Container component:
Figure 1: Container Properties Section
Table 1: Container Properties Section
Number | Icon | Name | Description |
Model | Enables to connect the component to the Model by:
NOTE
| ||
Background Color | Enables to select a background color for the component The background color is selected from a color palette or from the Theme of the Webflow. For additional information about Themes, see the Themes Overview article | ||
- | Border radius | Enables to set the border radius in:
| |
- | Left outer line |
| |
![]() | - | Right outer line |
|
![]() | - | Top outer line |
|
![]() | - | Bottom outer line |
|
![]() | outer line color | Enables to select the color of the outer line | |
![]() | - | outer line width | Enables to set the width of the outer line in:
|
- | Padding Top | Enables to add top padding to the component | |
- | Padding Right | Enables to add right padding to the component | |
- | Padding Bottom | Enables to add bottom padding to the component | |
- | Padding Left | Enables to add left padding to the component | |
- | Mobile Padding Top | Enables to add top padding to the component The padding will be effective when viewing the process on a mobile device | |
- | Mobile Padding Right | Enables to add right padding to the component The padding will be effective when viewing the process on a mobile device | |
- | Mobile Padding Bottom | Enables to add bottom padding to the component The padding will be effective when viewing the process on a mobile device | |
- | Mobile Padding Left | Enables to add left padding to the component The padding will be effective when viewing the process on a mobile device | |
- | Max Height | Enables to set the maximum height of the component in:
| |
- | + Add to Agent | Enables to add the component to the Agent screen This button will only appear if the Journey Sender feature is enabled, for additional information, see the Journey Sender article | |
- | Delete | Enables to delete the component |
Grid Properties
After adding the Grid component to the canvas, configure its properties and design its look. Figure 2 and Table 2 describe the properties of the Grid component:
Figure 2: Grid Properties Section
Table 2: Grid Properties Section
Number | Name | Description |
Edit Structure |
| |
Collapse (Mobile) |
| |
V Align | Enables to set the vertical alignment of the component:
| |
![]() | Direction | Enables to set the text direction of the component:
|
H Spacing | Enables to set the horizontal spacing of the component | |
+ Add to Agent | Enables to add the component to the Agent screen This button will only appear if the Journey Sender feature is enabled, for additional information, see the Journey Sender article | |
Delete | Enables to delete the component |
Figure 4: Editing Grid Structure
Grid - Cell Properties
You can also configure the properties of a grid cell and design its look. Figure 4 and Table 3 describe the properties of the grid cell:
Figure 4: Grid Cell Properties Section
Table 3: Grid Cell Properties Section
Number | Icon | Name | Description |
- | Column Width | Enables to set the maximum width of a column in:
NOTE
| |
Model | Not in use | ||
- | Padding Top | Enables to add top padding to the component | |
- | Padding Right | Enables to add right padding to the component | |
- | Padding Bottom | Enables to add bottom padding to the component | |
- | Padding Left | Enables to add left padding to the component | |
- | Mobile Padding Top | Enables to add top padding to the component | |
![]() | - | Mobile Padding Right | Enables to add a right padding to the component |
![]() | - | Mobile Padding Bottom | Enables to add a bottom padding to the component The padding will be effective when viewing the process on a mobile device |
- | Mobile Padding Left | Enables to add a left padding to the component The padding will be effective when viewing the process on a mobile device | |
- | + Add to Agent | Not in use | |
- | Delete | Not in use |
How to Videos
To quickly learn how to use Container components watch the following videos.
- Container Component:
- Grid Component: