Magento for B2B Commerce

Row

Use the Row content type to add a new row to the stage. The row is the basic building block of all Page Builder content. Whenever you create new content, the stage is initially populated with a single, blank row. The row toolbox appears when you hover over the container. The toolbox includes options to move, hide, duplicate, edit, or remove the row. The selection of settings determines the appearance, background and layoutThe visual and structural composition of a page. of the row. Additional content elements can be dragged to the row from the Page Builder panel on the left.


Row Toolbox

 

  • Row Toolbox

    TOOL

    Icon

    Description

    Move

    Moves the row to another position in relation to other rows on the stage.

    (label)

    ROW

    Identifies the current content container as a row. Hover over the container to see the toolbox.

    Settings

    Opens the Edit Row page, where you can change the properties of the container.

    Hide

    Hides the current row.

    Show

    Shows the hidden row.

    Duplicate

    Makes a duplicate copy of the row.

    Remove

    Deletes the row and its content from the stage.

  • Row Settings

    Setting

    Description

    Appearance

    Determines how the background color and/or image appears in relation to the row container, and the width that is available for content.

    Contained

    The background color or image is limited to the maximum page width that is defined by the theme.

    Full Width

    Limits the content to the maximum page width that is defined by the theme. The background color and/or image is not limited, and extends the full width of the row.

    Full Bleed

    Neither the content nor the background image and/or color are limited, and extend the full width of the row.

    Full Bleed can be used only with themes that support the layout.

    Background

    Background Color

    Determines the background color and opacity of the row.

    Background Image

    Determines the location of the background image file, and applies the image to the row. Options:

    Upload

    Uploads an image file from your local computer to the gallery, and applies it as the background image for the row.

    Select from Gallery

    Prompts you to choose an existing image from the gallery as the background image for the row.

    Allows you to either drag the image to the camera tile, or browse to the image in your local file system.

    Background Mobile Image

    Determines the location of the background image file that is to be used for mobile devices, and applies the image to the row. If left blank, the standard desktop background image is used. Options:

    Upload

    Uploads an image file from your local computer to the gallery, and then applies it as the background image for the row.

    Select from Gallery

    Prompts you to choose an existing image from the gallery to be the background image for the row.

    Allows you to either drag the image to the camera tile, or browse to the image in your local file system.

    Background Size

    Determines how the background image is scaled in relation to the width of the row. Options:

    Cover

    The background image covers the full width of the row.

    Contain

    Limits the background image to the width of the content area of the page.

    Auto

    Applies the background image size from the current style sheet.

    Background Position

    Determines the anchor point of the image in relation to the row. Options:

    Top Left

    Top Center

    Top Right

    Center Left

    Center

    Center Right

    Bottom Left

    Bottom Center

    Bottom Right

    Background Attachment

    Determines how the background image moves in relation to the scrolling page. Options:

    Scroll

    The background image is synchronized to move down as the page scrolls. See Parallax Background to control the scrolling speed.

    Fixed

    (Not available for mobile) The background image does not move as the container scrolls over the image, and is fixed at the specified background position.

    Background Repeat

    Determines if the background image is repeated to fill the available space. Options:

    Yes

    The background image is repeated to fill the available space.

    No

    Only a single instance of the background image appears.

    Parallax Background

    Determines the speed of a scrolling background image in relation to the scrolling of the page. The background can be set to scroll more slowly to create a sense of immersion. Options:

    Enable Parallax Background

    Enables parallax scrolling of the background image.

    Parallax Speed

    Determines how fast the background image moves in relation to page scrolling. Accepts values in the range of -1.0 to 2.0.

    Layout

    Determines the minimum height and vertical alignment of the row. Options:

    Minimum Height

    Determines the minimum height of the row. For example, you might set the minimum height to match the height of a background image to ensure that the full image is visible.

    Vertical Alignment

    Determines the vertical position of content containers that are added to the row.

    Advanced

    Alignment

    Determines the horizontal alignment of content containers that are added to the row. Options:

    Default

    Applies the default setting that is specified in the style sheet of the current theme.

    Left

    Aligns content containers along the left border of the row, with allowance for any padding that is specified.

    Center

    Aligns content containers in the center of the row, with allowance for any padding that is specified.

    Right

    Aligns content containers along the right border of the row, with allowance for any padding that is specified.

    Border

    Determines the border style that is applied to all sides of the row container. Options:

    Default

    Applies the default border style from the style sheet that is associated with the current theme.

    None

    Provides no visible indication of container borders.

    Dotted

    The container border appears as a dotted line.

    Dashed

    The container border appears as a dashed line.

    Solid

    The container border appears as a solid line.

    Double

    The container border appears as a double line.

    Groove

    The container border appears as a grooved line.

    Ridge

    The container border appears as a ridged line.

    Inset

    The container border appears as an inset line.

    Outset

    The container border appears as an outset line.

    Border Color

    Determines the color of the container border. Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.

    Border Width

    Determines the width in pixels of the container border.

    Border Radius

    Specifies the size of the radius that is used to round each corner of the container border.

    CSS Classes

    Specifies the names of CSS classes from the current style sheet which apply to the text container. Separate multiple class names with a space.

    Margins and Padding

    Determines the size, in pixels, of the outer margins and inner padding of the row. Enter the corresponding values in the diagram. Options:

    Margins

    The amount of blank space, in pixels, that is to be applied to the outside edge of all sides of the row container. Options: Top, Right, Bottom, Left.

    Padding

    The amount of blank space, in pixels, that is to be applied to the inside edge of all sides of the row container. Options: Top, Right, Bottom, Left.