A website builder's component model simplifies website creation by dividing the design into easily manageable containers.
In this Article:
The Hierarchy of Website Containers:
- The Website Builder comprises multiple sections, organized in box, rows, and columns.
- Every section contains a box, which can have several rows and each row has can have multiple columns.
- We have the ability to incorporate various sections into our website.
-
We can personalize each section by selecting background colors, repositioning a section, adjusting text styles, and managing spacing etc.
Box:
-
The Box component presents content within a section on our webpage.
-
Modify the appearance and readability of our content within the Box. Utilize the content label to adjust the size of the content inside the box.
-
Additionally, we can also change the position of the content within the Box.
Row:
- Click Row to access settings.
- We can duplicate a row or delete a row by clicking on the respective icons.
- Customize the row's appearance by changing the background color, adding a background image, or applying a gradient.
- For rows with multiple columns, adjust the Grid settings to modify the number of columns per row.
- Column Gap is the amount of fixed width that we can have between every column of the row.
- Under the Responsive Label, we have the option to control the visibility of the row based on the screen size.
- Click on Advanced settings.
- Multiple columns can be added within a row to organize content horizontally.
- Click Column to access Column settings.
- We can duplicate a column or delete a column by clicking on the respective icons.
- We can also move across different columns horizontally by clicking on the move left/right icon.
- Customize the column's appearance by changing the background color, adding background image, or applying a gradient.
- Placement: The content block can be positioned either horizontally or vertically, with the added margins and padding for a more customized layout.
- On Click: Specify a URL that the user will be redirected to when they click anywhere within the column area.
- Under the Responsive Label, we have the option to control the visibility of the column based on the screen size.
- Click on Advanced settings for more.
