Box

The box block is effective for maintaining your content neatly arranged towards the center of the screen. It’s commonly utilized alongside a segment block. You can incorporate a box from the Insert panel > Structure segment.

In this session, we will discuss:

1. Structure of a box
2. How to utilize boxes, segments, and section blocks

Structure of a box

A box is a section block with predefined styles. It features a maximum width of 940 pixels on bigger screens to center your content with respect to the browser window. On smaller gadgets (such as phones and tablets), boxes stretch across the entire screen width.

You can modify the maximum width of a box to enable it to still adapt to the viewport size but only expand up to the set maximum width.

How to utilize boxes, segments, and section blocks

In web design, boxes are frequently positioned inside section blocks. A section, by default, occupies the entire width. You can place a box within the section to keep elements neatly grouped towards the center. Subsequently, you can utilize segment blocks inside boxes to arrange elements through layout, spacing, dimensions, and placement.

Expert tip: A section is a section block that spans the full width and contains a predefined “Section” HTML5 tag. A box is a section block with a preset maximum width.

Discover more about constructing web layouts.