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

[@whipy9203]

Hey Josh, just another quick message to say that I'm a total beginner with no knowledge of code, so easy tutorials like this help me to improve my Divi layouts immensely and to add new custom sections to my library that look great and can be called upon at any time! I wish you had more tutorials like this where you teach beginners how to create cool looking custom modules and sections! If you or anyone else knows where to find more videos like this one, please let me know! I'm more of a video learner than an article learner myself :)

[@robonekea2836]

Thanks for this. So simple. Great video.

[@ericacarnohan]

This was super helpful, as was your video about the full-width button not being there anymore - thanks for your help!

[@diamantinocoelho7242]

Hi Josh! Thank you for sharing. How would you convert this layout into a slide?

[@mdsazzat3969]

Thank You. This two column section was making me crazy.

[@shiyolep]

We love you Josh! Thank you!

[@JoshHallco]

ha too kind, too kind. Thank you!

[@AdvanceWebSolutions]

Works thank you! Really hoping future Divi updates allow you to do this without CSS, here's hoping:)

[@dannyly]

The option to 'make this row fullwidth' is not longer available.

[@cliffnowicki]

This works great, but once the information exceeds the height of the image, the background color start to extend above/below the image, which no longer makes it take up the full height of the column.

[@Tazka]

You can fix this by using object-fit function. For example Parent: display: block; width:100%; height:300px _______________________ And the image: position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover;

[@angeliquebergerEXDB]

Hi Josh, Awesome Vid!! Thanx. Most frustrating elusive part for me is where you're doing the Shift / Alt to make the whole section slimmer. I'm just not able to gracefully close the walls in on the content like yours does. I'm using a Mac laptop, are there other keys then the Shift and the ALT/OPTION that I should be using?

[@nomnom8343]

Such a helpful tutorial! When I try to adjust the padding per the tutorial, I don't have any options for the different columns - it's all under the one row. Anyone have any ideas?

[@RalfTenbrink]

This is so useful. Great video

[@juliasaezruiz3874]

Such a great work! forever grateful

[@WordPressWisdom]

Great video! Please which software did you use in making this video?

[@itchyfingersdesign]

Great tutorial Josh 👏🏻

[@JoshHallco]

Thanks, Amanda!

[@CharlesHutchinson]

Good stuff. Thanks for taking the time to put this together.

[@JoshHallco]

Thanks, Charles!

[@nocodekevin]

thanks, used this to fix today on a problem I was having with the first Divi built site for a client.

[@JoshHallco]

Awesome to hear it helped you out, Kevin! Cheers

[@VincentForDesign]

This is perfect! Thank you so much!

[@alissacanto9839]

This has been so useful, thank you. Is it possible to turn this into a slider?

[@VijayKumar-dn4pz]

Thank you. You are a legend.

[@olivermahrle]

very good video

[@pixeepixel4170]

What if I have a two-column section with two images and I'm trying to set two DIFFERENT background colors behind the images to take up the full container (fullwidth both vertical and horizontal)?

[@carolyn_s]

This is wonderful!!! Thank you very much!

[@MargeBrown]

Hi Josh, Love your tutorials they've helped me solve many problems. Curious to know if this technique will work if the columns are 1/3 & 2/3 rather than of equal size? Look forward to your response.

[@bananareda7785]

Hi Josh ! I want to ask you about searching boxes , i'm creating a job board website and i m not using a specific theme , could you tell me how or where i can get a serch box with location and categories ! thank you soooo much !!

[@showbizvet]

Thanks, just what I needed

[@Marloez82]

Thank so much! Just what I needed

[@anamazanova]

Great tutorial, thank you for that. I have only one annoying thing that is happening after I include the code in the style sheet. All cards, blurbs, etc., which columns were equalized turn to have different sizes/heights because of this code being in the style sheet, which impacts the entire website. I tried including the code just to the page settings but obviously, it affects cards the same way. Then I decided to insert the code just to the module Custom CSS under advanced settings but Divi shows the code has errors (like unexpected item "}" and similar stuff. Any idea of how to overcome these frustrating changes?

[@zoelove3430]

Does CSS for adjusting the passing of the second column work if you're also using CSS to adjust column stacking order on mobile? Would it recognize the correct column to apply the padding to?

[@ladyjayttv]

Anyone else come across the problem that “make full width” option as seen at 2:37 is not an option on divi anymore?

[@JoshHallco]

Here's the fix: kzbin.info/www/bejne/lXXEeGmfnb50mZo And kzbin.info/www/bejne/l5DOhZ9pfdSYg7c

[@simonNZ08]

Perfect Josh, Thank you so much.

[@JoshHallco]

No problem, Simon!

[@davidflannery887]

Thanks for the info. I like the centering css.

[@JoshHallco]

No problem. Yeah that's one of my favorite little tricks for Divi :)

[@StacyBarnesA]

Brilliant! So helpful, thank you!

[@learntoearn6768]

Perfect Josh :)

[@nabiganjit7192]

Maybe this option not any more on new Divi theme. I have tried but I can't make the row full width. Do you have any new tutorial about it ? Thanks

[@JoshHallco]

Here ya go: joshhall.co/where-did-the-make-this-row-fullwidth-button-in-divi-go/

[@nabiganjit7192]

@@JoshHallco Thank you I got it already. :)

[@denniszenanywhere]

Thanks for this. I went to Appearance /Theme Editor and added the code but keep getting error: Something went wrong. Your change may not have been saved. Please try again. There is also a chance that you may need to manually fix and upload the file over FTP.

