How to Make a Fullwidth Section in Divi
In this tutorial, I’ll show you how to How to Create a Fullwidth Section in Divi where the content in the row extends 100% across the screen. By default, all Divi “sections” are actually fullwidth so technically the “row” is what needs to be made fullwidth. So perhaps a better title for this tutorial is “How to Make a Fullwidth Row in Divi,” but hey, let’s get to it.
To create a Fullwidth Section in Divi follow these simple 5 steps:
- Open the Row settings
- Go to the Design tab
- Set the Width option to 100%
- Set the Max-Width option to 100%
- Click Save
Then you’re done! Easy peasy.
As I mention in my previous tutorial answering the question “Where Did The Make This Row Fullwidth Button in Divi Go?,” this is a work around for how to make a fullwidth section in Divi after that button disappeared with a recent Divi update.
Links mentioned:
- Save 10% on Divi Theme
Get a special discount when you use my affiliate link! - Where Did The Make This Row Fullwidth Button in Divi Go?
My tutorial mentioned in video. - How to Vertically Center Text in Divi
This is part 2 of this short tutorial series!
Recommended Courses:
- Divi/WordPress Beginners Course
Use code “diviwp22” at checkout to get the course for only $75!
Download Your FREEÂ Fullwidth Divi Section Layout!
If you don't yet have an account on my site, create one then download this along with all other current and future freebies 🙂
Josh, YOU ROCK!
I’ve spent more time than I would like to admit trying to figure out how to create full width sections.
As a weekend web design warrior I find it increasingly hard to keep up with all of the changes and updates being made to DIVI. This is a fine example. One minute the “Make Full Width” button is there and then it’s not.
My biggest struggle, and I’m sure I’m not alone on this one, is creating a Full Width Header using an image as the background and making it fill the screen without being cut off.
I would so greatly appreciate if you could expand on this tutorial by showing us how to create a Full Width Header with a background image and text/button somewhere on the image.
I’ve figured out to do this but it never seems to display right across devices (Desktop, Tablet, Mobile).
All I want is a picture to stay full width and the text to stay in the same position. Sounds simple, right?
Thanks for all of incredible content
I’m with you on that Dave. Did you ever get a reply?
Thanks for this tutorial. I’ve downloaded it and now I want to make my footer design the same as your layout. How do you install that and make it the Global Footer? It’s not something I’ve done yet.
I’ve looked at how to do it, but your layout doesn’t work on my site.
Hey so my footer layout is done using the standard WordPress widgets and I custom CSS’d the title and some of the other elements. But you could definitely create something similar with custom CSS/widget areas or with the Divi theme builder!
Thanks. I realised it was a Section. I’m trying to make it my footer Josh, so I’ve got the section installed now and did so via the Global Footer. Now I’m working on how to make it appear. I guess it’s to do with the Widgets. Not done much on that yet, but I’m researching. I will want to edit it and your tutorial will help me when that time comes. 🙂
Just to let you know Josh. I’ve done it now. Thanks a bunch. Saves me time for sure and educated me on the ever more brilliant Divi Theme
Awesome to hear. Thanks for letting me know and enjoy Divi!
I’ve been looking for an answer to this problem for the longest, and I am SO GLAD that I found it here. I’ve used your content to guide me since the beginning of my web design journey, and I should’ve known that you had the answer here all along. Thanks!