Building Website
      Back to home
      1. Support Center
      2. Website
      3. Building Website

      Exploring the various Containers of Website Builder.

      A website builder's component model simplifies website creation by dividing the design into easily manageable containers.

      In this Article:

      1. The Hierarchy of Website Containers.
      2. Sections
      3. Box
      4. Row
      5. Column

      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.

      Sections:

      • 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.

      • Click Row to access settings.

        roww-2
      • We can duplicate a row or delete a row by clicking on the respective icons. 

        roww-6
      • Customize the row's appearance by changing the background color, adding a background image, or applying a gradient.

        roww-3
      • 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.

        roww-4
      • Under the Responsive Label, we have the option to control the visibility of the row based on the screen size.

        roww-5
      • Click on Advanced settings. 

        roww-1
      Column:
      • 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.

        column--3
      • 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.

        column--1
      • Under the Responsive Label, we have the option to control the visibility of the column based on the screen size.

        column--4
      • Click on Advanced settings for more.

        col-5