How To Use Sections In Divi


  • 09-May-2022

In this tutorial we'll be going over how to use sections, which are the most basic building block in the Dive builder. You can think of sections as large horizontal organizational elements that that stack up on your page. And then you can use to group different content together within a section you house, you can house as many rows and modules as you like sections come with various settings. So this blue bar here, that's a section when you click on the Settings link, you're going to get various options. Here each section can have a background image. You can have a background color or a background video. If you upload a background image or video, then obviously it's going to go over the background color.

So you won't see that. So if you want to have just a background color, you can define that and leave the other ones blank. If you define a background video, then that's going to overlay your background image. When you define a background video, you're going to want to upload two formats, mp4 and WebM.

Uploading both of these will help ensure maximum compatibility for various browsers. And when you upload a background video, you're going to need to input the correct width and height of your source video. So the theme knows how to resize it correctly.

So that it fills the whole frame of your section. You can also define an inner shadow for each section, or you can also choose a to enable or disable parallax effect. What that will do is if you're using a background image, the parallax effect will make. That image stick in place. So as you scroll, the background image, doesn't move. And notice the content kind of moves in front of it, which can look really cool. So for this first section at the top I'm going to test out using a video, so I'm going to upload my background, video, mp4 and WebM files.

So I have two videos here already uploaded. And then my whip happens to be 1920 and my high it happens to be 552 and that's in pixels and so that's it for that section. And inside the section I'm just going to. Add an image I'm going to do like a little logo at the top here, so I'm going to insert an image module I'm going to choose this logo here that I've already uploaded, and I'm going to have it fade in from top to bottom and save. So we have a basic section with the background video and inside that, or on top of it done, depending on how you look at it.

We have a logo image. So I'm going to view the page, and there we go. So we have this section here background video and an image sitting on top of it.

And this is a really cool example where the image in the background video kind of has some interplay. So it almost looks like the logo is kind of zooming in space, which is really cool. So you get some fun with how your sections interact with the modules that are inside it. And below that I'm going to add another section for this one I'm, not really going to define any background, colors, images, I'm going to leave it white and leave the image in video fields, blank and insert four columns here and. Just put in some blurb modules, I'm just going to put a blurb module on each of these I'm going to update there we go a basic section with a plain white background. So that's, what that looks like, and it's its, usually a good idea to kind of break up your sections.

You don't want to have like three background videos in a row or three background, images, that's kinda nice of a video and break it up with a plain white background. And then add another section below that, and we're going to try adding a. Background image, so I'm going to add a new section click, the Settings icon, I'm going to upload an image.

So I have this kind of space scene here. And for this image, I'm going to enable the parallax effect that I was talking about earlier, click, Save. So that'll make that image kind of stick in place as you scroll, and I'm inside that I'm going to add an image module. So I have this rocket image.

And it has a transparent background. So you'll see that space back on right behind it and click. Save and see what we have here so go, we have this back when imaging see, oh, it's kind of sticking in place. And as you scroll, because we have this rocket imaged, almost like the rocket is flying upwards to the clouds, which is another example of how you can kind of make your modules and your backgrounds interact with each other and let's try that again with a different image. So here I'm going to add a new section. And for this background image, I have another space scene.

And you can see here, it's. Actually the same exact spacing that I had for my preview section. So for this one I've made it black and white, and for this background I'm going to make it stick in place with the parallax effect and just like before I'm going to add another rocket image. This one, which is also black and white there. We go I'm just going to put this one over here on the right.

And inside this column, I'm just going to put a divider module, just to fill up the space, I don't want anything in there. So I'm going to have. This blank divider, and when I click update.

And as we scroll down, we have our new section with our black and white background image. And the reason I use the same image here is I wanted to show you this. Other cool effect where I because I use the same exact image, and they're both parallax. It almost looks like the images, transforming in front of our eyes because they're both sticking the same as X spot. And the only difference is that one is black and white and one isn't. So, yeah, it's a really fun.

Effect that you can do as well with the background images. And for our final section, I'm going to add another just to another plain white section. And inside it I'm going to do a full width 1 column, call-to-action module, and what I'm going to do differently here is I'm actually going to disable the background color for this module. Usually the CTA would have a background color become a bounding box.

So here where it says use background, I'm going to select no and for text color I'm going to keep it dark. Because the background is dark, add in heading update that. And if we scroll down, you can see we have this RCT a.

But the background of the CTA has been deleted, and it kind of assumes the space of this section. So now it's almost like we have a full-width CTA module here. So that's an another cool way you can use section backgrounds by deleting, the back of your module to make a kind of bigger area of separation and to bring more attention to the actual module. So, yeah, it's a basic overview of sections. With the Dive theme.

Your comment

+