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

by | Mar 11, 2018 | Divi Tutorial | 48 comments

<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 &gt;.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:

Magnfi.com