Containers Components Properties
    • PDF

    Containers Components Properties

    • PDF

    Article Summary

    Containers Components Properties

    The following sections detail the properties of the Containers section components. The Containers components are:

    • Container
    • Grid
    NOTE
    If you want to skip to our How to Videos section and quickly learn how to use the Container components, click here.

    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:

    • Clicking the icon
    • Creating a new transaction data item
    NOTE

    Background Color

    Enables to select a background color for the component

    NOTE

    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:

    • Points (pt)
    • %

    -

    Left outer line

    • When checked - enables to emphasize the left outer line of the component
    • When not checked - disables the possibility to emphasize the left outer line of the component

    -

    Right outer line

    • When checked - enables to emphasize the right outer line of the component
    • When not checked - disables the possibility to emphasize the right outer line of the component

    -

    Top outer line

    • When checked - enables to emphasize the top outer line of the component
    • When not checked - disables the possibility to emphasize the top outer line of the component

    -

    Bottom outer line

    • When checked - enables to emphasize the bottom outer line of the component
    • When not checked - disables the possibility to emphasize the bottom outer line of the component

    outer line color

    Enables to select the color of the outer line

    NOTE
    The background color is selected from a color palette or from the Theme. For additional information about Themes, see the Themes Overview article

    -

    outer line width

    Enables to set the width of the outer line in:

    • Points (pt)
    • %

    -

    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

    NOTE

    The padding will be effective when viewing the process on a mobile device

    -

    Mobile Padding Right

    Enables to add right padding to the component

    NOTE

    The padding will be effective when viewing the process on a mobile device

    -

    Mobile Padding Bottom

    Enables to add bottom padding to the component

    NOTE

    The padding will be effective when viewing the process on a mobile device

    -

    Mobile Padding Left

    Enables to add left padding to the component

    NOTE

    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:

    • Pixels (px)
    • %

    -

    + Add to Agent

    Enables to add the component to the Agent screen

    NOTE

    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

    NOTE
    Deleting a Container component that contains other components will delete them as well

    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

    • When checked - enables to edit the structure of the component, add, or remove rows and columns (see Figure 3)
    • When not checked - disables the option to edit the structure of the component

    Collapse (Mobile)

    • When checked - enables to automatically collapse the component on mobile view
    • When not checked - disables the option to automatically collapse the component on mobile view

    V Align

    Enables to set the vertical alignment of the component:

    • top
    • middle
    • bottom

    Direction

    Enables to set the text direction of the component:

    • right to left (rtl)
    • left to right (ltr)
    • language (according to an input language that was set for your Builder platform)

    H Spacing

    Enables to set the horizontal spacing of the component


    + Add to Agent

    Enables to add the component to the Agent screen

    NOTE

    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

    NOTE
    Deleting a Container component that contains other components will delete them as well
    Your content goes here

    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:

    • px
    • %
    NOTE
    • This option will only appear when clicking the two top grid cells
    • Removing the top row of the grid removes the column width option


    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

    NOTE
    The padding will be effective when viewing the process on a mobile device

    -

    Mobile Padding Right

    Enables to add a right padding to the component

    NOTE
    The padding will be effective when viewing the process on a mobile device

    -

    Mobile Padding Bottom

    Enables to add a bottom padding to the component

    NOTE

    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

    NOTE

    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:



    Was this article helpful?