Updated for Sparkle 2.2
Boxes are decorative elements and can be used for backgrounds for a caption, gradients, horizontal “slices” or header images.
Their settings are mostly identical to those of images, and boxes with a background image can be visually indistinguishable from image elements. The main difference is that boxes cannot have a link, but they can be placed off-canvas.
There are two types of boxes you can add to a page, both available through buttons in Sparkle’s toolbar: Box and Wide Box.
A Box can be repositioned horizontally and vertically, while a Wide Box can be moved only vertically and can automatically adjust their width and grow “as wide as the browser goes”.
A Box can be filled with a solid color from the round swatch near "Fill" or with one of three options from the "Content" menu. You can:
As explained in detail in the Images section, if you choose to put an image into a box there will be a “Stretch” checkbox, a “Fit” and "Fill" button to adjust how and how much of the picture will be seen, and a “resolution report” bar to assess the quality and density of the output image.
The “Fixed in window” checkbox is available only for boxes and locks the background so that the visible portion changes when the box moves or you scroll.
A border, always displayed on the outside, can be added to all kinds of boxes ticking the corresponding check-box and picking a line type, color and width. Unchecking the "Same on All Sides“ checkbox allows the specification of different types, colors
and width of borders for each side of a box.
Checking the "Rounding" option a box can have rounded corners. Each corner can be rounded independently through the four way rounding control, but the radius will be the same for all corners.
Boxes can also have a Shadow. You can choose the color and position plus thickness adjusting a Horizontal and a Vertical slider. A third slider, Blur, helps attain a drop shadow effect, which can help a box and its content stand out.
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.
Please report any shortcoming in this documentation and we’ll fix it as soon as possible!