Design the layout with the Section widget

Before creating the content of the page, you need to define the layout – for example, how many columns a page should have, what margins and paddings should be defined, what background colors should be applied, etc.

After creating the Next.js page, the process involved in designing the layout of a page is the following: 

1. Add the Section widget. 
   You start creating the layout by adding one Section widget. 
   
2. Add Section widgets below and above. 
   To define your layout vertically, you use one or more Section widgets, placed one above the other. 
   
3. Configure the columns. 
   To define your layout horizontally, you use one or more columns.  
   You can separate one Section widget into as much as six columns. 
   
4. Nest Section widgets 
   To accomplish more complex layouts, you can nest Section widgets. 
   For example, you can place two Section widgets one above the other inside the column of another Section widget. 
   
5. Style the Section widgets. 
   After defining the rows and the columns of your page, you can style the Section widgets on your page. You can choose background color. You can define the margins of each widget and the padding of widgets and columns. 
   
6. Add content widgets. 
   After you have defined the layout and styled the widgets, you can drop the Content block, the Image, or the Call to action widgets. 
   

After you have created a new page, you start designing the page by adding the Section widget. 

1. To do this, click Add widget here… 
   
2. Click Layout and select Section. 
   When you drop the Section widget on a page and hover over it, the Section label appears. 

   The following screenshot displays the Section label that helps you distinguish the Section widget:

   A Section widget spans horizontally. You can then divide it into columns and further nest Section widgets inside the columns. 

   NOTE: By default, the new section is added with preselected padding S (small) for top and bottom. You can change this later.

3. To add another Section widget, hover below or above the existing Section widget.

   The following screenshot displays the clickable elements that appear:
   
   

4. Click ADD SECTION and select Section. 
   Another Section widget is added above or below the existing one. 

NOTE: You can only place Section widgets one above or below the other, you cannot add Section widgets to the right or to the left of another Section widget directly. To do this, you must first use columns and then nest Section widgets inside the columns. 

To achieve more complex designs, you can nest Section widgets. To do this, first place one Section widget on the Next.js page, then, divide it into columns, and, finally, place another Section widget inside one of the columns. 

The following screenshot displays how you can place a Section widget inside another Section widget:

You can use drag-and-drop to reorder sections. Each section is dragged together with its nested sections and content widgets. 

After you have created the sections of your page, you can further divide each section into columns. You can split each Section widget in two to six columns. Then, you can define the width of each column. 

To divide a section into columns, perform the following: 

1. Hover over the Section widget that you want to divide into columns. 
   
2. In the upper-right corner of the widget, click its SECTION label. 
   A menu with options appears. 
   
3. Click icon  » Layout. 
   
4. In the input field, enter the desired number of columns. 
   
5. Adjust the size of the columns by dragging the column separators to the desired width. 
   The numbers attributed to each column represent the percentage of the column widget to the width of the entire Section widget. The minimum that a column can span is eight percent of the respective Section width. 

   The following screenshot demonstrates column adjustment option:
   
   

6. To close the column adjustment option, click the SECTION label again. 
   

CSS classes assigned to columns 

The default Section widget layout is based on Bootstrap 5 framework. Therefore, the columns sizes can be only proportions that are supported by the Bootstrap styles. Once you choose the proportions, they are transformed to the Bootstrap class and are applied to the columns to provide the selected proportions.  

The following tables lists some examples of the styles that are applied for some of the different configurations available: 

For more information, see Bootstrap documentation » Grid system.

You can quickly configure paddings and margins, without opening the widget settings.

1. Hover over the Section widget that you want to divide into columns.
2. 2. In the upper-right corner of the widget, click its SECTION label.
   A menu with options appears.
3. Click icon  » Spacing. 
   
4. For the Section, you can configure the following:
   • The section margins – choose from the predefined values of none, small, medium, or large.
   • The section paddings– choose from the predefined values of none, small, medium, or large.
5. For each column, you can configure individual paddings. 

To open widget settings, perform the following: 

1. Hover over the Section widget that you want to divide into columns. 
   
2. In the upper-right corner of the widget, click its SECTION label. 
   A menu with options appears. 
   
3. Click icon . 
   The styling page appears. It has the Section style and the Column style sections. 

   NOTE: If the Section widget does not have any columns, it is treated as having one column that you can style separately of the section. 

Style the Section

For each Section, you can configure the following: 

• The section margins – choose from the predefined values of none, small, medium, or large. 
  
• The section paddings– choose from the predefined values of none, small, medium, or large. 
  
• The background color of the section.
  Choose one of the following:
  • Use a Color for the background.
    In Value, select one of the predefined colors. 
  • Use an Image for the background.
    Click  (Select) and choose between the following:
    1. Upload an image from your computer
       To upload an image, drag and drop it in the window or click Upload image from your computer, browse your computer to find the image you want to upload and click Open.
       
    2. Select an image from library
       The system displays recently used images.
       You can select one of the recent images or perform the following:
       1. Select the content provider where the image is located
          
       2. Click the library where the image is located.
          
       3. Select the image and click Use selected.
    3. Choose how to place the image on the background by selecting between Fill, Center, or Cover.
  • Select a Video for the background.
    Click  (Select) and choose between the following:
    • Upload a video from your computer
      To upload a video, drag and drop it in the window or click Upload video from your computer, browse your computer to find the video you want to upload and click Open.
      
    • Select a video from library
      The system displays recently used videos.
      You can select one of the recent videos or perform the following:
      1. Select the content provider where the video is located.
         
      2. Click the library where the video is located.
         
      3. Select the video and click Use selected.

Style the columns of the Section

For each column, you can configure the following:

• The column paddings– choose from the predefined values of none, small, medium, or large. 
  
• The background color of the column – choose between none or one of the predefined colors. 

When finished, click Save.

The following screenshot illustrates the different styling options:

When you are styling a Section widget, in addition to the basic predefined settings, you can also apply a custom CSS class to each element separately. 

To do this, perform the following: 

1. Open the Section widget for styling. 
   
2. In the upper-right corner of the page, click  (Advanced settings). 
   
3. You can enter individual CSS class for the Section and for each of its columns. 
   
4. Click Save. 
   

To achieve a margin between two columns, you place two Section widgets inside the columns and configure their margins. 

The following screenshot demonstrates how to nest widgets. All margins and paddings are configured to medium. The margins of the two nested sections are used as spacing between the two columns of the first Section widget.  

You want to nest some Section widgets, so that you can achieve the following page layout:

Perform the following: 

1. Create a new Next.js page. 
   
2. Drop one Section widget on the page. 
   
3. Below the first Section widget, drop the second Section widget. 
   
4. Divide the second Section widget into two columns. 
   
5. Adjust the first column to be 33 percent of the widget and the second – 67 percent. 
   
6. Inside the second column, drop the third Section widget. 
   
7. Inside the second column, below the third Section widget, drop the fourth Section widget. 
   
8. Divide the third Section widget into 2 columns – each 50 percent wide. 
   
9. Inside the second column of the third Section widget, drop the fifth Section widget. 
   
10. Inside the same column, below the fifth Section widget, drop the final, sixth Section widget.