Boxes | Sitely Documentation

Two types of Boxes

The first type of box is the straightforward standard box, it looks like this:

The second type of box is the Wide box, which looks like this:

The standard box is designed for creating boxes that remain within the left and right margins of your web page, while the wide box is designed to extend beyond the left and right borders of the page into the full browser width.

When a standard box is added to the canvas, it can be sized and positioned however you wish. Furthermore, the box can be styled to create just the effect you want. Here are the options available in the style panel.

The first option is the Fill. Here you can select a color with which to fill your box. You also have the option to create other fill types from the Content drop-down.

Box inspector with fill, content, border, rounding, shadow, opacity and background filter controls.

Box content menu offering gradient, image, vector, stock image and pattern fills.

If you choose the Gradient option, you will be presented with a gradient color bar where you can select two colors, as well as an angle for the gradient. Just click on each end of the color bar to choose your colors, and then apply an angle.

Linear gradient controls with blending, color stops, steps and angle.

If you choose the image option, you can choose an image from your disk to fill your box. This will give you other options on whether to fill or fit the image within the box. Click ‘Edit Crop’ and use ‘Fit’ or ‘Fill’ in the cropping controls. Filling the box will enlarge the image so that it fills the entire box, this may cause some clipping of the image. If you choose to Fit the image, it will not be clipped, it will be enlarged/reduced in size so that the entire image fits inside the box. Depending on the aspect ratio of the image, this option may create a letterbox effect, creating space on either side or above and below the image. When you choose the fill option, you will also have the ability to align the image within the box, either left, right or centered, or top, bottom or middle.

Box inspector with an image background and an Edit Crop control.

The SVG option is a great one for web designers. These are Scalable Vector Graphics that can be placed at any size on the canvas, while retaining their sharpness regardless of the degree of enlargement. We used SVG graphics in the example page header above. The three star icons are actually the same icon, duplicated and placed on the page at different sizes. The actual icon looks like this.

Notice that it’s black. This highlights another advantage of using SVG graphics. When the SVG is placed as an image, you can change the color/shade of the graphic by using the color overlay option in the style panel. Checking this option will allow you to select a color and apply it to the SVG. Note: You can simply drag the SVG onto the canvas where it will be placed as an image, rather than a box. For an SVG used as box content, use the alignment and Fill/Fit controls to fit it within the box.

SVG artwork controls for alignment and Color Overlay.

The Stock Image option works in exactly the same way as the normal image option. The only difference is that you would select an image from one of the stock image libraries supported by Sitely. Once your box is filled with an image, all the same styling options will be available.

Built-in and Custom pattern options will fill your box with one of the many pattern fills offered by Sitely. These patterns work in exactly the same way as when used as a page background fill. You can adjust the scale of the pattern to best suit your design.

Built-in Pattern controls with a fabric preview, fixed-position option and scale.

Styling your boxes.

Regardless of how you choose to fill your boxes, you can add additional styling options.

Set borders and corners for each device

Borders, corner shapes and shadows can have different settings on each device layout. Choose the layout you want to edit, then adjust that decoration’s Per Device controls. Preview the other widths when you change the styling.

Use Border to set the color and width, together or independently for each side.

Border controls with separate settings for each side of a box.

Choose the shape of the corners

Use Rounding to choose Round, Elliptical, Chamfer, Squircle, Inset or Round Inverse. Keep Same in All Corners enabled for a uniform result, or turn it off to edit each corner. Set the radius and any shape-specific controls. On supported elements, drag the canvas corner handles for a direct adjustment.

Rounding controls with all corners linked, Round selected and a 118-pixel radius.

Choose a shadow style

Use Shadow → Style to choose Drop, Long, Contact, Floating or Curved. Adjust the controls shown for that style, such as offset, blur, distance, color and curvature. With supported ground shadows, React to animations changes the shadow as the element moves.

Buttons can also have their own Hover and Pressed shadow appearance. Preview the transition together with the button’s other feedback.

Drop shadow controls for horizontal and vertical offset, blur and spread.

Opacity: This is where you can reduce the opacity of your box. Although you could simply change the color of your box to create a lighter shade of color, the opacity option may be preferable when creating certain types of effect where the underlying elements of the page need to show through the box.

Filter the background with Gradient Blur

Background Filters change the content visible behind the box. A transparent or partly transparent fill lets the filtered content show through.

Add Gradient Blur for a blur that varies across the box. Set the blur amount, Direction, Range Start and Range End to place its progression. Preview it over detailed content to see how the range changes the result. See the frosted-glass tutorial for the existing uniform-blur example.

Because boxes are really simple to create, they are the ideal element to use when first setting out your web page layout (wire framing). They can emulate images, background areas, buttons and form fields to give you a quick overview of how your page will look. Once you’ve got your basic wire frame design and start working on your content for real, it would be nice to be able to convert your boxes into some of the more common elements without having to start from scratch. Don’t worry, Sitely has you covered. You can right-click on a box and choose one of the convert options from the context menu.

Box context menu with Convert to Button, Convert to Text Input and Convert to Image commands.

The context menu also has another helpful feature that allows you to copy a style that has been applied to an element, and then paste that style to another element. For example, you could style a button on your page, complete with its hover and clicked states. When you want to add another button further down the page, you can copy the style of the original button, then paste the style to the new button. This keeps your designs consistent throughout your page.

Save a box style preset

Set the box’s fill, border, corners and shadow, then use Save Preset in Style. Select another box and click the preset thumbnail to apply the appearance. Its size and position stay in place. See Editing Content.