Studio uses a method called "box layout" to create the layout of a web page. By stacking box-shaped elements, called "boxes," like building blocks, or by placing other boxes inside boxes, the overall structure of the page becomes easier to grasp.
This technique is based on the structure of a website created by coding.
Arrangement of boxes
Boxes can be placed side by side vertically, horizontally, and horizontally, and their alignment and margins can be specified.
More boxes can be added within a box, and multiple boxes can be placed within a single box, creating a matryoshka-like hierarchy. ( Nesting structure )
Grouping of boxes
Box grouping is the operation of nesting multiple boxes together in a single box. The inner box is called the "child box" and the outer box the "parent box.
Grouped boxes can be treated as a single entity. When a parent box is selected, its child boxes can also be selected at the same time, making it easier to edit the layout.
Types of Boxes in Studio
In Studio, boxes are used according to the content to be added.
Box | Description |
Section | Boxes that make up the larger cohesive structure of a web page (header, main, footer, etc.) |
Boxes | Boxes for grouping other elements or structuring layouts |
Box for displaying image files | |
Box for displaying and playing video files | |
Box for displaying text content such as sentences and headings | |
Box for displaying long text content such as CMS content | |
Box for displaying icons | |
Box for embedding tools or content from external services by writing code | |
Form Box | Box for adding contact forms to your site |
Boxes to organize sections of a web page
Web pages are divided into large sections by semantic cohesion.
As an example, the following site is composed of three major sections: Header, Main, and Footer Web page sections are also composed of boxes in Studio.
Composing parts of a web page with boxes
Inside the boxes that carry each section of the web page, we will place a box that will be each element of the web page. For example, an image gallery, a profile, a submit button, a form, and so on.
By nesting and stacking boxes, you can create various parts on a web page, such as buttons and forms.
As an example, the figure below shows how a single form part can be composed of various boxes (text boxes, input boxes).
Using the Design Editor
Once you understand the concept of boxes, you can use the Design Editor to create the actual layout. See Design Editor for more information on how to view the Design Editor screen.
How to add a box
Open the Add panel.
[Open the Basic tab. [On the Parts or Sections tabs, you can also select an element with multiple boxes pre-packaged together.
Click on the box you wish to place and it will be placed on the screen. You can also drag a box from the Add Panel and place it on the canvas.
Tips: The box will be placed below the currently selected box. If nothing is selected, it will be added to the bottom of the screen.
Once the boxes are placed, you can specify the margins and positioning between the boxes.
Box Design
The size of the box can be freely changed, not only with fixed values such as px, but also with flexible units such as % or auto.
Reference: How to set box size units
Detailed design settings such as rounded corners, borders, and background color can also be made.
Margins between boxes
Margins between boxes can be set by Margin, Padding, or Gap.
For details, see How to set Margin, Padding, and Gap.
Type | Margin Position | Color |
Margin | Outside the box | Orange |
Padding | Inside of box | Green |
Gap | Between boxes | Pink |
Box Placement
You can adjust the position of the child boxes within the parent box.
(e.g., centered, upper right)
For details, see Adjusting Box Placement.
Orientation of boxes
Specifies the direction in which grouped child boxes are aligned within the parent box.
Select [→] to align the boxes from left to right.
Select [Wrap Icon] to wrap the child boxes inside the parent box.
For details, please refer to "Changing the alignment of boxes horizontally or vertically ".
Setting up responsive design
Responsive design is the optimization of a website's design and layout according to the screen size and resolution of the device.
By setting this up, your website can be viewed comfortably from any device.
Please refer to this article for details on how to set up responsive design.
Steps from Creation to Publication] Table of Contents
How to create a layout (this article)
When you have a problem