Column Editor

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

To configure a column:

1. Right click on the column. The column editor menu appears.

   Note

   If there is no padding on the column, the right click will not be directly accessible. To access the column in this case, right click on a widget that is in the column (this should bring up the context menu for the widget and will note the name of it at the top), click Select Container, select Column. To verify it has changed to the column's context menu, refer to the top; it should now say Column.

2. Click the Move column left and Move column right arrows to move the current column left or right (the arrows will be disabled if there is only one column).

3. To open the Column design editor, click Edit Design. For more information, see Column Design Editor. The Column design editor appears.

4. Click +Add and select one of the following:

5. Column. Add a new column to the current row (a max of 4 columns can be added per row).
6. Inner row. Add a row within the current column.
7. Widget below. Add a widget.

8. To clear the inner spacing inside the column, click Clear Padding.

9. To revert the spacing to what you defined in theme spacing, click Reset To default spacing.

10. To add an entrance animation to the column (for example, fade from right, bounce in, zoom in), click Entrance Animation, and select an option.

11. To hide the current column on a specific device (desktop, tablet, mobile), click Hide On Device, and select the device.

12. To copy the column, click Copy.

13. To anchor the column to the page or delete an existing anchor, click Set As Anchor or Edit Anchor.

14. To delete the column, click Delete.

Column Design Editor

To edit the background style or spacing of a column:

1. Right click on the column, then click Edit Design.

   Note

   If there is no padding on the column, the right click will not be directly accessible. To access the column in this case, right click on a widget that is in the column (this should bring up the context menu for the widget and will note the name of it at the top), click Select Container, select Column. To verify it has changed to the column's context menu, refer to the top; it should now say Column.

2. 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 Background Image Slider.
     • 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. Click Select Video to view uploaded videos or paste the URL of the YouTube, Vimeo or Dailymotion video in the area 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.