How to Create a Full-width Page in Gutenberg

Updated: October 18, 2021

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.

Original posted on: October 18, 2021

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Support Us

Consider subscribing to help us grow. Get the regular articles about page builder plugins and WordPress in general.