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

    • Related Articles

    • Building Forms with the Form Box Element

      The Form Box allows you to build custom forms using form blocks to add the fields you need. Forms are an effective way to receive messages and collect emails from your customers and visitors. Reactive’s Forms element enables you to create fully ...

    • 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

      Create buttons that stand out! This guide will show you how to add, customize, and style them easily, making them look great and work flawlessly. How to Insert a Button Element on Your Page To get started, simply drag and drop a Button Element onto ...

    • How to overlay content on a Box

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