Hopefully you have had a chance to download our latest theme, Divi. As mentioned in the Theme Launch Post, we will be writing a Divi-related post on our blog every day for the next 12 Days of Divi. Be sure to tune in each day for the next twelve days to get your hands on tons of Divi-related tips and resources! If you haven’t checked out Divi yet, then click the link below to view the release post with all the juicy details, and for your chance to win a free Lifetime Membership!
Understanding The Section Settings
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.
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. Important Note: 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.
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. Important Note: 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.
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.
Full Width Beauty
Using the section settings and the various background variables, we can create some very unique and engaging layouts. To illustrate some of the cool effects that can be created, I built out this page.
Video Backgrounds
In the first section of the page, I explore the interplay between video backgrounds and static images. By defining a background video of zooming starry space, a vortex-like feel is created. Within this section, I place a single image module with my logo. This creates the appearance that the logo image is flying through space! This is the beginning of our page’s story.
Parallax Image Backgrounds
The “Parallax Background” option is a great way to make your page fun to browse. This option makes your background image stick in its place as you scroll, which makes it look like everything around it is “passing by” on top of it. In our second slide, I add a skyline background image. On top of it, I add an image module and text module. My image is a rocket with a transparent background, and as you scroll down the page it creates the illusion that the rocket is flying through the sky.
Background Transition Illusion
In our third slide, I added a second parallax background image. For this image, I used the same exact image from the slide above it, except in this version I modified the image and turned it black and white. Because both this image and the image above it are stuck in place, and because they have the exact same elements within them, the image appears to transform from color to black and white right before your eyes! This slide continues our page’s story, taking us back in time.
Creating The Appearance Of Full Width Modules
In our final slide, I only defined a simple background color. Because there are no background videos or images, only the color shines through. Within this section, I added a single Call To Action module. What’s unique about this slide is that I have turned off the background color of the CTA module. This erases the boundary between the module and the section, giving the CTA module a new “full width” appearance. Using this technique is a great way to give prominence to important modules, such as your call to action.
I hope this shows you just how creative you can be with sections. I have added an entry about Sections to the Divi documentation, along with a full video screencast that outlines the process. Don’t forget to check out the Divi Documentation for a full list of tutorials.