a guide on on creating a child theme<\/a>, which you should read first.<\/p>\n\n\n\nAdd a new page, either before you upload the child theme, or via FTP.<\/p>\n\n\n\n
You can call it whatever makes sense, but in this case we're going to call it template-full-width.php<\/em>.<\/p>\n\n\n\nCopy the code from the Blank template<\/h2>\n\n\n\n You can copy the code through FTP or in your copy of Divi on your computer.<\/p>\n\n\n\n
However the easiest way is likely to be by going to the Theme Editor in WordPress, choosing Divi and going to page-template-blank.php<\/em>.<\/p>\n\n\n\nCopy all of the code in the editor.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nPaste the code into template-full-width.php<\/em>.<\/p>\n\n\n\nBe sure to include the opening <?php tag.<\/p>\n\n\n\n
Save your template.<\/p>\n\n\n\n
Change the template name<\/h2>\n\n\n\n At the top of the template-full-width.php<\/em>, you'll find the template name.<\/p>\n\n\n\nChange this to Full Width Page<\/em>, or something that makes sense to your workflow.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nRemove the container Div<\/h2>\n\n\n\n In Divi, the content width is set with <div class=\"container\"><\/em>.<\/p>\n\n\n\nFind this line in the top of your template and delete it.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nThen look at the bottom of your template for the line reading <\/div> <!-- .container --><\/em> and delete that.<\/p>\n\n\n\nThe <!-- .container --><\/em> is a HTML comment that lets you know which Div it belongs to.<\/p>\n\n\n\nWe want to make sure if we delete an opening Div, we delete the corresponding closing Div. Otherwise it will wreck your layout.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nHow to use your new template<\/h2>\n\n\n\n Add a new page, choosing \"Use Default Editor\".<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nOn the right sidebar, look for \"Page Attributes\".<\/p>\n\n\n\n
From the Template dropdown, select \"Full Width Page\", or whatever you called your new template.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nWe also need to remove the sidebar, or Divi will leave in padding.<\/p>\n\n\n\n
Yes, even if you delete get_sidebar();<\/em> from the template.<\/p>\n\n\n\nUnder Divi Page Settings, from the Page Layout dropdown, choose \"No Sidebar\".<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nSave your page and you'll have a full width layout for Gutenberg.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
Sometimes we want to use the Gutenberg editor for some of the simpler pages on a Divi site. I know, there are better ways, like using GeneratePress or Astra with Elementor or Beaver Builder. Those are my usual combinations when I know I’ll be building out a bunch of Gutenberg pages. But sometimes, you just<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[16],"yoast_head":"\n
How To Make A Full Width Divi Template For Gutenberg<\/title>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\t \n\t \n\t \n