Boxes allow you to group the content on your page for visual contrast and ease of editing. Using boxes improves the readability and flow of your pages, and that's good news for your conversion rate!
This article will explain how to group content using boxes and how to update box properties.
Grouping Your Content With Boxes
If you already have content on your page:
- Drag and drop the Box
widget from the widget panel on the left-hand side of Classic Builder. - Drag your content into the box which will nest it.
- You'll see a checkerboard pattern when you're dropping into a box.
If you're starting from scratch:
- Drag and drop the Box widget from the widget panel on the left-hand side of Classic Builder.
- Drag and drop new widgets (text, images, etc.) into the box; this will nest the elements in the box.
- You'll see a checkerboard pattern when you're dropping into a box.
To check to see if your items are nested in a box, check the Content Panel:
Once the objects are nested you can now move them about your page as a single object.
Updating Box Properties
To view box properties, select the box and navigate to the Properties panel on the right of the Classic Builder.
The editing features are as follows:
Geometry
To view and edit box geometry, select the box and navigate to the Properties panel on the right of the Classic Builder.
Geometry allows you to change the box size and position, and is the first category from the top of the properties pane.
Border Properties
Select a border style and adjust its color, location (inside or outside the box), the sides of the box it's applied to (top, bottom, right, left), and its corner radius.
Select Ensure Maximum Curvature; this will maximize the rounding of the corners based on their size.
Background Properties
Choose a solid color, gradient, or image. For images, you can also adjust the underlay color, opacity, position, and tiling.
Box background properties have all the same functionality of Page Section background properties, which you can read more about in the article below:
Editing Page Section Properties
Glossary
Boxes: Used to group related/similar content and/or visually isolate content to bring focus to a certain object.