DIVI Settings Training Video

VIDEO TRANSCRIPT

In this to tutorial I’m going to be giving you an overview of divi rows and the options that come with them. Now a row is the main organizational element in divi and its how you create columns. So Divi is made up of sections rows and modules. Sections of your largest organizational element and sections contain rows inside of them so for example here is a section with a white background and inside of it I have two rows.

This one here and this one here and each of those rows have three columns. Inside each of the columns I have a single module and if I were to edit this page and take a look at the structure you see that structure reflected in the divi builder and so I’m looking at the second area here this main section had the white background and then two rows.

Rows of the green things here each with three columns. That’s a row is the main organizational element and you can support various column structures. For example if at any time you want to change. A column structure you can click the column structure icon here and get all the different column structure that row supports so I have a three column right now with want to change this to four columns for example. I could do that and add another blurb like that and rows support various options as well so you bring up the row options. Going in a bunch of different stuff organized into three different tabs the general settings.

The Advanced settings and then custom C.S.S.Generally everything you need to use a row and to use it well is in the general settings but if you want some extra control I want to kind of above and beyond and customize the row a bit. You can head over to advanced design settings which has all kinds of great options and if you’re more of a developer you don’t want to use our design controls when you can kind of input your own custom C.S.S. and here I’m targeting very targeting the before and after suit elements as well as the main element which is the road self but I’m going to give you a basic overview of all these different road settings and kind of how they can be used together to create some really unique layouts.

Using rows a kind of like the best way to diversify the content on your page because they really just control how everything is organized and the modules that are themselves kind of the size and the shape and the position of the modules themselves on your page or dictated by the rows and so rows are very important when kind of creating a good flow on the page and so first let’s take a look at some of these basic options so you know each other Oh now you have this for column row that I created with four different modules inside of it and then after the page like quick so you can see what we’re starting with here and you the page.

You can see here is this white section in the single row single for column row with for blurbs inside of it. So let’s take a peek at these options and open up the options tab and the first option you see is make this row for with what this does is it allows the row to break from the standard content with so by default. Every section in row on the page. Except for a for what section is limited to the content with that you define the customizer or the default content with of the theme. But if you’d like to break this and let the row extend to the full width of the browser. Then you can do that by clicking this of and they say make this file with and save. You’re going to see that change reflected on the page here’s an refresh and you know. You’re going to watch these.

Blurbs extend to the edge here. It’s there for that and you actually duplicated this in the. Then refresh again and you can see these modules are getting close to the edge here so one thing you can do with is it with this effect this full width effect is create a like forward image gallery of sorts. So I’m going to show you how to do that which is kind of one of the main use cases for this full width row option that I’m showing you now so I’m going to go and delete all these blurbs instead I’m going to insert some images. So I’m going to insert an image module and then put a different image inside each of these rows columns. And choose a different image for each. OK so I now have a full width row with an image inside of each of the four columns.

So once again I’m going to head and update this and take a look. Refresh the page so those blurbs are going to be deleted and in their place have added four images. As you can see so and you can also see that the width of the images of the with the row is much bigger than the rest of the page so everything else kind of stops at ten eighty pixels this keeps going to the edge. But we can push that even further by delving even deeper into their options.

Which brings me to the next option on talk about which is the GOTA width with option? And what this does is it reduces the spacing between each of the columns you can either increase that spacing or in this case actually want to decrease it. Always down to nothing so those images end up touching each other and so I take this get away then bring it all the way down to one which is the smallest credit with which will result in no space between.

Each of the columns and no space between the modules either. And I can also just the padding so rows have padding by default above and below them which kind of separates them from the content from each other so usually you don’t want to know like text in two columns or two rows touching each other you want and space of I default space but in this case I actually want them to be touching so I want to remove that padding some going to set both these to zero and you know kind of give you an idea of what that does so I’m going to update this and when I do you’ll see that the images are not touching because I have reduced the GOTTA width with the zero. On this column say hey go all of the images are touching. And I can even take that further to get a bit further by editing the section and removing the padding from there as well so. Go over to the top and that top and bottom padding of the section make it zero. Update and then you can see how it kind of transformed.

This column in the section entirely into something completely different so now we have this full with a column of images. Row of images that touch each other and extend the full with of the browser and you can you can use this kind of technique with other things besides images to and which is going to bring me into some more settings in the Advanced tab of the row so I’m going to explore some of these advanced settings when I’m going to do so actually in a change this changes column structure about to back to one half of one half going to get rid of all these images and in their place someone has some blurbs back which is what we started with someone add some blurbs say call it blurb. Title the U.R.L.So you know where I’m going to use an icon I’m going to choose an icon here. I’m going to make the icon color. Home I can change that yet.

