Row Editor

Use the Row editor to change the row's background (color or image), add a border, or adjust the inner and outer spacing of the row. Use rows to organize and arrange the content in your site.

To configure a row:

1. Hover over the top left of a row until a row button appears, and click Row.
   The Row editor menu appears.
2. Click the Move row up and Move row down arrows to move the current row up or down.
3. To open the Row design editor, click Edit Design. For more information, see Row Design Editor.
   The Row design editor appears.
4. Click +Add and select one of the following:
   • Row above. Add a new row above the current row.
   • Row below. Add a new row below the current row.
   • Section. Add a section to the row.
   • Column. Add a column to the row.
   • Inner row. Add a row within the current row.
5. To clear the inner spacing inside the row, click Clear Padding.
6. To revert the spacing to what you defined in theme spacing, click Reset To default spacing.
7. To add an entrance animation to the row (for example, fade from right, bounce in, zoom in), click Entrance Animation, and select an option.
8. To save the row as a section, click Save as Section and select to save only the current row, multiple rows, or the full page.
9. To hide the current row on a specific device (desktop, tablet, mobile), click Hide On Device, and select the device.
10. To copy the row, click Copy.
11. To anchor the row to the page or delete an existing anchor, click Set As Anchor or Edit Anchor.
12. To delete the row, click Delete.

Row Design Editor

To edit the background style or spacing of the row:

1. Hover over the top left of a row until a row button appears, click Row, and then click Edit Design.
2. On the Settings tab, you have the following options:
   • Full bleed row. To change the row into a full bleed row, which allows content to span the entire width of the screen, click the Full bleed row toggle. If you choose not to have full bleed rows, the content width is limited to 960px.
3. On the Style tab, select a use a Background Color, Image, or Video. You have the following options:
   • Color.
     • Select a Background color. Gradient color overrides image, and vice versa.
     • Click Border to select a border type, and move the slider to set the border width.
     • To add a shadow, click the Shadow toggle, and select a color, type, and position for the shadow.
   • Image.
     • To add an image to the background, click + to open the image picker.
     • To create a background image slider, select multiple images from the image picker, and see Image Slider for Background.
     • Select to have the image display as a Cover, Full image, Tile, or No repeat.
     • To enable parallax scrolling on a background image, click the Parallax scrolling toggle. When this is enabled, background content scrolls more slowly than foreground content.
     • Note

       Parallax scrolling is not an option for the Image Slider for Background or in mobile.

       For both rows in the Classic version of the editor and Editor 2.0 sections, The option to keep a background image static is not available for tablet and mobile due to an iOS limitation.

     • Configure the Position, Background overlay, Border, and Shadow for the image.
   • Video. Click Select Video to view uploaded videos or paste the URL of the YouTube, Vimeo or Dailymotion video in the Content Field provided. For more information about video backgrounds, see Video Backgrounds.

Image Slider for Background

After selecting multiple images in the image picker, click Done. Once the slider is created, select a Slide transition from the drop-down menu, and move the slider to select a Slide speed (seconds).

Any of the other background image options such as Background Overlay, Positioning, and display style can be applied to the slider.