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 :)

[@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

[@dannyly]

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

[@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?

[@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?

[@mdsazzat3969]

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

[@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%

[@robonekea2836]

Thanks for this. So simple. Great video.

[@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.

[@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?

[@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

[@itchyfingersdesign]

Great tutorial Josh 👏🏻

[@JoshHallco]

Thanks, Amanda!

[@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. :)

[@WordPressWisdom]

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

[@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;

[@alissacanto9839]

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

[@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/

[@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:)

[@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!~

[@lalitayadav1195]

Can we turn this into a slider?

[@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!

[@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)?

[@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.

[@RalfTenbrink]

This is so useful. Great video

[@juliasaezruiz3874]

Such a great work! forever grateful

[@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

[@davidflannery887]

Thanks for the info. I like the centering css.

[@JoshHallco]

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

[@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

[@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?

[@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 !!

[@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.

[@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 :)

[@jennifercook3137]

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

[@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.

[@sarabarats9204]

Can this be accomplished with the Map module?

[@VincentForDesign]

This is perfect! Thank you so much!

[@carolyn_s]

This is wonderful!!! Thank you very much!

[@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?

[@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.

[@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.....

[@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? :)

[@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.

[@simonNZ08]

Perfect Josh, Thank you so much.

[@JoshHallco]

No problem, Simon!

[@MarideMari82]

Thank so much! Just what I needed

[@StacyBarnesA]

Brilliant! So helpful, thank you!

[@VijayKumar-dn4pz]

Thank you. You are a legend.

[@showbizvet]

Thanks, just what I needed

[@levente.8800]

Perfect video. Thank you! (:

[@learntoearn6768]

Perfect Josh :)

[@olivermahrle]

very good video

[@fsvacacela]

Thanks a lot!

[@smorfnimda]

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

[@francisaitlarbi176]

Great !

[@JoshHallco]

Thank you Francis!

[@ZakirHussain-ig4yv]

abe ye kya builder he kya yaar !!!

[@mosama22]

Prince!

[@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