A box is an empty square that is used to create sections, cards, headers, shapes and any basic website element.
Additionally, on STUDIO any element including images, icons, videos and iFrames have box properties, therefore the following points about adding, placing, sizing and styling boxes apply to them too.
Adding a box
To add a box, drag and drop a square from the left add panel, or simply click on it.
Placing & moving the box
To learn how to move box and other elements in other positions, read this article about positioning and layout on STUDIO.
Resizing a box
To resize a box, or other element, drag its edges. Dragging automatically gives an element a pixel value.
Alternatively, enter precise size values from the top bar.
Styling a box
The following properties can be applied both to boxes and other elements from the tab “box” on the top bar.
From the top bar you will also find
- Margin & Padding: read more on positioning & layout.
- Width & height: read more on width & height units of size.
Changing the radius of an element makes its edges more or less round depending on the value set. There are two ways of setting radius on STUDIO:
- From the top bar
- Directly on the canvas, by dragging the circle on the top left corner inside the box or element.
Opacity lets you change the vividness of the color of an element. It can set from the top bar.
Fill is the background color of an element.
Learn more about how to use the color palette here.
You can add borders to only one side or all side of a box or element at once.
Learn more about borders here.
Shadow can be used to add depth to buttons or other elements on a webpage.
On STUDIO, you can use one of the 4 preset shadow styles, or make your own by dragging on the graph or inputting precise values.
Learn more about shadows here.