Divi has two distinct concepts around full-width layouts: full-width sections (the section background extends to the browser edges) and full-width rows (the row content extends to the section edges). Understanding which one you need prevents the common confusion of sections that appear full-width in the builder but look constrained on the live site.
Making a Section Full-Width
By default, Divi sections have a maximum width constraint controlled by the global content width setting. To make a section’s background extend to the full browser edge, the section does not need any special setting – section backgrounds are always full-width by default in Divi. What you may actually need is the row inside the section to be full-width.
Open the Divi Builder on your page. Click the row settings gear icon within your section. In the General tab, find Use Custom Gutter Width and set it to Yes. Then find Make This Row Fullwidth and toggle it On. The row content now spans to the full section width without the default content width constraint.
Need help with your WordPress site? Describe your project and get a free estimate.
Using a Full-Width Section Module
For specific full-width content types (sliders, maps, code, menus), Divi provides dedicated “Full Width” modules. When you add a new section, select the Fullwidth section type (the second option in the section type selector, with a single full-width column icon). This section type contains full-width modules:
- Full Width Slider – a slider that spans the entire width
- Full Width Image – an image spanning the full width
- Full Width Map – a Google Map at full width
- Full Width Portfolio – a portfolio grid spanning the full width
- Full Width Header – a hero/banner section
Full-Width Background Without Full-Width Content
The most common use case: you want a full-width colored background or background image on a section, but the text content inside should remain centred within the normal content width. This is the default Divi behavior. Add a section, set its background color or image, and the background spans the full browser width while the row content sits within the content width container.
If the background is not extending to the edges, check that your theme is not adding a container constraint outside of Divi. Go to Divi -> Theme Options -> General and check the Content Width and Layout settings. If the layout is set to “Boxed”, all sections are contained in a boxed layout – switch to “Full Width” for edge-to-edge sections.
Custom Content Width Per Section
For sections where you want a custom width narrower than the global setting (a narrow editorial column, a constrained quote section), set a custom max-width on the row. In the Row settings, go to Advanced -> CSS -> Main Element and add:
max-width: 720px;
margin: 0 auto;This constrains that row’s content to 720px centered while the section background remains full-width.
Full-Width Sections on WooCommerce Pages
WooCommerce shop pages use their own template system which sometimes conflicts with Divi’s full-width section settings. If a WooCommerce page section is not going full-width despite the row settings being correct, check whether a WooCommerce template is overriding the Divi layout. Go to Divi -> Theme Builder and check if you have assigned a custom WooCommerce template. If the shop page is using a custom Divi template, the full-width settings in that template take precedence. If it is using the default WooCommerce template, the Divi row settings within the WooCommerce template area may be constrained by WooCommerce’s container CSS rather than Divi’s.