Boxes

Boxes are decorative elements that can be used as backgrounds for actual content, and can contain a fill color, a gradient fill or an image.

When configured with an image background, box settings are very similar to those of images, and can be visually indistinguishable from image elements. The difference is images are intended as content, boxes as background/decoration, which makes a difference mainly for accessibility purposes.

Boxes can be stretched to the full browser width, this is so common there’s a shortcut “wide box” in the toolbar.

The “Fixed in window” option locks the background so that the visible portion changes when the box moves or you scroll. This can be used for many interesting visual effects such as a quasi parallax effect, as illustrated in many of the sample designs.

Box options

Regardless of box content, you can set an image a border. The border is added outside of the box extent. You can either have a single border setting for all sides or a separate setting for each edge, the canvas will show the exact output.

Image corners can be rounded with a specified pixel radius, you can opt for each corner to be rounded or not.

Finally you can add a drop shadow.

Examples

Here are a couple of practical uses for boxes.

To create a header image with a logo on top:

  • • add a wide box to the canvas
  • • set a large background image, say a 2500x1000 JPEG image
  • • enable background stretching to fill
  • • align the image top-center
  • • add the image blur property
  • • use a heavy weight title font

Note how the blurred background makes the foreground text and logo stand out:

 

To create vertical slices:

  • • set a base background color or pattern
  • • add a few wide boxes, as tall as your screen
  • • add some large background images
  • • enable background stretching to fill
  • • set fixed positioning for the images
  • • add the image blur property to the first one
  • • use a heavy weight title font

The image at the right is an example of how the layout could end up, and since the wide boxes are very tall and the image positioning is fixed, scrolling through the images results in a full screen experience that’s integrated in the site.

It's also possible to combine boxes. 

Here's another example of two boxes with a text element:

  • • a very tall wide box with the Darth Vader image
  • • a normal box with a non-opaque color (and a text element on it) 

Note that the background image is fixed, so the text will scroll over it.

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.