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 layout of the row. Additional content elements can be dragged to the row from the Page Builder panel on the left.

Row Toolbox

To add a row

  1. In the Page Builder panel under Layout, drag a new Row to the stage, just below the first row.

  2. To format the row, hover over the container. Then in the toolbox, choose Settings, and complete the following as needed:

    Appearance

    The Appearance setting determines how the background color and/or background image appears in relation to the container and width of the content area.

    Set Appearance to one of the following:

    • Contained
    • Full Width
    • Full Bleed

    Appearance

    Background Color

    1. Use one of the following methods to set the background color:

      Method 1: Enter the Value

      In the “No Color” box, enter one of the following:

      • A predefined color name, such as “White”
      • The hexadecimal color value for the color, such as “#ffffff”
      • The rgba value for the color, with opacity percent, such as “rgba(255, 255, 255, 0.75)”

      No Color

      Method 2: Choose the Value

      Click the swatch to the left of the “No Color” box. Then do one of the following:

      • In the color picker palette, choose the color swatch.
      • In the color picker, drag the cursor to the color that you want.

      Choose Swatch

    2. Page Builder supports a transparency layer, or “alpha channel” that can be used to create backgrounds with varying degrees of opacity. Do the following to set the opacity of the background color:

      • Locate the Opacity slider just below the color picker.

      • Drag the slider to the 75% setting. Then, tap Apply.

        The box below the slider shows the current red, green, blue, and alpha values (rgba). The last number indicates the current opacity percentage as a decimal.

        Set Opacity

    Background Image

    • To apply a Background Image to the row, do one of the following:

      • Tap Upload. Then, navigate to the image on your local drive, and tap Open.
      • Tap Select from Gallery. Then in the gallery, select the image that you want to use for the row background, and tap Add Selected.

      The image is added to the gallery, and the dimensions of the image appear below the image in the Background section.

      Background Image

    • To use a different background image for mobile devices, repeat these steps to specify the Background Mobile Image that you want to use.

    Background Size and Position

    • Set the Background Size to one of the following:

      Cover The background image covers the full width of the row.
      Contain The background image is limited to the width of the content area.
      Auto Applies the size from the current style sheet.

      Background Size

    • To determine how the background image is anchored in relation to the row, set Background Position to one of the following:

      Top Left, Center, Right
      Center Left, Center, Right
      Bottom Left, Center, Right

      The anchor point is like a push pin that attaches the image to the row at the specified background position.

    • The attached background image can be set to a fixed position, or to move as the page scrolls. Set Background Attachment to one of the following:

      • Scroll
      • Fixed (Desktop only)
    • To control the speed of a scrolling background image, expand the Parallax Background section. Set Enable Parallax Background to “Yes”. Then, enter the Parallax Speed as a decimal value between -1.0 and 2.0.

    • To repeat the background image as a tiled background, set Background Repeat to “Yes”.

      Parallax Background

    Layout

    • Enter the Minimum Height of the row in pixels.

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

    • Choose one of the following Vertical Alignment settings to align any content containers that are added to the row:

      • Top
      • Center
      • Bottom

      Layout Settings

    Advanced

    • Set the horizontal Alignment of content containers that are added to the row to one of the following:

      • Default
      • Left
      • Center
      • Right
    • Choose the Border style that you want to apply to all sides of the row container.

    • To choose the Border Color, do one of the following:

      • Click the “No Color” swatch, and then choose a colored swatch.
      • In the “No Color” field, enter a valid color name or hexadecimal value.

      Then, tap Apply.

      Border Color

    • Enter the Border Width of the row container in pixels.

    • For a border with curved corners, enter the Border Radius in pixels.

      The row in the following example has a border radius of 15.

      Row with Border Radius of 15

      Margins & Padding

  3. To preview how the content looks from the storefront, click the Full Screen icon ( ).

    You can continue to work in full screen mode, or click Close ( X ) in the upper-right corner to return to the workspace.

  4. When complete, scroll up to the top of the page, and tap Save & Close to return to the Pages grid.

    Adding a Row

To change row settings

  1. Hover over the row container. Then in the toolbox, choose Settings ( ).

    Row Toolbox Options

  2. Update the settings as needed, using the field descriptions at the end of this page for reference.

  3. When complete, tap Save in the upper-right corner to close the Edit Row page. Then again in the upper-right corner, tap Save.

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 container 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.
ContainedThe background color or image is limited to the maximum page width that is defined by the theme.
Full WidthLimits 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 BleedNeither 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](/m2/ee/user_guide/design/themes.html) 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:
UploadUploads an image file from your local computer to the gallery, and applies it as the background image for the row.
Select from GalleryPrompts 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:
UploadUploads an image file from your local computer to the gallery, and then applies it as the background image for the row.
Select from GalleryPrompts 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:
CoverThe background image covers the full width of the row.
ContainLimits the background image to the width of the content area of the page.
AutoApplies 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:
ScrollThe 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:
YesThe background image is repeated to fill the available space.
NoOnly 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 BackgroundEnables parallax scrolling of the background image.
Parallax SpeedDetermines 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 HeightDetermines 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 AlignmentDetermines 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:
DefaultApplies the default setting that is specified in the style sheet of the current theme.
LeftAligns content containers along the left border of the row, with allowance for any padding that is specified.
CenterAligns content containers in the center of the row, with allowance for any padding that is specified.
RightAligns 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:
DefaultApplies the default border style from the style sheet that is associated with the current theme.
NoneProvides no visible indication of container borders.
DottedThe container border appears as a dotted line.
DashedThe container border appears as a dashed line.
SolidThe container border appears as a solid line.
DoubleThe container border appears as a double line.
GrooveThe container border appears as a grooved line.
RidgeThe container border appears as a ridged line.
InsetThe container border appears as an inset line.
OutsetThe 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 that 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:
MarginsThe 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
PaddingThe 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