How to Make your PBE-Created 404 Page "Full Width"

Replace the page content with a full-width layout

  1. Save the layout to the library

  1. Go to the Appearance -> Widgets
  2. Make sure you have Page Builder Everywhere activated.
  3. Drag the Divi PBE Widget and drop into the PBE Replace Main Content box.

  1. Choose your saved 404 Page layout. 
  2. Uncheck Display Library Item Title?.

  1. Click “Conditional Logic”
  2. Choose Display if -> Page -> 404

  1. Check if your 404 Page is working going to the page that not exists, for example www.yourdomain.com/32424242/
  2. It should look like this:

It’s not full width, because by default container has 80% width.

  1. You can change it with the following CSS:

#main-content .container {

max-width:none;;

padding-top:0px;

}

To apply these settings only to the 404 page,  which I recommend, add error404 class at the beginning:

.error404 #main-content .container {

max-width:none;;

padding-top:0px;

}

If you want to apply these settings to the specific page only and it isn’t 404 page, just replace the number id in the code below:

.page-id-6754 #main-content .container {

max-width:none;;

padding-top:0px;

}

To find the page id, follow this blog post:

https://www.elegantthemes.com/blog/tips-tricks/how-to-find-your-wordpress-page-id-and-post-id-and-what-you-can-do-with-them

Still need help? Contact Us Contact Us