The Box element is a flexible tool for organizing your page layout, structuring sections, and creating overlays with image or video backgrounds.

Adding Boxes to Your Page

Boxes are simple to use:

1. From left sidebar menu.

2. Drag and drop the Box element onto your page.

Setting the Minimum Height

By default, a new Box has a minimum height of 100px.

• Adjust this value in the right sidebar menu to give content more room or to showcase background images effectively.

Making a Box Full Width

If your page isn’t full width, you can expand a Box to use the entire horizontal space by enabling the Full Width toggle in the right sidebar menu.

Setting Backgrounds in a Box

Boxes support color, image, and video backgrounds, making them a versatile design tool.

Background Image

To add a background image:

1. Go to Background >  Image & Overlay in the right sidebar.

2. Click Choose Image.

Image fit options:

• Cover: Fills the box while maintaining aspect ratio (may crop edges).

• Contain: Fits the image fully inside the box (may leave empty space).

• Auto: Automatically adjusts width and height.

Repeat image options:

• Uniform: Repeats the image both horizontally and vertically until the entire box is filled.

• Horizontal: Repeats the image only across the horizontal axis.

• Vertical: Repeats the image only across the vertical axis.

• No repeat: Displays the image once with no repetition.

Adding and Aligning Content in Boxes

• Drag any element into the Box’s drop zone to layer content over backgrounds.

• Align content vertically to top, center, or bottom using the alignment settings.