##  [Section](/hc/documentation/learn-dxpr-builder/drag-and-drop-elements/section) 

















Use sections on your Drupal website to create full-width containers or to wrap elements with special background effects.

Follow the steps below to start using sections in your website:

1. Click on the **+** icon
2. Click on the **Section** element
3. Click on the **pencil icon** in the section element toolbar to display the general settings
4. *Optionally,* switch on the **Full Width** option to have the elements used within the section in a full width
5. *Optionally*, switch on the **100% Height** option for the section to fill the entire browser window vertically
6. *Optionally*, switch on the **Vertical Centering** to center the elements within the section
7. Once you’ve selected your preferred settings, you can click on **Save Changes** and you're done!

### Customizing sections with background effects 

1. Go to the **Background Effects** tab
2. Select a **background effect** option
    - Simple image: the added background image will flow with the page
    - Fixed image: the added background image will stay as you scroll through the page
    - Parallax: the added background image stays as the element moves
    - Gradient: add a linear gradient to to background
    - YouTube video: add a video as a background of an element

#### Simple Image effect

1. Go to the **Style** tab
2. Select the image by the **Background** settings
3. Click on **Save Changes**

#### Fixed Image effect

This fixes the backrgound image so that it won't move long with the flow of the page when you scroll.

1. Go to the **Style** tab
2. Select the image by the **Background** settings
3. Click on **Save Changes**

#### Parallax Image effect 

This let's you set a custom scroll speed for your background image. This creates a parallax effect by having the background image move at a different speed compared to other elements on the page.

1. Go to the **Style** tab
2. Select the image by the **Background** settings
3. Set the **Parallax Speed** which will slow down the speed the image will pass as you scroll down
4. Select the **Parallax Mode** between **Fixed** and **Local**. Fixed refers to fixing the image to the browser window and local means the images is scrolled when a scrollable container inside the page is scrolled.
5. Click on **Save Changes**

#### Gradient effect 

1. Select a **Start Color** for the gradient effect.   
    *Optionally* add transparency to the gradient with the slider under the color chart if you want to reveal a background image
2. Select an **End Color** for the gradient effect
3. Set the **Gradient Direction** to set an angle between 0 and 360 degrees for your gradient
4. Set the **position of the start color**, the higher the number the more overpowering the start color will be
5. Set the **position of the end color**, the higher the number the more overpowering the end color will be
6. Click on **Save Changes**

#### YouTube Video 

1. Select **Video Play Options**
    - Loop: Repeats the video infinitely
    - Unmute: Turns on sound on the video. *warning: when using autoplay it is not recomended to Unmute the video because modern browsers will block the video from autoplaying*.
    - Disable on mobile devices: Prevents the video from streaming and playing on mobile devices
    - Show controls: Adds video controls to the background video
2. Insert the URL of the YouTube video in the **URL field**
3. Enter the time in seconds from where the video will begin in the **Start Time** field
4. Enter the time in seconds where the video will end in the **Stop Time** field
5. Click on **Save Changes**











Related Content

[Rows and Columns](/hc/documentation/learn-dxpr-builder/drag-and-drop-elements/rows-and-columns)