In page builders like Elementor and Brizy, you can create a full-width page regardless of the theme you use. Different story applies to Gutenberg. In Gutenberg, you can only create a full-width page only if your theme supports it. No worries. It’s not that hard to create a full-width page in Gutenberg. This article will show you how.
Today, most WordPress themes already support full-width layout. You can figure out whether your theme support it or not from theme customizer (Appearance -> Customize) or from the Page Attributes section on the Gutenberg settings panel. We have tested the following themes to figure out whether they support full-width layout or not and yes, they support it.
- Hello
- Kadence
- Astra
In the Hello theme, no specific settings required. You just need to set the block alignment to achieve a full-width layout (will be covered later below).
How to Create a Full-width Page in Gutenberg
Again, it depends on your theme whether you can achieve a full-width layout or not. In this article, we will show you how to set a full-width page layout on Kadence and Astra, two of the themes we tested for this matter.
How to Set a Full-width Page Layout in Kadence Theme
Kadence is a WordPress theme optimized for Gutenberg. It comes with built-in setting options to set the page layout. To set a full-width layout in Kadence, start by creating a new page with Gutenberg (Pages -> Add New) or edit an existing page. On the Gutenberg editor, click Page Settings menu (next to the gear icon). Simply select the FULLWIDTH option on the Page Layout section.
As you can see, there is also an option to disable the page title, which is great when you are creating the homepage of your website.
How to Set a Full-width Page Layout in Astra Theme
Astra is one of the most popular free WordPress themes with over one million users. It also supports a full-width layout just like Kadence, Hello, and most other themes. In Astra theme, the setting option to set a full-width layout lies on theme customizer. So, open the theme customizer by going to Appearance -> Customize. On theme customizer, go to Global -> Container settings block. On the Page Layout dropdown, select Full Width / Contained. Click the Publish button to apply the change.
Next, you can start creating your page. Same as Kadence, Astra also offers a setting option to hide the page title, which is useful to create a homepage.
Set the Full-Width Alignment for Gutenberg Blocks
Once you are done setting the full-width page layout above, the content of your page might doesn’t look full-width until you set the Gutenberg blocks alignment. Here is the example:
To set the block alignment, first select the block you want to set the alignment of. On the appearing settings bar, click the alignment icon and select Full width.
Repeat the step above if your page consists of multiple blocks. Once done, preview your page and you should have the content of your page in a full-width layout by now.
2 thoughts on “How to Create a Full-width Page in Gutenberg”
Yes, thank you!! I’ve been wrecking my brain trying to figure out how to do this without having to install a page builder. Thank you so much, this works! I was using a slider plugin but it still wasn’t showing up full width, even after making sure all slider settings and page settings were set to full width. Since the slider was a short code, I typed it out in a column block and was able to set the alignment to full width. Oh man, finally got it!
Hi Liz,
Thanks for the comment. Great our article could help!