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

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

    • Using a Box Element for a background image

      The Box element keeps its minimum height consistent across all device sizes, ensuring your store looks stable no matter what device your visitors use. However, when you add a background image to a box, you may notice that the image looks cut off at ...

    • 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 Core Elements Reactive Forms consist of ...