Updated for Sparkle 2.6
Please report any shortcoming in this documentation and we’ll fix it as soon as possible!
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.
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.
Here are a couple of practical uses for boxes.
To create a header image with a logo on top:
Note how the blurred background makes the foreground text and logo stand out:
To create vertical slices:
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:
Note that the background image is fixed, so the text will scroll over it.