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.
To add a row
In the Page Builder panel under Layout, drag a new Row to the stage, just below the first row.
To format the row, hover over the container. Then in the toolbox, choose Settings, and complete the following as needed:
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:
- Full Width
- Full Bleed
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)”
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.
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.
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.
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.
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:
- 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”.
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:
Set the horizontal Alignment of content containers that are added to the row to one of the following:
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.
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
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.
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
Hover over the row container. Then in the toolbox, choose Settings ( ).
Row Toolbox Options
Update the settings as needed, using the field descriptions at the end of this page for reference.
When complete, tap Save in the upper-right corner to close the Edit Row page. Then again in the upper-right corner, tap Save.
|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.|
|Appearance||Determines how the background color and/or image appears in relation to the row container, and the width that is available for content.
|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:
|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:
|Background Size||Determines how the background image is scaled in relation to the width of the row. Options:
|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:
|Background Repeat||Determines if the background image is repeated to fill the available space. Options:
|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:
|Layout||Determines the minimum height and vertical alignment of the row. Options:
|Alignment||Determines the horizontal alignment of content containers that are added to the row. Options:
|Border||Determines the border style that is applied to all sides of the row container. Options:
|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: