Sections Are Your Largest Organisational Element
Sections are the biggest building blocks 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.
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 and .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 and .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.
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.
Parallax Effect – If enabled, your background image will stay fixed as your scroll, creating a fun parallax-like effect.
Using Fullwidth Sections
Fullwidth sections give you access to a new set of Fullwidth Modules. These modules act a little differently, because they take advantage of the full width of the browser. Fullwidth modules can only be placed within Fullwidth sections.
Once you add a new fullwidth section to your page, you can click the “Add Modules” button within the section to add a fullwidth module. Unlike normal section, there is no concept of rows or columns, since the fullwidth modules always take advantage of 100% of the screen. Fullwidth modules are a great way to add a visual break to the page!
A great example of a fullwidth module is the fullwidth slider. This fullwidth slider works just like a normal slider, except that it expands to 100% width. Displaying a slider at such a scale can be quite stunning, just check our the divi demo for an example.
Using Specialty Sections
Specialty sections were created to allow for more advanced column structures. Unlike normal sections, when you use a specialty section, you can add complex column variations next to full-spanning vertical sidebars, without adding unwanted breaks to the page. These types of layouts are not possible using normal sections.
Once you add a specialty section to the page, you will notice that one area has an “add module” button, while the other has an “insert row” button. The “insert module” area represents your vertical sidebar. You can add as many modules here, in a single row, and they will span the vertical width of the section, adjacent to the column structure you build next to it. Clicking “insert row” will allow you to insert additional rows to the left/right of your sidebar. In a raw, this can be thought of as adding rows within rows!
The result is the ability to create just about any column structure that you could dream of, and no matter what structure you choose, we have made sure that the combination will look great! Here is an example of a page layout created using specialty sections. As you can see, the effect is a dual-sidebar layout, with two vertical-spanning rows on the left/right of a complex column structure in the middle.
