How to Create a Fullwidth 2 Column Image & Text Section in Divi + Free Layout

<iframe src=”https://www.youtube.com/embed/TLril7ShLUo” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

Hey guys it’s Josh here in this tutorial I’m gonna show you how to create a full width two column image and text section I did this recently on a site where the client asked me to add this image on the Left where there was no padding and it was tightly aligned in the actual section and then to the right of it he wanted text that was going to be perfectly centered so I’m gonna show you what I found to be the best method to create this and it actually looks a little easier than it is there’s a few little steps with it that I’m gonna walk you through and you’ll notice with this design that we’re not only using just text here but we’re using multiple modules there’s three blurb modules under this text module here so I’m gonna show you how to create a section like this to wear anything you drag in here is gonna be perfectly centered and aligned and of course if you’ve seen any of my recent tutorials you know that we’re gonna make sure it looks good on mobile so on mobile what’s gonna look good here as well so without further ado let’s go ahead and dive in oh and actually I wanted to mention before I show you how to do this that I’m gonna make this a free layout for you as well so you can follow along and you can see how I’ve done this and then you can download the free layout and you can try it on all of your websites so let’s go ahead and dive in I’m over here at my tutorial site and I went ahead and got this started so we’re using a section here with a dark background we have this image and then we have one text module right here and I’m gonna use the visual builder in this tutorial just because it’s a little bit easier to see as we do each little step here with the visual builder you could of course use the backend and I’ll tell you what I’ll show you how I have this set up if you’re not familiar with this little trick if you’re or if you’re new to Divi when you’re in the visual builder you can click here and you can go to your wireframe view right here and so this is this section right here so I’ve got an image to the left and just one text module to the right so the first thing that we need to do is we need to make this a full width row by default all sections have quite a bit of padding on them unless you change them in your theme customizer settings so what we’re gonna do is we’re gonna go ahead I tell you what before we even do that let’s get rid of all this padding I’m gonna hold down shift and alt and I’m gonna drag this up which will reduce the padding on the top and bottom and I’m gonna do the same thing for the row hold shift alt and you drag this and it’s going to adjust the bottom and top equally okay so we’re off to good start but now we need to make sure this image is full with this actual whole row so we’re going to go ahead and click into the settings we’re gonna click design and you go to sizing this is where we have the options to really make this section sign so we’re gonna click make this full width real and that’s looking pretty good but again we’re still not quite there and this is where a lot of people I think it confused and probably give up there’s one last little step in here and that is to go into your custom gutter with and you need to click this and we need to make the gutter with one all right yeah one will take it all the way down so that things are aligned flush so we’re gonna go ahead and click this and let’s save I’m gonna do ctrl s to save alright and we’re on our way there’s only a couple more steps we need to do we’ll notice off the bat that this text is up here tightly in the top in left corner the first thing that we need to do is we need to go back in there and you could do this instead of going out like I just did but you’re gonna go back into sizing and you’re gonna want to make sure equalize column Heights is on now by default that’s not going to do anything but if you saw my previous tutorial on how to vertically align your elements with an equal column height you’re gonna use that same code and I’ll make sure it’s available in this post but it’s just a little code right here and this is really really handy so you need this CSS and you can put that in your custom CSS or typically you see me going to my stylesheet I’m logged in to the back end of the website and you can find your style sheet in WordPress under appearance editor and now WordPress actually has all the lines here so often I don’t even go in through FTP I’ll just go right into here into appearance editor and I’ll make sure I’m in my style sheet so I’m gonna go ahead and drop that code in there we’re gonna go ahead and make sure this is saved and again we’re just going to make sure that the sizing option right here equalized column Heights is on so we’re gonna save that we’re going to save and now once this saves that should bump that down let’s go ahead and exit the visual filter let’s go look and there we go you can see it perfectly aligned that in the center where this is important is you could go into this module and you can adjust patting but when you start adding other modules you’re gonna have to do the padding for each module that could be very time-consuming and be really tricky as you update the site moving forward so I’m back into the visual builder and this is looking pretty good but there’s again one more thing that we need to do and that is to adjust the padding now again like I just said you could go into the design section you could go into spacing and you can adjust the padding here or if you do what I do often you can go into advanced into your custom CSS section and you could add padding here let’s add maybe 50 pixels of padding and should make it look pretty nice so that looks pretty good but again if we want to add more modules under here you’re gonna have to do padding for each one and you’ll have to adjust it from mobile which is kind of a pain so let me show you a little trick that I’ve learned recently with this I’m gonna go ahead and take the padding out for now but I do have that copied where I put it now is if I go back into the whole row section you’ll notice that this is going to give me an option to change the amount of columns that are in this row so check the cell I’m gonna click spacing and I can look in here and you can see that under spacing it gives me column options for each column or I’m sorry padding options for each column now I could do that here or I could go into the Advanced section into custom CSS and if I scroll down you’ll see in here it also gives me a CSS option for each column which is super super handy so in this case I’m gonna go to the main element under column two I’m gonna drop this padding in and it aligns it perfectly now what’s really cool about this is like I just said if I add another module let’s go ahead and add another text module right here and you’re gonna notice that as soon as I add another module another text module is as long as I style this similarly to the one above I can do the light and I could sit into this text or keep to the left it’s going to keep it perfectly centered it’s that simple to be able to do this and the cool thing about this as well by putting the CSS in the actual main element in the row settings is this is going to look great on mobile so if I get out of this section here we can scroll down it’s looking really good I can’t go ahead and zoom in my screen here and you’ll see that it aligns perfectly looks really good on mobile now this does become a little tricky if you’re using a horizontal image on certain width so for example if I am if I have a horizontal image like this and I duplicate these text sections let me show you what this looks like it can get a little more tricky so generally you’re gonna want to make sure you don’t have too much text in here to where it’s going to overlap the design or I’m excuse me the image so for example if i duplicate all this text you’ll see it’s going to start doing that so you want to make sure if you have a lot of text you replace this image now I have a larger version a higher version of this image right here so in this case if I had a lot of text on the right and I wanted a nice image on the left to remain flush I’ll make sure I crop it or have an image that’s more vertical as opposed to having a horizontal there we go now it’s good to go and it’s that easy guys so just those few steps and you’re on your way to making a really nice full width to column section that’s flushed up with an image on the left and text on the right and you can also apply this just the vice versa so for example let me show you how I do this what we can do is we can actually duplicate this section so if i duplicate this column we can go in here and I’ll use the wireframe mode for this right here so let me go ahead and just get rid of some of these previous text boxes what I want to do is just rotate this and switch it so this time we have the image on the right and the text on the left you’ll notice and let’s go ahead and put that previous image back in just for the sake of this upload that image yep now we go back out you’ll notice that we’re getting there but this has the padding and that is because that padding was in the spacing you know I’m sorry the advance and custom CSX six in here so the padding is currently on the image column so we want to put that over here and the column one main element column and it looks like I think I need to make that text light so we’re gonna do text light and there we go it’s that easy guys and really with this trick you can do this on any section you can do this with regular sections you can do this with full width sections you can do it with specialty sections and by just making it full with making sure you’re using this code in your style sheet or your custom CSS and then making sure equalize column Heights is on you can come up with a really nice design for full width columns and again it’s gonna look good on mobile so if you have any questions let me know otherwise feel free to download the free layout that I’m gonna offer you guys I’m going to give you a layout where the image is on the left and text on the right and I’m also going to give you an image where there’s text on the left and the image on the right so you can use accordingly with all your designs hope this helps out guys looking forward to hearing some feedback Cheers

As found on <a href=”https://www.youtube.com/watch?v=TLril7ShLUo” target=”_blank” rel=”noopener noreferrer”>Youtube</a>

(Visited 6 times, 1 visits today)

You Might Be Interested In

LEAVE YOUR COMMENT

Your email address will not be published. Required fields are marked *