Divi Builder is a page builder plugin that you can use to create a beautiful page on your WordPress site. Just like other similar plugins, Divi Builder also comes with a visual editor that you can use to create a beautiful page without dealing with CSS.
You can simply add the elements you need and make the customization accordingly.
In Divi Builder, design elements fall into three types: section, row, and module. In this article, we will cover more about the section element in Divi Builder.
What is a Section in Divi Builder?
As said above, section is one of the design element types available in Divi Builder. It is a large container to host other design elements (rows and modules) on your page. You can think of it as a block that can group your content into visually distinguishable areas. Section itself is a required element. You can’t create a page with Divi Builder without adding a section. That is why when creating a new page using Divi Builder, you will automatically have a section.
When working on a page using Divi Builder, you can add as many sections as you want according to your needs. Let’s take a look at the screencast below.
The page on the screencast above consists of 7 sections (as you can see on the Wireframe View mode) with each section hosts a number of rows and modules. Section itself is still divided into three types as follows:
- Regular
- Specialty
- Fullwidth
Regular Section
Regular section is a standard section of Divi Builder. When you create a new page with Divi Builder, you will automatically have one regular section. In Divi Builder, regular sections are represented in blue. You can add rows to a regular section. There are 20 row styles you can add to a regular section with each style has a different column structure. You can then add modules to each column of the row.
Specialty Section
Just like the name suggests, a specialty section is a section that is designed for specific purposes. In a specialty section, you can add columns in a grid style. There are 9 grid styles you can choose from.
Specialty sections are great to create the homepage of an online magazine or similar sites. You can use them to add a hero section on the online magazine homepage you create. Specialty section is represented in orange.
Fullwidth Section
Fullwidth section is the type of section that is designed to add a full-screen module. From a slider, map, menu, and so on. There are 9 fullwidth modules you can add to a fullwidth section. As this section is aimed at fullwidth content (modules in this case), you can’t add a row or column to a fullwidth section. Fullwidth section is represented in purple.
How to Add and Delete a Section in Divi Builder
When you create a new page, Divi Builder will automatically add a new regular section. You can then add rows and modules to the added section.
What if you need more sections? You can simply click the blue plus button on the canvas area (or orange/purple, depending on the last section type you added). Right after adding a new section, you can then select a row. You can select a row with the column structure according to your need.
To delete an existing section on the canvas area, you can simply hover your mouse over the section you want to delete and click the trash can icon.
How to Customize a Section
After adding a section to the canvas area, you can customize it according to the concept of the design you want to create. You can make the customization via the settings panel that appears right after you add a section. Or, you can also click the gear icon on the section handle to open this panel. As you can see, there are 3 tabs you can open on the panel: Content, Design, and Advanced.
Content Tab
The Content tab is the tab you can open to make the basic settings to a section. There are 3 setting blocks you can open here:
- Link
You can open this block to add a link to your section. Be it a static or dynamic link.
- Background
You can open this block to add a background to your section. There are 4 background types you can add: solid color, gradient color, image, and video. If you use an image background, you can also set a parallax effect.
- Admin Label
You can open this block to add an admin label to your section. Admin label itself is a kind of identifier name for a section. Adding an admin label to a section would be useful to make it easy for you to identify a section on a page that consists of several sections. You can see the admin labels when viewing your page in the Wireframe View mode.
Design Tab
You can open this tab to style up a section. There are 9 setting blocks you can open on this tab.
- Layout
You can open this block to show/hide the inner shadow of a section. Inner shadow itself appears on the bottom side of the section.
- Dividers
In the context of page builder, divider refers to a kind of line art on the top or the bottom of a section.
Divi Builder allows you to add a divider on either the bottom or top of the section. Or, if you want it, you can also add dividers on both sides. You can simply click the dropdown menu on the Divider Style option to open the available divider styles. Afterward, you can then set the color as well as the size of the divider.
- Sizing
You can open this block to set the sizing of the section. You can set the width as well as the height of the section from this tab. By default, the width and height of a section are set to auto. To set a certain width or height, you can simply type your preferred value. You can use either percent or pixel unit (you can type the unit manually).
- Spacing
From this block, you can set the spacing as well as the margin of the section. You can simply add the values on each field to set the margin as well as the padding of the section.
- Border
You can open this block to set the border of the section. From the border style, border size, border color, and border radius. Border radius itself refers to the tilt level of the section corners. The higher the tilt level, the more tilted the corner.
- Box Shadow
You can open this block to apply a box shadow to a section. There are 7 box shadow styles offered by Divi Builder. You can simply select the box shadow style you like. After selecting a box shadow style, you can set the vertical and horizontal position, the spread strength, and the color.
- Filters
You can open this block to apply CSS filders to a section. You can also apply a blend mode if you want it.
- Transforms
From this tab, you can either apply a 2D or 3D transformation to the section. Simply select the transformation style you want to apply (by clicking of the available tabs) and then use your mouse to set the transformation value.
- Animation
You can open this block to set the entrance animation of the section. There are 7 animation effects offered by Divi Builder. You can simply select the animation you like and then make the required settings (duration, delay, and so on) on the available settings beneath it.
Advanced Tab
The Advanced Tab is where the advanced settings lie. You can open this tab to add a custom CSS, set scroll effects, and so on. There are 6 blocks you can open on this tab.
- CSS ID & Classes
You can open this tab to add a CSS ID or CSS class to the section.
- Custom CSS
From this block, you can add a custom CSS directly to the section instead of via the Code module.
- Visibility
You can open this block to set the visibility of the section. If you want it, you can hide a section on a certain device type (smartphone, tablet, or desktop). To disable the section on a certain device type, simply tick the device option you want to disable the section on. From this block, you can also set the horizontal overflow and vertical overflow.
- Transitions
You can open this block to set the transition of the section. There are 3 setting options you can set as shown in the image below.
- Position
You can open this block to set the position of the section. By default, the section position is set to static (Default). There are three other position options you can use:
Relative: If you select this option, the section will follow the normal flow of the page. This option offers top, bottom, and right properties. Also, you can set the Z index.
Absolute: If you select this option, there will be no actual space created on the page for the section. You can think of it as a floating section on top of other sections that take up actual space.
Fixed: If you select this option, the section will break the normal flow of the page and it has no actual space on the page.
- Scroll effects
You can open this block to apply scroll effects to a section. Scroll effects allow you to apply more animation effects to a section.
Saving a Section to the Divi Builder Library
Time efficiency is one of the things offered by Divi Builder and other page builder plugins in general. In Divi Builder, you can save a section to the library for recurring use. This feature will save you lots of time if you have to add the same sections to several pages on the website you are working on.
To save a section to the library, click the arrow icon on the section handle. Give your section a name and click the Save to Library button.
To use the section you have saved, you can click the Add From Library tab every time you add a new section. Simply click the section you want to use.
Locking a Section
Once you are done working with a certain section on your page, you can lock it. The locked section cannot be edited. You can lock a section to prevent you from accidentally editing the wrong section. To lock a section, you can click the three-dot icon on the section handle and select Lock.
To unlock a locked section, simply click the padlock icon on the top-left corner of the section you want to unlock.
The Bottom Line
If you are new to Divi Builder, understanding the concept of section is crucial. It’s the most vital element of Divi Builder. You can’t add a module before adding a section. Divi Builder allows you to add as many sections as you need.
If you want to create a long page, it’s recommended to give every section an admin label to make it easy for you to identify the sections. You can also maximize features like the ability to duplicate a section, copy a section, save a section to the library for time efficiency.
