An overview of the Divi sections

Sections are the largest building blocks of the Divi builder and can be used in several ways. There are 3 different types of sections:

• Regular Section

• Full Width Section

• Specialized Section

You can think of them as stackable horizontal blocks that group your content into visually distinguishable areas.

Everything in Divi starts with a section

This content container has several configurations that allow you to do amazing things.

Regular Section

This is the most widely used type of section in almost any page layout in Divi. Allows the use of column-based designs.

Full Width Section

Unlike regular sections, this type of section does not use rows or columns, as the modules it contains always occupy 100% of the screen width.

Full width modules are ideal for adding visual breaks on the page, such as:

• Full Width Code Module

• Full Width Header Module

• Full Width Image Module

• Full Width Portfolio Module

• Full Width Publications Slider Module

• Full Width Publication Title Module

• Full Width Slider Module

Specialized sections

These sections were created to allow for more advanced column structures. Unlike normal sections, specialized sections allow you to add complex variations of columns along with full width vertical sidebars without unwanted cuts in the design.

These structures are not possible using normal sections.

When you add a specialized section, you will notice that a part has the buttonAdd Moduleand another the buttonInsert Row.

• The areaInsert Modulerepresents the vertical sidebar. You can add multiple modules in a single row, and they will occupy the entire section, next to the column structure you add.

• By clickingInsert Row, you can add rows to the left or right of your sidebar. It's like adding rows within other rows.
  

How to add a section to your page

1. 1- From the WordPress dashboard go to:Pages → All pagesand edit or create a new page.
   
2. 2- Yes:
   
3. The page already has Divi Builder enabled, clickEdit with Divi.
   

1. Does not have Divi Builder enabledopen it with the default WordPress editor and clickUsing the Divi Builder.3 - Once in theVisual Builder, click on the blue button+ +to add a new section. A pop-up box will appear that will allow you to choose between the three types of Divi sections.
2. Standard(blue color)
   
