Gutenberg content alignment

How to Set Wide or Full-width Content Alignment in Gutenberg

How to create full-width / wide-width containers in Gutenberg without coding? You might need them for headers, promo sections, and other content areas that you want to highlight. Wide and full-width content alignment in Gutenberg can also work for building visual hierarchy between sections and making some of them stand out.

You can do that for both pages and posts in WordPress.

Theme support for full-width alignment

The trick is, if you really need a no-brainer solution, this feature (the ability to span the full website width) must be supported by your WordPress theme by default. That is, since it’s an opt-in style, theme developers must declare it via add_theme_support (‘align-wide’) in functions.php if they consider it to be a reasonable addition.

If you are okay with getting your hands dirty, you can add WordPress theme support for full-width alignment yourself.

Set up different Gutenberg layouts via the block settings

So the following guide will work for you if your theme already supports it. To check whether it does, insert the top-level (a parent block that can host multiple blocks) Group Gutenberg block and then navigate to the “Change alignment” setting:

group gutenberg block

Let’s emphasize on the difference between these content alignment options in Gutenberg:

Full-width containers – both the section and content span the full width of the screen:

full-width gutenberg container

Wide-width containers – the section is full-width, but the content is fixed:

wide-width alignment in gutenberg

Moreover, some default Gutenberg blocks, e.g. the Cover block (which in its turn can hold multiple blocks) and the Gallery block, support different alignment options out of the box. In other words, you don’t need to put the Group block first to set a full-width alignment in Gutenberg.

You can change container alignment in Gutenberg WordPress for both pages and posts. If your posts/page layout is designed with a sidebar, the full-width container should span the content area without overlapping a sidebar (still make sure to test this out).

For example, let’s check the full-width layout of the Cover block in the GeneratePress theme to see the difference:

generatepress full-width container

Please keep in mind that to make your pages more lightweight in terms of CSS, steer clear of using different alignment options for the pages with sidebars.

If you are on third-party Gutenberg addons, each can also provide its own way to deal with the alignment options. For example, in Getwid, you can set a preferable alignment for multi-block containers by starting with the Section block:

getwid section block

Conclusion: How to Set Wide or Full-width Content Alignment in Gutenberg WordPress

Stretching your Gutenberg website containers to the full-width or wide-width layouts is an easy thing to do in the ever-evolving WordPress block editor – and it’s getting easier with every core update.

Some essential layout and alignment settings in Gutenberg rely on the crucial theme support concepts, so you first have to make sure that your WordPress theme is capable of handling different alignment options (otherwise, you need add them yourself). Thoughts, questions?

Leave a Reply

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