How to use the Box Element to style and structure page sections

How to use the Box Element to style and structure page sections

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 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.

    • Related Articles

    • Create scrolling sections with the Slider Element

      The Slider Element is a powerful tool for creating scrolling sections of content on your pages. Each slide is its own container, so you can add and customize elements freely. A common use is building image slideshows to showcase products. Slides per ...

    • Create expanding and collapsing sections with Accordions

      The Accordion element allows you to organize your page content with expandable and collapsible sections, making it ideal for pages like FAQs or other structured content. How to Use the Accordion Element To use the Accordion Element, simply drag it ...

    • How to use and style buttons in Reactive

      How to Insert a Button Element on Your Page To get started, simply drag and drop a Button Element onto your page. A default style will already be applied, but you can freely customize it to match your design. How to Change the Font of Your Button ...

    • How to Use the Icon Element to Add Icons to Your Page Content

      Icons are a simple yet powerful way to enhance your page design. They can quickly communicate meaning, serve as visual alternatives to text, and even act as intuitive button replacements. How to Add an Icon To add an icon, drag the Icon Element from ...

    • How to overlay text, buttons, and other elements on an image or video, using the Box element

      Use the Box Element to create a background and then place text, buttons, or any other elements on top of it. The Box Element offers a variety of useful features, including the ability to set a minimum height, add a background, and insert multiple ...