3. Specialized Section(red color
   
4. Full Width Section(purple)
   

Section configuration options

Once the section is added, you will see a list of options organized into three main tabs:

• Content

• Design

• Advanced

Content tab

Here you can find the elements related to the content of the section. For sections, this tab includes:

• Link

• Fund

• Management Label
  

• 
  

Link

• Section link URL: defines a link to which the section will redirect when you click.

• Destination of the section link:

  • In the same window: opens the link in the same tab.

  • In a new tab: opens the link in a new browser tab.
    

Fund

In the Background Options group, you can configure the following:

• Background color

• Gradient of the background

• Background image

• Background video

• Background pattern

• Background mask

How to add a background color

1. Click onfirst tab(paint bucket icon).

2. ClickAdd background colorand choose a color from the palette of your site or use thedroppersto select a new color.
   

How to add a background gradient

1. Click onsecond tab(degradate icon).

2. ClickAdd gradient of background.

To change the colors of the gradient:

• Click onstop pointsfrom the gradient and select a color.

• Click anywhere in theslider controlto add more color dots.

Background gradient options:

• Type of degradation: Select it from the drop-down menu.

• Direction of degradation: Adjust the angle with the slider or by writing a numerical value.

• Repeat degraded: Activate this option if you want the gradient to repeat.

• Gradient unit: Change how gradient points are calculated.

• Place gradient on the background image: If there is an image, you can overlap the gradient by activating this option.
  

How to add a background image

1. Click onthird tab(image icon).

2. Click onsign + grayto open theMedia Librarywhere you can upload a new image or choose an existing one.

Background image options:

• Using parallax effect: Activate this option to apply a scroll effect (parallax) that gives a 3D effect.

• Background image size: Choose the size from the drop-down menu.

• Background image position: Defines the position from the drop-down menu.

• Repeat of the background image: Choose whether it repeats and how.

• Fusion of background image: Determines how the image is mixed with other layers.
  

How to add a background video

1. Click onfourth tab(video icon).

2. Click ongray icon +to open the Media Library and select or upload a video.

Background video options:

• MP4 vs WebM: It is recommended to upload both versions, as not all browsers support WebM. This ensures full compatibility.

• Width of the video: Enter a numeric value to define the width.

• Stop of the video: Enter a numerical value to define height.

• Pause video when another plays: Activate this option if you want the background video to stop when another video starts playing. By default, the video is paused if it is not in sight, but you can turn off this.

How to add a background pattern

1. Click onfifth tab(pattern icon).
   

2. ClickAdd background pattern.

3. Choose the type of pattern you want from the drop-down menu.

Background pattern options:

• Pattern color: Select the color from the site palette or use the dropper.

• Transformation of the pattern: You can move it horizontally or vertically, rotate or reverse it.

• Pattern size: Choose between: real size, cover, adjust, stretch or custom size.

  • If you choosecustom size, options will appear towidth and high patternwhich you can adjust with the slider or a numerical value.

• Origin of repeat of pattern: Defines where the pattern will be repeated.

• Horizontal and vertical displacement: Adjust the position of the pattern.

• Repeat of the pattern: Choose how it will be repeated (horizontal, vertical, both, etc.).

• Pattern melting mode: Defines how it is mixed with other layers. There are 16 merger modes available.
  

How to add a background mask

1. Click onsixth tab(mask icon).

2. ClickAdd background maskand select the type from the drop-down menu.

Background mask options:

• Color of the mask: Select from the site palette or use the dropper.

• Transformation of the mask: Move, rotate or reverse the mask.

• Mask aspect ratio: Sets the ratio between width and high.

• Mask size: Choose between: real size, cover, adjust, stretch or custom size.

  • If you choosecustomized, you can define thewidth and highmanually.

• Mask melting mode: Defines how the mask is mixed with other layers. There are 16 modes available.
  

Administration Label (Admin Label)

In this section you can add ainternal labelwhich will appear in the editor of Divi enOutline view (Wireframe)or inLayer view (Layers)

This is particularly useful fororganise and recognize sectionswhen you work with complex designs.

Design Tab

Here you will findall style optionsfor the section, including:

• Dividers

• Size

• Spacing

• Edge

• Shadow

• Filters

• Transformations

• Animation
  

The tabDesignis where they areall the main style options. Each section has an extensive list of design configurations that you can use tomodify virtually any visual aspect.

Design

• Show inner shadow: If activated, add an internal shadow to the section.

Dividers

Allows you to create and customize dividers at the top and bottom of the section.

Splitter options:

• Splitter style: 26 styles available.

• Color of splitter: Color of the splitter background.

• Height of divider: Defines your height.

• Horizontal repeat: How often it repeats vertically.

• Flip splitter: Change horizontal or vertical orientation.

• Splitter layout: Defines whether the splitter appearsabove or below contentof the section.

Size

This group defines thewidth and highof the section. You can set minimum, maximum or custom values.

Size options:

• Width: By default, the section occupies the entire width of the browser.

• Maximum width: Limit the width of the section.

• Minimum height: Defines the minimum height of the section.

• Height: Defines the exact height.

• Maximum height: Limit the maximum high that the section can have.

• Alignment of section:

  • Left(default)
    
  • Centrale
    
  • Right
    

Spacing

You can addmarginsorinternal spacing (padding)writing numerical values.

• Margin: Add spaceoutside outside outsideof the section.

• Filling (Padding): Add spaceinsideof the section.

To maintain equal proportions (e.g. up and down), click on thechain iconbetween values. If enabled, the values will be kept in synchronized.

Default values of a Regular Section:

• Margin: 0 px

• Upper Padding: 54 px

• Lower Padding: 54 px

• Left and right padding: 0 px

Edge

Allows you to add afull edgeor only on one side of the section. You can adjust the width with a slider, select the color and choose an edge style from a drop-down menu.

Edge options:

• Rounded corners: Enter a numeric value. The greater value, the more rounded the corners will be.

  • Corners arelinked by default(Blue chain icon activated). If you want different values per corner, click tounlink.

• Edge style: Choose between applying rim on all sides or individually (up, right, down, left).

• Edge width: Sets the edge thickness. The value must beat least 1 pxso that it is visible.

• Edge color: Select a color from the palette or use the dropper.

• Edge type: You can choose between:

  • Solid,

  • Discontinuous (dashed),

  • Spotted (dotted),

  • Double,

  • Groove (groove),

  • Crest (ridge),

  • Interior (inset),

  • Exterior (outset)

  • ornone.

Box shadow

You can add aprojected shadowto the whole section. By selecting a shadow style, you can customize the following:

Box Shadow Options:

• Horizontal position: Adjust how much the shadow moves sideways.

• Vertical position: Adjust how much the shadow moves up or down.

• Blur intensity: The greater courage, the more diffuse and broader the shadow.

• Spread intensity: Increases shadow density.

• Color of shadow: Defines color.

• Position of shadow: Defines whether the shadow isinsideoroutside outside outsideof the section.

Filters

Here you can applyvisual effectsto the content of the section.

Filter options:

• Matiz (Hue): Change the color angle.

• Saturation: Adjust the color intensity.

• Brightness: Increases or reduces brightness.

• Contrast: Increases or reduces the gap between light and dark areas.

• Invest: Reverses the colors of the section.

• Sepia: Apply a warm brown/yellow tone.

• Opacity: Controls the transparency of the section.

• Blur (Blur): Apply a Gaussian-type blur.

• Melting Mode (Blend Mode): Defines how the section is mixed with the layers below. By default it is innormal.
  

Note:Any of the above-mentioned filters will also affect theinternal elements of the section, asrows, columns and modules.

Transformations (Transform)

Available options:

• Climbing (Scale)

• Move (Translate)

• Rotar (Rotate)

• Tilt (Skew)

• Points of Origin (Origin Points)

You can switch between the options using the tabs. Adjust each by entering numerical values or dragging/expanding the corresponding table or circle.

To maintain equal values between axes (e.g. X and Y), click on thechain iconin the lower-right corner.

Animation

You can apply an animation to the section. When choosing a style, you can configure the following options:

• Duration of animation: Defines how long it takes to complete.

• Delay in animation: Defines how long you wait before you start.

• Initial opacity of animation: Define how opacity it starts.

• Animation speed curve: Defines how it accelerates/unflow (linear, ease of input/output, etc.).

• Repeat of animation: By default, it reproduces once. If you want it to repeat, turn on theloop (Loop).

Advanced Tab (Advanced Tab)

Designed for advanced users. Includes options such as:

• ID and CSS Classes

• Custom CSS

• Display conditions

• Visibility

• Transitions

• Position

ID and CSS Classes

You can assign aIdor aCssspecific to the section. This is useful for applying custom CSS from your child theme stylesheet or by additional code.

Custom CSS

• Free CSS (Free-Form CSS): You can write CSS code directly, for example:
  selector h1 { color: network; }

• Module elements: You can apply custom CSS styles to specific parts of the section from individual tabs within the module.

Conditions of Use

Here you definewhen it will be displayedthe section, based on conditional rules such as:

• If the visitor has already bought before

• Which browser or OS you are using

• If you are on a specific page, etc.

You can applyone or more conditions.

Visibility

Deactivate on devices:

• Phones

• Tablets

• Desk

Just tick the appropriate box.

Horizontal Overflow:

Defines what happens if the content exceeds the width of the section:

• Visible

• Displacement (Scroll)

• Hidden (Hidden)

• Auto(the browser decides)

Vertical Overflow (Vertical Overflow)

Define what happens when contentexceeds heightof the block element (i.e. when the content is exited above or below the section). The options are:

• Visible: Overflowing content will normally be displayed, even if it exceeds the defined height of the section.

• Scroll (Displacement): If the content exceeds the height, a vertical scroll bar will appear so that the user can scroll and view the hidden content.

• Hidden (Hidden): Content leaving the height of the section will be hidden and will not be visible.

• Auto: The browser will decide whether or not to display a scroll bar, depending on the context.

Transitions

Controls the animation ofhover effects.

• Transition time: Time that the transition lasts.

• Transition delay: Time you wait before you start.

• Transition speed curve: Method of accelerating/unacceleration of animation.

Position

Types of position:

• Relative (default value): Follow the normal flow of the document.

• Absolute: It is positioned out of flow and is placed with respect to the nearest container positioned.

• Fixed (Fixed): It is fixed with respect to the browser window (useful for floating sections or sticky).

Additional options:

• Vertical and horizontal displacement: Adjust the position on axis X or Y axis.

• Z-index: Determines which section appears above or below in the visual order (highest values = above).

Scroll Effects

This section defines the behavior of the section when the user moves the page. You can make the section fixed (sticky) at the top, bottom or both, and decide whether the section should be transformed as the user scroll.

In addition, you can enable vertical movement in this section, allowing you to adjust the speed of scrolling of the item without affecting the surrounding elements.

The functionMotion Trigger Effect(Motion Activation Effect) lets you choose when the scrolling effect you have just applied is triggered. You can activate the effect when the top, middle or bottom of the section is visible on the screen.