How to Create a Fullwidth 2 Column Image & Text Section in Divi
<iframe width="560" height="315" src="https://www.youtube.com/embed/TLril7ShLUo?showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
In this tutorial, I show you how to create a Fullwidth 2 Column Layout with an Image and Text in Divi. There are numerous ways to do this but I’ve found what I think to be the most straight forward and simple solution. This is also accompanied by a free layout! See below for download.
<strong>Here's the CSS:</strong><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->
<!-- [et_pb_line_break_holder] -->/*---------------Vertically Center Column Elements---------------*/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.et_pb_equal_columns >.et_pb_column {<!-- [et_pb_line_break_holder] -->margin-top:auto;<!-- [et_pb_line_break_holder] -->margin-bottom:auto;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->This code is what will center the text when you check "Equalize Column Heights" in your row settings. I also recommend saving this for all your Divi sites. Cheers to Pierre Sudarovich for providing this code on <a href="https://www.facebook.com/groups/diviwebdesigners/permalink/473216626382046/?hc_location=ufi" target="u_blank">a recent thread</a> in my Divi Web Designers FB group 🙂Links mentioned in the video:
Where to Put your Custom CSS in Divi
Vertically Align Content in Divi
Example site shown in beginning:
Get the FREE Layout!
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Hi Josh :)!
Good trick! Thanks for sharing ;).
All the best.
Thank you for the code snippet, Pierre! I use that on EVERY site now 🙂
Thanks, Josh! Step by step, very clear for everyone. Awesome job!
Another great video. Thanks, Josh!
Sure wish I were as smooth as you are when doing video tutorials. 😛
ha thanks, Corey. A lot of trial and error and editing has helped 🙂
Thank you very much for the tutorial
No problem! Thanks for the comment.
You made my day with this tutorial!
Awesome to hear, Rodrigo! Thanks for the feedback 🙂
Good job Josh, you’re a great teacher, very gifted to explain things clearly step by step.
Thanks, Daniel! Really appreciate that and your awesome feedback.
Hi Josh, I love your new tutorial! Thanks a lot for sharing.
I have one question. I replaced the image, with a .gif I made. The new gif (animation) is loading too quickly. First, there is this gif, and a split second after, the header. Is there a way to delay the loading of this gif?
kind regards,
Claudia
Hi Josh, I solved the problem! have a nice day!
Claudia
Awesome. Cheers!
Hey Claudia, unfortunately with gifs or any animated file, you need to adjust that with your graphic or video program. I’m not sure of a way to adjust the loading but that doesn’t mean it isn’t possible. Not sure if you’re a member or not, but you’re welcome to post the question in my FB group! https://www.facebook.com/groups/diviwebdesigners/
Someone may have a solution for ya.
Am I right in thinking that all the images have to be the same size (or at least the same width) or this won’t work as shown?
Hey Ian, if you’re going with a layout with multiple images and text section, yeah it’s best to have the images at the same size or dimensions. But if it’s just one image/text section, you’ll just want to make sure the image is big enough height wise to avoid any extra space around the text section.
Nice tutorial Josh 🙂
Thanks, Kirb!
Great tutorial thanks for that. Question if I made a fullwidth section as described but I wanted it to come up to the very top of the page (under the header, using a transparent header) how would that be done? Negative margin on the section? And how can you adjust the column sizes? 65/35 for example. Also is there a way to make the text overlap the image?
Cheers
Thanks Brendon. If you go into Theme Customizer Settings and take the main menu opacity all the way down, it’ll pull the first section up. I’d recommend trying that out to avoid doing any extra CSS!
Hi josh, I’m waiting for you to make a new divi tutorial 🙂
I know it – I’m excited to get back to it. My daughter was born last month and has been in the NICU for 6 weeks now so I’ve had a hard time keeping with up with everything going on. She’s progressing well though so hopefully we’re out soon. I have MANY tutorials and training courses in the works!
Hello Josh, thank you very much for your lessons)
The question is not on the topic of this lesson. I want to make that when I put “HEADER STYLE” “SLIDE IN” on the left there was an icon of the hamburger menu and on the right there is no logo in the menu, but Call to Action Button. Advise how to do please. Thank you in advance.
Hey Sergey, it’d probably take quite a bit of custom CSS to pull that off. Easiest way would be to use the new header plugin by Superfly. Check that out here –> https://besuperfly.com/product/mhmm-mighty-header-and-menu-maker/aff/274/
When I browse my site on mobile devices with a large screen resolution between the Divider and the next block, a white line is visible. On the web version everything is fine. What can be done?
https://pp.userapi.com/c847218/v847218756/71c58/8cxkj5WSXhA.jpg
https://pp.userapi.com/c847218/v847218756/71c75/gdfPpCo_URs.jpg
I think it depends on the image sizes and the padding, Sergey. I’d recommend adjust both of those to get rid of the line on tablet and mobile!
Great tutorial. Worked for me, but I have a small problem. The site that I manage has quite a bit of custom that I didn’t set up. This CSS code changed other pages for me in a negative way. I had to take the code out. I’ve tried to add the code only on this row, but I must not be entering correctly. It’s not working on the single row. Any advice on adding the CSS to only this page/row? It would seem simple enough, but I can’t get there.
Thanks, Evelyn
mmm I’d recommend adding an ID to the row/section then adding that ID in front of the classes in the CSS! That way it just applies to that section!
Hi, is it possible to add this effect to slider images?
I would to split image and text to slider module.
Thank you, very much.
Good question, Davide. I should be possible, you may just have to adjust a few settings to make sure the slider images are lining up flush but yeah it should work!
Would this work with a video? 🙂
Good question Jonny. Yeah potentially it should work for the video module or even if it’s a background video. I did something similar with this type of layout and background videos on this page: https://www.magnfi.com/meet-magnfi/
Thanks Josh this is really helpful. On a mobile I want to change the stacking order of these elements. I have a number of them on top of each other, they alternate, the image on the left and the next one, the image is on the right. On mobile I want them all to appear image first, text second down the page). Ive tried a couple of pieces of code that change the stacking order but they’re not working. Can you help or try to see if it works for you – is there anything here that would stop the stacking order from occurring on mobile?
Check out this tutorial, Grant!
Hi Josh! I watched your video and thanks very much for the clearly tutorial….
I have a question: I repeat the fullwidth layout changing the image and text side on each section, but in the mobile versión the layout change being left image-text-text-image. Si the re any ay ti fix it in the mobile version?
Thanks you for reading!
Yep I have a tutorial on that!
how to make slider inside post?
nice article
You can just add a slider module to the section you want.
This is a brilliant tutorial! You are so good at explaining things so clearly. When I go into the Spacing section of the whole row, it doesn’t give me the option to change the padding in column 1 or column 2 – it just changes the padding for the whole row. Any ideas on what’s going on?
You can go in each column and adjust the padding there inside the row settings!
Hi Josh,
Your tutorial was super helpful, but I’ve been trying to get two images to be full width next to each other and no matter what I do I can’t seem to get that to happen. I downloaded your free layout (thank you!) but even with your layout and css I couldn’t seem to get the opposite row with text (replaced with an image) to be full width. Any suggestions?
mmm have you tried making sure the gutter width is set to 0? I’m guessing that’s it if the padding for the row and each column within the row is set to 0. Otherwise make sure that’s the case as well then you should be set!
Hi Josh,
I seem to have different options in my row to you. There are no gutter width options at all. I’ve checked the image settings, the row settings and the section settings in case I’m looking in the wrong place, but none of them have those settings. It’s weird. Could I have a different version of Divi or something?
sorry – there is gutter width on the row and it is set to 1, and won’t let me make it 0.
Try manually putting in 0. I’ve had to do that before as well.
When I went to add the code to my CSS stylesheet, I got an error that said the code wasn’t written correctly and if I saved it anyway it could break my site…I’m confused as I copied it exactly as written.
You’re good, Karen. It’s the code I use in all my sites 🙂