Moving on I’m going to make the text orientation center and are going to add some text in the blurb Ok about a back. A standard blurb I’m going to duplicate it and put it over into the other column there so now we have 2 blurbs and I want to have one column. And is going to look similar to what we started with but in this case like I said that the text is not going to look so good when it’s touching the edges right so are we remember one remove that padding from the row to let the images touch the edge of the sections above and below it. Well here is why we usually have padding in those rows because letting tax cuts or tax code just looks funky. It’s hard to read so in this case I’m going to use that the custom padding. Inside the blurred to get rid of that someone to go into the blurb and I just simply advance design settings to kind of guess different looks I’m going to change the padding to one hundred. In all these areas change all the margins to zero. Going to give it a background color.

It’s going to change the background color to purple or it seems too green. You can change the text code to light and change the header text code or to light as well I mean I can find a little larger and save that. And then I’m going to duplicate it into this Kong here. And I can change the background color of this one something different.

So let’s make it about Orange. OK so I’ve added some modules. Some blurb modules into the section. And because I’ve added padding on the inside of the module it’s going to get a similar effect to that image we had earlier but instead this time and the modules themselves are taking up the entire space. And we get the whole full width feel so that’s another way to kind of utilize that full width row option that I was referring to either. But let’s step back a bit and think of another way to use that so instead of adjusting the blurb what I can do is actually let’s start from scratch or cynically this layout and show you another way to get a similar effect. Some I am going to load my pre-made layout. And I’m going to make this row full width just like I did before remove the cutters. And the padding ok it’s now or back always started before I explored the blurb options.

Still looking at this for full width row and cutter option combination. I guess that we’ve removed to get away it’s. And we remove the padding and everything’s kind of squished together. Well I am going do that we can do is actually put that padding back. So let’s go back and delete our custom padding here. And save. When that’s going to do is make it so those modules aren’t touching the edges of the row. Anymore so I add that padding back. And I think we can do is go into the row and explore some of the advance row setting so I want to touch on next which is the Advanced settings.

And there’s a lot more here in fact there’s just there’s so much here it’s almost too much to cover. So I’m going to pick a few options that are really relevant to what we’re trying to do now. Which is create a really nice full width effect. Another way to do that is to actually assign background colors to each individual column so you’ll notice in advance design settings of the role modulea. Not only do you have the custom padding option but also have custom background colors. So I can assign back and goes directly to the column itself rather than assigning to the whole row or the module.

So I can make the first background the first column purple. To make the second column green and the third column blue. And then I can even increase the padding as well so I want to create that kind of block look I could bring out the padding and all these areas. So mainly I will do like two hundred in the top one hundred eighty or so on the right kind of duplicate that everywhere in and save and exit and see what this looks like.

So I’ve done here. As I’ve added padding to each column and the column itself on the row and about it custom background colors to those columns and I get to see the effect which is this kind of classic full width row effect. And as you extend the browser and make it smaller it all adapt to the browser size. In this case I’d probably want to adjust his modules well and make you know the text color a little bit lighter and what not to it to really kind of polish this style. They’re prone to remove the padding from the sections as well because it’s another example of how do you some these advanced settings to get some completely different effects of that were never possible before we had these rows of options and the classic look would be to do the one half one half look. And I could get rid of this. Duplicate it and maybe change switch these background colors around.

Me make this green and this one purple remove the padding from here looks good and save. Now we have of three columns we have 2 full width one half columns. As you see there and you probably want to remove the padding from these rows as well so going back to that option which I mentioned earlier. Just everything butts up against itself increases like really seamless effect and there you go. So yeah this one was just one of the effects you can create with these rows setting combinations. And the basic idea is you make the row full width which makes it extend to the edge of the browser. And then you remove the padding from the sections and the row itself and then you add padding to the columns inside of the rows.

So that there is kind of space between the content and the edge. And then you can kind of create these really cool like block layouts and you can get much much better looking effects and this I was that kind of shows and colors but you can do some really cool things and add background colors to these. Background images to the columns like not only can add a background image to a section in a row you can add background images to the individual columns with an Row now. So you really have just full control over everything with it within a section. And has so much you can do it when you start playing with the settings. So I’m going to go to some some ways I just make sure I touched on everything you can also use a custom with so instead of making it for full width if you want to make it just take a little bit bigger than your standard content you can do that as well.

So by default ten eighty before I make this road is a little bigger you can just drag it out a little bit if you do assign custom padding. We don’t usually apply that custom padding to mobile response a version of your site just because if that’s so you’ve you know added three hundred pixels of padding and looks great on desktop it’s probably not going look good on mobile. But maybe in your case it does me you know just add just the right amount In which case you can choose to apply that custom padding on mobile and then back to these advanced settings already went over to the background color but you can add back on images back home videos to the rows.

You can you know use Parallax effects in your background images and you can apply custom padding into each individual column within the row. And finally there’s a custom C.S.S. as well so if you really want full control you don’t want to try to use our design settings you want to get your hands dirty with some C.S.S.And you don’t want to you know create a child theme to do that you wanted just apply some custom C.S.S. this particular row. Well then you can do that right here. You can even add create Suit elements so we have the before suit element as well as the after suit element.

And then there’s the main row itself or you can add C.S.S.So it’s a basic overview of the of the row settings. And kind of what you can do when you combine them in creative ways.