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.
Before editing rows, create a backup of your site. This ensures that you will be able to restore a previous version of your site if you make a mistake. For more information about backing up your site, see Backup Sites.
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. For more information, see Row Design Editor.
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 lock the row for client editing, click Lock for client editing.
- 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.
Row Design Editor
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 use a Background Color, Image, or Video. You have the following options:
- Color.
- 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 shading 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.
- 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 Background Image Slider.
- 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 Background Image Slider.
- 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.
- Color.
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.
Background Image Sliders can be added to any column as well.