In Studio.Design, web page layouts are built using a method called "Box Layout." By stacking box-shaped elements — called "boxes" — like building blocks, or by placing boxes inside other boxes, you can easily understand and manage the overall structure of your page.
This approach is based on how websites are structured when built with code.
Placing Boxes
Boxes can be arranged side by side or stacked vertically, and you can control their alignment and spacing.
You can add boxes inside other boxes. You can place multiple boxes within a single box, or create deeper levels of hierarchy — like nesting dolls. (Nesting)
Grouping Boxes
The process of placing multiple boxes inside a single box to create a nested structure is called Grouping. The boxes inside are called "child boxes," and the outer box is called the "parent box."
Grouped boxes can be treated as a single unit. When you select a parent box, all of its child boxes are selected at the same time, making it easier to edit your layout.
Types of Boxes in Studio
In Studio.Design, different types of boxes are used depending on the content you want to add.
Box | Description |
Section | A box that defines a major area of a web page (such as header, main, or footer) |
Box | A box used to group other elements and structure your layout |
A box for displaying image files | |
A box for displaying and playing video files | |
A box for displaying text content such as paragraphs and headings | |
A box for displaying longer text content, such as CMS content | |
A box for displaying icons | |
A box for embedding external tools and content using code | |
Form Box | A box for adding a contact form to your site |
Building Web Page Sections with Boxes
A web page is divided into large sections, each representing a meaningful group of content.
For example, the site shown below is made up of three main sections: "Header," "Main," and "Footer." In Studio.Design, these web page sections are also built using boxes.
Building Web Page Components with Boxes
Inside the boxes that make up each section, you place additional boxes for individual elements — such as image galleries, profiles, submit buttons, and forms.
By nesting and stacking boxes, you can create a wide variety of web page components like buttons and forms.
For example, the diagram below shows how a form component is made up of various boxes (text boxes, input boxes) combined into a single unit.
Using the Design Editor
Once you understand the concept of boxes, you're ready to start building layouts in the Design Editor. To learn more about navigating the Design Editor, see Design Editor.
How to Add a Box
Open the Add panel.
Go to the [Basic] tab. You can also use the [Parts] or [Sections] tab to choose pre-built elements made up of multiple boxes.
Click the box you want to place, and it will be added to the screen. You can also drag it from the Add panel and drop it onto the canvas.
Tips: A new box is placed below the currently selected box. If nothing is selected, it will be added at the bottom of the screen.
After placing your boxes, you can adjust the spacing and positioning between them.
Designing Boxes
You can freely change the size of a box. In addition to fixed values like px, you can also use flexible units such as % or auto.
Reference: How to Set Box Size Units
You can also fine-tune design details like rounded corners, borders, and background colors.
Spacing Between Boxes
Spacing between boxes is controlled using margin, padding, or gap.
For more details, see How to Set Margin, Padding & Gap.
Type | Where the spacing is applied | Color |
Margin | Outside the box | Orange |
Padding | Inside the box | Green |
Gap | Between boxes | Pink |
Box Alignment
You can adjust where child boxes are positioned within a parent box.
For example: centered, or aligned to the top-right.
For more details, see Box Alignment.
Box Direction
You can set the direction in which grouped child boxes are arranged inside a parent box.
Select [→] to arrange boxes from left to right.
Select the [wrap icon] to make child boxes wrap inside the parent box.
For more details, see Switching Between Horizontal and Vertical Layout.
Setting Up Responsive Design
Responsive design means optimizing your website's design and layout to adapt to different screen sizes and resolutions.
By setting this up, your site will look great on any device.
For instructions, see the article below.