> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Section

# Section

Sections is the main base block of building anything. Sections contains all other elements inside it. Section need to be added first to make any design. If you are not familiar with how to add a new section. Check [How to Add New Section with Row and Columns](/en/article/add-new-section-2kiu9c/)

### Edit Section
Open the editing modal of the section by clicking Edit Section icon

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/screen-shot-2025-05-27-at-3034_1jrguo7.png)


# General

In general tab, Configure section background, width & height and section frames.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/screen-shot-2025-05-27-at-3063_6or2k0.png)


### Section Background

${youtube}[Section Background Color, Gradient and Image, Video, Slider](uQxaRx7mqoQ)

##### Background Color

Change background color with built-in color picker. Check the video above .

#### Background Gradient

Add beautiful background gradients. Customize the gradient extensively. Add Linear and Radial gradient. Check the video above .

#### Background Image

Add background via upload or paste an image url to add an image. Change the background image size and position as needed. Use the Blend Mode to blend image with background color or gradient. [Learn more background blend mode](https://css-tricks.com/almanac/properties/b/background-blend-mode/). Check the video above .

#### Background Video

Add background via upload or paste an video url to add an video. Change the position as needed. Use the Blend Mode to blend the video with background color or gradient. [Learn more background blend mode](https://css-tricks.com/almanac/properties/b/background-blend-mode/). Check the video above .

#### Background Slider

Upload multiple images or paste image URLs to create a background image slider. Customize the slider direction, behavior, speed, and autoplay. Enable or disable navigation arrows. Add overlay styles for better text visibility. Adjust image styles like size, position, and blend mode to match your design. Check the video above .

#### Color / Gradient Overlay on Image

Add a color or gradient overlay on image background. Please check the video below. 

${youtube}[Color Overlay on Background Image](dfl7g3rXU7I)


#### Color / Gradient Overlay on Video

Add a color or gradient overlay on video background. Please check the video below. 

${youtube}[Color Overlay on Background Video](IgN0lri4-XA)


#### Color / Gradient Overlay on Slider

Add a color or gradient overlay on slider background. Please check the video below. 

${youtube}[Color Overlay on Background Slider](YWbAEAiIEN4)

---

### Section Frames

Add section divider / separator at the top or bottom of any section. And add section corner shapes. Open the "Section Frame" accordion. And select any pre-designed frame.

${youtube}[Section Frames (Dividers / Separators & Corner)](I19RQ2-oRew)

---

### Section Width & Height

Set custom width and height for sections. 

Use custom width height when absolute necessary. For spacing use margin and padding.


${youtube}[Section Width Height](ocXP02lvIf0)

---

# Styles Tab

Common Styles used in styles tab. 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/screen-shot-2025-05-31-at-1581_pk4nx3.png)