# Design the layout with the Section widget

## Design process

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 ASP.NET Core 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.

## Create sections

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:[![DotNetCore1](https://www.progress.com/documentation/sitefinity-cms/assets/d907d83ffcf528bfcb0332236da7fa1d/dotnetcore1.jpg "DotNetCore1")](https://www.progress.com/documentation/sitefinity-cms/assets/d907d83ffcf528bfcb0332236da7fa1d/dotnetcore1.jpg)

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

   > info  **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:\
   [![DotNetCore2](https://www.progress.com/documentation/sitefinity-cms/assets/495ad3797ff95c95efa01240624aa70a/dotnetcore26d8b3db42bbc6d27ad54ff0300e02f5f.jpg "DotNetCore2")](https://www.progress.com/documentation/sitefinity-cms/assets/495ad3797ff95c95efa01240624aa70a/dotnetcore26d8b3db42bbc6d27ad54ff0300e02f5f.jpg)
4. Click *ADD SECTION* and select *Section*.\
   Another *Section* widget is added above or below the existing one.

> info **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. 

## Nest sections

To achieve more complex designs, you can nest *Section* widgets. To do this, first place one *Section* widget on the ASP.NET Core 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:\
[![DotNetCore6](https://www.progress.com/documentation/sitefinity-cms/assets/9d76d0ef970def41045488cd2650540e/dotnetcore6.jpg "DotNetCore6")](https://www.progress.com/documentation/sitefinity-cms/assets/9d76d0ef970def41045488cd2650540e/dotnetcore6.jpg)

## Reorder sections

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

## Create columns

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 ![DotNetCore3](https://www.progress.com/documentation/sitefinity-cms/assets/6c5124ab9a9ca9fb53a7f55bd08be887/dotnetcore3.jpg "DotNetCore3") » *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 the column adjustment option:\
   [![DotNetCore4](https://www.progress.com/documentation/sitefinity-cms/assets/b1d6b54bac43a84fc6d63cd6258cd8d9/dotnetcore4.jpg "DotNetCore4")](https://www.progress.com/documentation/sitefinity-cms/assets/b1d6b54bac43a84fc6d63cd6258cd8d9/dotnetcore4.jpg)
6. To close the column adjustment option, click the *SECTION* label again.

> success **RESULT**: After you have defined the columns, you can place elements inside them. Inside a column you can place:
>
> * Another *Section* widget
> * A *Content block* widget
> * An *Image* widget
> * A *Call to action* widget.
> * A custom widget

### 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:

| Proportion      | Class for column 1 | Class for column 2 | Class for column 3 |
| :-------------- | :----------------- | :----------------- | :----------------- |
| 50% - 50%       | `col-6`            | `col-6`            |                    |
| 33% - 67%       | `col-4`            | `col-8`            |                    |
| 33% - 33% - 33% | `col-4`            | `col-4`            | `col-4`            |
| 17% - 42% - 42% | `col-2`            | `col-5`            | `col-5`            |
| 25% - 50% - 25% | `col-3`            | `col-6`            | `col-3`            |

For more information, see Bootstrap documentation » [Grid system](https://getbootstrap.com/docs/5.3/layout/grid/).

## Quick style

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. In the upper-right corner of the widget, click its *SECTION* label.\
   A menu with options appears.
3. Click icon ![DotNetCore3](https://www.progress.com/documentation/sitefinity-cms/assets/6c5124ab9a9ca9fb53a7f55bd08be887/dotnetcore3.jpg "DotNetCore3") » *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.

## Widget settings

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 the ![DotNetCore8](https://www.progress.com/documentation/sitefinity-cms/assets/e29dbb581da97d8aa6aad6943253dd7a/dotnetcore8.jpg "DotNetCore8") icon.\
   The styling page appears. It has the *Section* style and the *Column* style sections.

   > info  **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 ![Add](https://www.progress.com/documentation/sitefinity-cms/assets/ed18f87316e449f58adc9531a6244938/add.png "Add") (*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 ![Add](https://www.progress.com/documentation/sitefinity-cms/assets/ed18f87316e449f58adc9531a6244938/add.png "Add") (*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*.

## Example

The following screenshot illustrates the different styling options:[![DotNetCore9](https://www.progress.com/documentation/sitefinity-cms/assets/b214fd2dc38f95b1180874b7e1aa72b6/dotnetcore9.jpg "DotNetCore9")](https://www.progress.com/documentation/sitefinity-cms/assets/b214fd2dc38f95b1180874b7e1aa72b6/dotnetcore9.jpg)

## Advanced settings 

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 ![Settings](https://www.progress.com/documentation/sitefinity-cms/assets/0b5bf6d61861bf099d7f849dde3e94ea/settings-dotnetcore.jpg "Settings_DotNetCore") (*Advanced settings*).
3. You can enter individual CSS class for the *Section* and for each of its columns.
4. Click *Save*.

## Sample

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.  

[![Nest Section widgets](https://www.progress.com/documentation/sitefinity-cms/assets/455c180bb8bf2824436e452946130ed4/dotnetcore5.jpg "Nest Section widgets")](https://www.progress.com/documentation/sitefinity-cms/assets/455c180bb8bf2824436e452946130ed4/dotnetcore5.jpg)

## Tutorial

You want to nest some *Section* widgets, so that you can achieve the following page layout:\
![DotNetCore7](https://www.progress.com/documentation/sitefinity-cms/assets/a1046405c4cf987b50c9f1b65c1d19cd/dotnetcore7.jpg "DotNetCore7")

Perform the following:

1. Create a new ASP.NET Core 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.