Use the Box element for structure and layout

Set a tag, choose a layout, and learn how the Box element replaces older structure elements.

Build with one element instead of many. A Box replaces the Div block, Section, Container, Columns, Grid, V Flex, and H Flex elements in the Add panel. Set its HTML tag, choose its layout, and style it with classes. You can change the tag any time. Elements already on your site keep working, so you don't need to change anything.

Understand the Box element

A Box is the element you use for structure and layout. Find it in the Add panel under Structure, next to Quick Stack and Page Slot. You set its HTML tag in the Settings panel, and you control how it lays out its content with the display setting in the Style panel. For example, you can set display to Flex, or to Grid to build rows and columns.

Add a Box

To add a Box from the Add panel:

1. Open the Add panel
2. Go to the Structure section
3. Drag the Box element onto the canvas, or click it to add it in place

You can also add a Box with Quick find. Search for box to add a Box. Search for a tag to add a Box with that tag already set. For example, searching for div shows Box <div>, and searching for address shows Box <address>.

Set the tag on a Box

The tag controls the HTML element a Box publishes as. A Box can use the Div, Header, Footer, Nav, Main, Section, Article, Aside, Address, or Figure tag. A new Box uses the Div tag.

To set the tag on a Box:

1. Select the Box on the canvas
2. Go to the Settings panel
3. Click the Tag dropdown and choose a tag

The Navigator shows a Box with the Div tag as "Div" and a Box with the Section tag as "Section". Learn more about semantic HTML5 tags.

Set the layout of a Box

To change the layout of a Box, select it, open the Style panel, and go to the Layout section. Choose a Display option. For example, choose Flex for a flexbox layout or Grid for a grid layout. For a flex layout, use the Direction buttons to choose a horizontal or vertical direction. Learn more about display settings, flexbox, and grid.

Build common layouts with a Box

If you used an older element for a layout, use a Box instead:

• Container — use a Box and set a width that matches the width you want for your content
• Columns — use a Box and set display to Grid
• Grid — use a Box and set display to Grid
• V Flex and H Flex — use a Box and set display to Flex
• Section — use a Box and choose the Section tag

Convert an element to a Box or wrap it in a Box

You can convert a Section or a Link Block to a Box. You can also convert a Box to a Section, Link Block, or Custom Element.

To convert an element to a Box:

1. Right-click the element
2. Hover over Convert to
3. Choose Box

You can also search for "convert" in Quick find. Learn more about converting elements.

To wrap an element in a Box, select it and press Command + Option + G (on Mac) or Control + Alt + G (on Windows). You can also right-click the element, hover over Wrap in, and click Box. A Box created this way has the Div tag. Learn more about wrapping elements.

Style every Box with a tag at once

Use a tag selector to style every element that uses a tag, such as All Sections or All Divs. A tag selector styles an element by its tag, so a Box with the Section tag is styled by All Sections. New tag selectors start empty, so your site looks the same until you style one.

Review older elements on existing sites

Elements that are already on your site keep working. They aren't converted to Boxes automatically, they're hidden from the Add panel and Quick find, and exporting them with DevLink keeps working. If you open a site that uses them, here's what each one is.

Div block

A Div block is a basic, versatile element for site building. It defines a division in the HTML document, and the most common use is to group other elements together so you can edit and control them as one. For example, you can place a heading, a paragraph, and a button inside a Div block, and setting the Div block's width to 50% sets the content inside to 50%. A Div block is sized according to the content inside it, and centering it also centers its content.

Buttons, containers, and sections are Div blocks with extra properties. A Box with the Div tag is the same as a Div block.

Div blocks can create blank space between elements, but margin and padding are a better way to create space. Use a Div block for space only if you have no other option.

Section

A Section is a structure element with a width of 100%, so it extends across the full width of the browser window. Sections often work as page divisions for your content. By default, sections span the full width of the body, don't have padding inside, and have the Section HTML5 tag. Learn more about building web layouts.

The height of a Section adjusts to its content. If you set a specific height, also set a minimum height (e.g., 500px) so the Section can still grow with its content. For hero sections, use the viewport height (vh) unit, which adjusts to the size of the viewport. For example, 100vh fills 100% of the viewport height. Learn more about viewport units.

Container

A Container is a Div block with predefined styles that keep your content centered and responsive across breakpoints. It has a max-width of 940 pixels on desktop and 728 pixels on tablet, along with left and right auto margin to center your content. On mobile landscape and mobile portrait, the Container extends to fill the full width of the screen.

Containers are typically nested inside Sections. Sections are full width by default, which can make content too wide to read on large displays, and a Container keeps the content centered and legible. To organize content further, nest Div blocks inside the Container.

The Container's predefined max-width stops any custom width from going past that limit. You can adjust or remove the max-width in the Style panel, but that may affect how your layout responds across breakpoints. Changing a Container's display setting to flex or grid may cause unexpected spacing. Add a Div block to the Container and change its display settings instead.

Columns

Columns organize content side by side. Each Columns element is a single row of columns. By default, a Columns element has two columns, and each column has 10px of padding on the left and right. To change the number of columns, select the Columns element and go to Settings panel > Columns options. There, you can choose a layout, the number of columns, and their proportional widths. You can also adjust the column sizes manually under Customize. The proportions always add up to 12.

To make Columns responsive, go to Settings panel > Columns options and set the columns to display horizontally or vertically on different breakpoints.

V Flex and H Flex

V Flex and H Flex are Div blocks preset to flexbox. V Flex is set to vertical flexbox, so child elements flow up to down. H Flex is set to horizontal flexbox, so child elements flow left to right.