Use the Row editor to change the row’s background color and 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:
- Hover over the top left of a row until a row button appears, and click “Row”.
The Row editor appears.
- Click the “Move row up” and “Move row down” arrows to move the current row up or down.
- To open the Row design editor, click “Edit Design”.
The Row design editor appears.
- 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.
- To clear the inner spacing inside the row, click “Clear Padding”.
- To add an entrance animation to the row (for example, fade from right, bounce in, zoom in), click “Entrance Animation”, and select an option.
- 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.
- To hide the current row on a specific device (desktop, tablet, mobile), click “Hide On Device”, and select the device.
- To copy the row, click “Copy”.
- To anchor the row to the page or delete an existing anchor, click “Set As Anchor” or “Edit Anchor”.
- To delete the row, click “Delete”.
To edit the background style or spacing of the row:
- Hover over the top left of a row until a row button appears, click “Row”, and then click “Edit Design”.
- 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.
- On the “Style” tab, select a Background Color, Image, or Video. You have the following options:
- Select a “Background color”. Gradient color overrides image, and vice versa.
- Select a “Backdrop filter”. Backdrop filters allow you to apply graphical effects such as blurring or color shirting to the area behind an element. To see the effect, you must make the element or its background partially transparent since this applies to everything behind the element. Select a “Filter Type” from the drop down menu, and move the slider to select a “Filter value”.
- 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.
- 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 Background Image Slider.
- To enable parallax scrolling on the background image, click the “Parallax scrolling” toggle. When this is enabled, background content scrolls more slowly than foreground content.
- Select to have the image display as a Cover, Full image, Tile, or No repeat.
- Configure the Position, Background overlay, Border, and Shadow for the image.
- Video. Paste the URL of the YouTube, Vimeo or Dailymotion video in the field provided. For more information about video backgrounds, see Video Backgrounds.
Background Image Slider
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.