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.

  • Radius
  • Opacity
  • Fill
  • Border
  • Shadow

From the top bar you will also find 

Radius

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

Opacity lets you change the vividness of the color of an element. It can set from the top bar.

Fill

Fill is the background color of an element. 

Learn more about how to use the color palette here

Border

You can add borders to only one side or all side of a box or element at once.

Learn more about borders here.

Shadow

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

Did this answer your question?