Layout Components Properties
    • PDF

    Layout Components Properties

    • PDF

    Article summary

    Layout Components Properties

    The following sections detail the properties of the Layout section components:

    • Container
    • Grid
    • Progress Bar
    • Greeting Page
    • Thank you Page
    • Main Page
    • Accordion
    NOTE
    If you want to skip to our How to Videos section and quickly learn how to use Layout 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:

     Container Properties Section.

    Figure 1: Container Properties Section

    Table 1: Container Properties Section

    Number

    Icon

    Name

    Description

    1

    Model

    Enables to connect the component to the Model by:

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

    2

    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

    3

    -

    Padding Top

    Enables to add top padding to the component

    4

    -

    Padding Right

    Enables to add right padding to the component

    5

    -

    Padding Bottom

    Enables to add bottom padding to the component

    6

    -

    Padding Left

    Enables to add left padding to the component

    7

    -

    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

    8

    -

    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

    9

    -

    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

    10

    -

    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

    11

    -

    Max Height

    Enables to set the maximum height of the component in:

    • Pixels (px)
    • %
    12

    -

    Advanced

    Displays advanced properties 

    NOTE

    For additional information, click here.

    13

    -

    Accessibility

    Displays accessibility properties 

    NOTE

    For additional information, click here.

    14

    -

    + 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

    15

    -

    Delete

    Enables to delete the component

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

    Container Advanced Properties

    Some properties, that are not so common, will be available under the Advanced dropdown.  Figure 2 and Table 2 describe the properties located under the Advanced dropdown.

    NOTE
    The availability of the Advanced dropdown and the properties located under it, depend on the Theme used in your environment.

    Container Advanced Properties.

    Figure 2: Container Advanced Properties

    Table 2: Container Advanced Properties

    Number

    Icon

    Name

    Description

    1

    -

    Border radius

    Enables to set the border radius in:

    • Points (pt)
    • %

    2

    -

    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
    3

    -

    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
    4

    -

    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
    5

    -

    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
    6

    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
    7

    -

    outer line width

    Enables to set the width of the outer line in:

    • Points (pt)
    • %

    Container Accessibility Properties

    EasySend incorporates accessibility enhancements into the Container component to facilitate the grouping of related components, thereby improving the usability of forms for all users. This grouping can be established visually and in the code, ensuring that assistive devices can effectively associate related form controls. The Accessibility section contains the option to mark the container as a group along with several properties related to the design of the title, and the title element functions as a clear heading to identify the group. Figure 3 and Table 3 describe the properties located under the Accessibility dropdown.

    Container Accessibility Properties.

    Figure 3: Container Accessibility Properties

    Table 3: Container Accessibility Properties

    Number

    Icon

    Name

    Description

    1

    -

    Form Group

    • When checked - sets the Container as a form group
    • When not checked - the Container is not set as a form group

    2

    -

    Title Text

    Enables to set the title text

    3

    -

    Title Text Direction

    Enables to set the text direction of the component:

    • Auto (default)
    • Right to left (Rtl)
    • Left to right (Ltr)
    4

    -

    Title Font Family

    Enables to set the font family of the title text

    NOTE
    The font family options will appear according to the selected Theme
    5


    Title Font Color

    Enables to select the color of the title text

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

    -

    Title Font size

    Enables to select the font size of the title text

    Grid Properties

    After adding the Grid component to the canvas, configure its properties and design its look. Figure 4 and Table 4 describe the properties of the Grid component:

    Grid Properties Section.

    Figure 4: Grid Properties Section

    Table 4: Grid Properties Section

    Number

    Name

    Description

    1

    Edit Structure

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

    2

    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

    3

    V Align

    Enables to set the vertical alignment of the component:

    • top
    • middle
    • bottom
    4

    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)

    5

    H Spacing

    Enables to set the horizontal spacing of the component

    6

    + 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

    7

    Delete

    Enables to delete the component

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

    Editing Grid Structure.

    Figure 5: Editing Grid Structure

    Grid - Cell Properties

    You can also configure the properties of a grid cell and design its look. Figure 6 and Table 5 describe the properties of the grid cell:

    Grid Cell Properties Section.

    Figure 6: Grid Cell Properties Section

    Table 5: Grid Cell Properties Section

    Number

    Icon

    Name

    Description

    1

    -

    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

    2


    Model

    Not in use

    3

    -

    Padding Top

    Enables to add top padding to the component

    4

    -

    Padding Right

    Enables to add right padding to the component

    5

    -

    Padding Bottom

    Enables to add bottom padding to the component

    6

    -

    Padding Left

    Enables to add left padding to the component

    7

    -

    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
    8

    -

    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
    9

    -

    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

    10

    -

    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

    11

    -

    + Add to Agent

    Not in use

    12

    -

    Delete

    Not in use

    Progress Bar

    After adding the Progress Bar component configure its properties. Figure 7 and Table 6 describe the properties of the Progress Bar component:

    Progress Bar Component Properties Section.

    Figure 7: Progress Bar Component Properties Section

    Table 6: Progress Bar Component Properties Section

    Number

    Icon

    Name

    Description

    1

    -

    Active

    Enables to set what is the current active Progress Bar step

    2

    Steps

    Enables to set the steps of the Progress Bar

    NOTE

    The offset of the steps is +1 so the first step is set to 0

    3

    -

    + 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

    4

    -

    Delete

    Enables to delete the component

    Greeting Page Properties

    After adding the Greeting Page component to the canvas, configure its properties, design its look,  and connect it to the Model. Figure 8 and Table 7 describe the properties of the Main Page component:

    Greeting Page Properties Section.

    Figure 8: Greeting Page Properties Section

    Table 7: Greeting Page Properties Section

    Number

    Icon

    Name

    Description

    1-

    Page Name

    Enables to write a name for the page

    2

    Model

    Enables to connect the component to the Model by:

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

    Enables to select an image file such as .jpg and .png to be a logo

    NOTE

    Image files must be added to the Theme of the Webflow before they are available for selection. For additional information about Themes, see the Themes Overview article

    4-Logo_WidthEnables to set the width of the logo
    5Left_Bg_ColorEnables to set the background color of the left side of the screen
    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

    6Right_Bg_ColorEnables to set the background color of the left side of the screen
    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

    7
    -Show Button
    • When checked - displays the button 
    • When not checked - hides the button 
    8-Button TextEnables to set the text of the button
    9Button_Action

    Enables to set the button with a built-in action or with an action customized with code:

    • Custom - the default value, this is not a built-in action and customization with code is needed by clicking the pencil icon (not covered in this article)
    • Next - navigates to the next page
    • Back - navigates to the previous page
    • Submit - submits the digital process
    NOTE
    • The built-in actions: Next, Back, and Submit can be customized with code as well, by clicking the pencil icon
    • After submitting the digital process there is no way to navigate back to it
    10Charachter_Image

    Enables to select an image file such as .jpg and .png to be a background picture

    NOTE

    Image files must be added to the Theme of the Webflow before they are available for selection. For additional information about Themes, see the Themes Overview article

    11-

    + 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

    12-

    Delete

    Enables to delete the component from the canvas

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

    Thank You Page Properties

    After adding the Thank You Page component to the canvas, configure its properties, design its look,  and connect it to the Model. Figure 9 and Table 8 describe the properties of the Main Page component:

     Thank You Page Properties Section.

    Figure 9: Thank You Page Properties Section

    Table 8: Thank You Page Properties Section

    Number

    Icon

    Name

    Description

    1-

    Page Name

    Enables to write a name for the page
    2

    Model

    Enables to connect the component to the Model by:

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

    Enables to select an image file such as .jpg and .png to be a logo

    NOTE

    Image files must be added to the Theme of the Webflow before they are available for selection. For additional information about Themes, see the Themes Overview article

    4-Logo_WidthEnables to set the width of the logo
    5-Logo_Width_MobileEnables to set the width of the logo for mobile view

    6

    Bg_ColorEnables to set the background color of the screen
    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

    7
    -

    + 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

    8-

    Delete

    Enables to delete the component from the canvas

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

    Main Page Properties

    After adding the Main Page component to the canvas, configure its properties, design its look, configure its form buttons, set the co-browsing option, and connect it to the Model. Figure 10 and Table 8 describe the properties of the Main Page component:

    Main Page Properties Section.

    Figure 10: Main Page Properties Section

    Table 8: Main Page Properties Section

    Number

    Icon

    Name

    Description

    1

    -

    Page Name

    Enables to write a name for the page

    2

    Model

    Enables to connect the component to the Model by:

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

    3

    -

    Primary Button Text

    Enables to set the label of the primary form button

    NOTE

    If the Primary Button Text is not set, the primary form button will not be visible

    4

    Primary Button Action

    Enables to set the primary button with a built-in action or with an action customized with code:

    • Custom - the default value, this is not a built-in action and customization with code is needed by clicking the pencil icon (not covered in this article)
    • Next - navigates to the next page
    • Back - navigates to the previous page
    • Submit - submits the digital process
    NOTE
    • The built-in actions: Next, Back, and Submit can be customized with code as well, by clicking the pencil icon
    • After submitting the digital process there is no way to navigate back to it
    5

    Secondary Button Action

    Enables to set the secondary button with a built-in action or with an action customized with code:

    • Custom - the default value, this is not a built-in action and customization with code is needed by clicking the pencil icon (not covered in this article)
    • Next - navigates to the next page
    • Back - navigates to the previous page
    • Submit - submits the digital process
    NOTE
    • The built-in actions: Next, Back, and Submit can be customized with code as well, by clicking the pencil icon
    • After submitting the digital process there is no way to navigate back to it

    6

    -

    Show Secondary Button

    • When checked - displays the secondary from button 
    • When not checked - hides the secondary form button

    7


    Logo

    Enables to select an image file such as .jpg and .png to be a logo

    NOTE

    Image files must be added to the Theme of the Webflow before they are available for selection. For additional information about Themes, see the Themes Overview article

    8

    -

    Logo widthEnables to set the width of the logo
    9

    -

    Logo width MobileEnables to set the width of the logo for mobile view
    10Background Image

    Enables to select an image file such as .jpg and .png to be a background picture

    NOTE

    Image files must be added to the Theme of the Webflow before they are available for selection. For additional information about Themes, see the Themes Overview article

    11

    -

    Show Cobrowsing Button

    • When checked - the Main Page component displays the Co-Browsing button
    • When not checked - the Main Page component does not display the Co-Browsing button
    12-Is Preview Page
    • When checked - the Main Page component will be set as a preview page, the Preview component will be dragged and dropped onto it
    • When not checked - the Main Page component will not be set as a preview page and will not be able to contain the Preview component

    13

    Previewbackground Image

    Enables to select an image file such as .jpg and .png to be a background picture for the preview page

    NOTE

    Image files must be added to the Theme of the Webflow before they are available for selection. For additional information about Themes, see the Themes Overview article

    14

    -

    Is Progress Bar

    • When checked - if the page contains a Progress Bar component, adjusts the layout of the page when the view is mobile
    • When not checked -will not change the layout of the page when the view is mobile, even if the page contains a Progress Bar component

    15

    -

    + 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

    16

    -

    Delete

    Enables to delete the component from the canvas

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

    Accordion Properties

    After adding the Accordion component to the canvas, configure its properties. Figure 11 and Table 9 describe the properties of the Main Page component:

    Figure 11: Main Page Properties Section

    Table 9: Main Page Properties Section

    Number

    Icon

    Name

    Description

    1

    Model

    Enables to connect the component to the Model by:

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

    2

    -

    Title

    Enables to set the label of the component

    3

    -

    Initial Expended

    • When clicked - the Accordion component will be expended automatically when the digital process is initiated
    • When not clicked - the Accordion component will not be expended automatically when the digital process is initiated 
    4

    -


    Alignment 

    Enables to set the alignment of the component:

    • Auto (default)
    • Right to left (Rtl)
    • Left to right (Ltr)

    5

    -

    + 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

    6

    -

    Delete

    Enables to delete the component from the canvas

    How to Videos

    To quickly learn how to use Container components watch the following videos.

    • Container Component: 

    • Grid Component:

    • Greeting Page:

    • Main Page:



    Was this article helpful?