[@krys_is]

I do not see any option, that allows me to make my whole row fullwidth? How to do this now?

[@sagar_bhalerao]

sam here

[@RuneGlad]

I believe you have to set it manually in the "width" field, to 100%

[@krys_is]

@@RuneGlad I contacted Divi support, they were willing to help! Thanks anyway!

[@krys_is]

@@JerelLorenzo set max fullwidth to 100%

[@StephaneMorales]

Thanks for the tuto Josh! Is it possible to do the same thing with slides instead of pix? I'm still having a big white margin that I can't get rid of... This is driving me crazy

[@JoshHallco]

Thanks, Stephane! I would think it's possible though the slider module is a bit more tricky. You'd probably have to get in and play with the margin and padding. And make sure all images are saved at the same size.

[@sagethirteen]

Hey Josh, Great tutorial ~ thanks! Any css tips out there for basically flipping the order of the columns of the second row for mobile. ...So it would view image, text, image, text (instead of image, text, text, image) ~~~ :)Kt

[@perhaar]

I have the same issue 🙂 I hope there is a way to fix it!

[@perhaar]

@Katie I found a way. It's called Stacking order. And it works just the way that we could hope for. There is a small code snippet and a tut. Good luck. kzbin.info/www/bejne/bWitdmCJjpaSd9k

[@JoshHallco]

+1 on that method!

[@sagethirteen]

Awesome Per! Thanks for the taking the time to comment and for the link, much appreciated!:)~~

[@sagethirteen]

Great, Thanks Josh!~

[@fsvacacela]

Thanks a lot!

[@thearnaoute]

Hi Josh, For some reason the columns will not stack on my page but rather stay side by side with the image being extra tiny. How do I fix that? :)

[@levente.8800]

Perfect video. Thank you! (:

[@87schatje]

Hi Josh, I've tried doing this several times, and even recreating the row from scratch but the text still isn't centering. Any ideas? Would really love your help!

[@JoshHallco]

This layout and code is all still relevant with the new updates to Divi so usually I recommend clearing the cache and refreshing browser to show the CSS!

[@87schatje]

@@JoshHallco thanks! I'll try that.

[@JoshHallco]

@@87schatje if that doesn't work, zip a note in here: joshhall.co/contact

[@terry4O]

No longer option for making sections full width. Help!

[@derekjones3596]

Go to sizing of the row and change width to 100%

[@terry4O]

@@derekjones3596 Thanks Derek, I had figured it out but appreciate you taking the time to answer.

[@lalitayadav1195]

Can we turn this into a slider?

[@francisaitlarbi176]

Great !

[@JoshHallco]

Thank you Francis!

[@sarabarats9204]

Can this be accomplished with the Map module?

[@jennifercook3137]

Hi Josh - how can I do this within a slider?

[@berylvaughan]

I followed the directions but my image in the left column is cropped. I lose the full image with gutter 1 full width

[@JoshHallco]

Hey Beryl, yeah the image will be cropped depending on how big the other section is. I usually just adjust the image to be able to work if part of it is cropped.

[@mosama22]

Prince!

[@wizzle89]

I dont have the "make fulll width" option in my divi for some reason, any ideas?

[@JoshHallco]

Here ya go: kzbin.info/www/bejne/lXXEeGmfnb50mZo

[@Vtulenet]

@@JoshHallco thanks are lot

[@whipy9203]

Great tutorial, thanks a bunch! One remark though: at 9:10 you mention that you can also post the code into the custom section in the visual builder, instead of in the styles.css in your child theme. However, when I try to paste the code into the custom section, it gives me an error. /*---------------Vertically Center Column Elements---------------*/ .et_pb_equal_columns >.et_pb_column { [EXPECTED RBRRACE.] margin-top:auto; margin-bottom:auto; } [UNEXPECTED TOKEN '}'.]

[@aubrimikels38]

same.....

[@makkistudy]

Please make full website tutorial

[@JoshHallco]

I will certainly keep that in mind. I plan on releasing a couple courses/training this year so I'll probably do it there. Though maybe I can do a simplified version as a free tutorial....

[@princeton5050]

I like the idea of that, yes please :)

[@RyanM-gc4og]

make this row full with is no longer available?

[@RyanM-gc4og]

found your other tutorial on the missing full width setting. width 100% and max width 100%

[@JoshHallco]

joshhall.co/where-did-the-make-this-row-fullwidth-button-in-divi-go/

[@9tofreedom]

how do I add a glitter box with a break in around the image?

[@JoshHallco]

Not sure exactly what you're going for but it sounds like either a border effect or background image!

[@pablismo]

Isn´t work this in the new version!

[@JoshHallco]

Be sure to add the CSS in the post and refresh/clear cache as it works with all recent versions of Divi. It's what I use on all my sites :)

[@pablismo]

Hi Josh, first thank´s for your tutorial. I´m just wondering were is in the row settings > design > this "sizing" isn´t work form me. Would be nice to show you ans screenshot but I can.

[@smorfnimda]

DO A BOX WITH A TOP AND BOTTOM AND NO GAPS!!!!!!!!

[@ZakirHussain-ig4yv]

abe ye kya builder he kya yaar !!!

[@kingfoxx6697]

didnt even write a single line of code... smh

[@topeadebayo8863]

well this was really rubbish

[@JoshHallco]

Yes! I've been waiting for these type of hater comments to come in. That's when you know you're on to something :)

[@kingfoxx6697]

@@JoshHallco no it's really not, you not even coding mate