Overview Of Sections

You are here:
< All Topics

Sections are the biggest building block in the Divi builder. You can think of them as horizontal stacking blocks that can group your content into visually distinguishable areas. In Divi, everything you build starts with a section. This content wrapper has various settings that can be used to do some really awesome things.

How To Add A Section To Your Page

Before you can add a section module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

Once you have entered the Visual Builder, you can click the blue plus button to add a new section to your page. You will be greeted with a popup that allows you to add any of Divi’s three section types. These types include: Standard, Specialty and Fullwidth.

Once the section has been added, you will be greeted with the section’s list of options. These options are separated into three main groups: ContentDesign and Advanced.

Section Content Options

Within the content tab you will find all of the section’s content elements. For sections, these content elements are limited to background elements such as background images and videos.

Background Image

If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field.

Background Color

If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field.

Background Video MP4

All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .MP4 version here. Video backgrounds are disabled from mobile devices. Instead, your background image will be used. For this reason, you should define both a background image and a background video to ensure best results. Important Note: In order for the MP4 video format to work in all browsers, your server must have the correct MIME types designated. You can learn more about using .htaccess to define MIME types here. If you notice your videos are not playing in certain browsers, then this is likely the reason.

Background Video WEBM

All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .WEBM version here. Video backgrounds are disabled from mobile devices. Instead, your background image will be used. For this reason, you should define both a background image and a background video to ensure best results. Important Note: In order for the WEBM video format to work in all browsers, your server must have the correct MIME types designated. You can learn more about using .htaccess to define MIME types here. If you notice your videos are not playing in certain browsers, then this is likely the reason.

Background Video Width

In order for videos to be sized correctly, you must input the exact width (in pixels) of your video here.

Background Video Height

In order for videos to be sized correctly, you must input the exact height (in pixels) of your video here.

Admin Label

In this dropdown you can add an admin label that will appear in the back end builder as well as the visual builder’s skeleton view.

Section Design Options

Within the design tab you will find all of the section’s styling options, such as sizing and spacing. This is the tab you will use to change how your section looks. Every Divi section type has a long list of design settings that you can use to change just about anything.

Show Inner Shadow

Here you can select whether or not your section has an inner shadow. This can look great when you have colored backgrounds or background images.

Use Parallax Effect

If enabled, your background image will stay fixed as your scroll, creating a fun parallax-like effect. You can also choose between two parallax methods: CSS and True Parallax.

Custom Padding

Here you can adjust the padding of the section to specific values, or leave blank to use the default padding.

Previous Rows & Row Options
Table of Contents