Using Boxes

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 help you out with:

  • Grouping and isolating content for ease of editing
  • Stylizing boxes for visual effect

Group Your Content With Boxes

If you already have content on your page:

  1. Drag and drop the Box Widget from the Widget Panel on the left
  2. 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:

  1. Drag and drop the Box Widget from the Widget Panel on the left
  2. Drag and drop new widgets into the box which will nest them. (You'll see a checkerboard pattern when you're dropping into a box)

Once the objects are nested you can now move them about your page as a single object.  Just select the box and proceed from there.


Visually Isolate Content with Boxes

To bring focus to your object:

  1. Drag and drop the Box Widget onto your landing page
  2. Size the box around the other content you wish to highlight (like your form)
  3. Click "Send Backward" in the top toolbar (you maybe have to click a few times to get through the layers on content on your page) to send it behind another object.

Box Properties

To view box properties, select the box and the properties pane on the right of the Page Builder will display the box properties (second category from the top).

Geometry

To view and edit box geometry, select the box and navigate to the properties pane on the right of the Page 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 colour, location, the sides of the box it's applied to, and its corner radius. Select "Ensure Maximum Curvature" and Unbounce will maximize the rounding of the corners based on its size.

Background Properties

Choose a solid colour, gradient or image and the associated colour, opacity, and position and tiling if you've chosen an image.

Box background properties have all the same functionality of Page Section background properties, which you can read more about in the article below:

Background Properties


Glossary

Boxes: Used to group related/similar content and/or visually isolate content to bring focus to a certain object.

 

Back to: Building Your Landing Pages >> 

Was this article helpful?
1 out of 1 found this helpful
Powered by Zendesk