3 Ways to Create Full Width Sections in WordPress

Jumbotron is one of the popular components in Bootstrap framework. It allows you to create full width hero and header sections that will attract users. It is not easy to create such full width jumbotron in WordPress. There are many page builder plugins available for WordPress offer this type of feature. However, these plugins will use heavy JavaScript and drag the speed of your site.

Also, it is recommended to use page builder plugins only for page and not on blog posts. Earlier days you have to use these page builder plugins in order to create full width sections. Now, you can create full width sections in WordPress using Gutenberg block editor. And we will explain how to do this in this tutorial.

Learn WordPress: Check out 700+ free WordPress tutorials.

1. Gutenberg Group Block

WordPress introduced Gutenberg with the introduction of version 5.0. It is a block editor you can rely instead of page builder plugins. There are new blocks added to the editor with new releases. Group block was added to the editor in version 5.3. Therefore, make sure you have version 5.3 or later in order to create full width sections using Gutenberg editor.

Before creating a full width section, first decide the elements you want to include inside the section. Let us take an example that a full width section containing a heading and a paragraph. After applying a background color, we want the section to look like below.

Grouping Blocks with Group

First step is to insert a heading and a paragraph block and add your content. Now, hold shift key and select the two blocks using mouse. Click on the “Group” icon and convert two blocks into a group.

Alternatively, you can first add a Group block and then insert heading and paragraph blocks inside Group block.

Related: How to create full width CSS parallax page using Bootstrap jumbotron?

Making Full Width

Now that you have grouped two blocks, click on the “Change Alignment” icon option of the Group block. Select “Full width” option. If you need, choose “Wide width” to create wide width section instead of full width.

You can see the grouped blocks are converted to a full width section.

Changing Background Color

After selecting the Group block, look at the available options on the right sidebar. Group block has two customization options for changing colors and adding advanced CSS class.

Setup your text and background color for your full width section.

Now, you are done!!! Preview the page to view the full width section.

Customizing Full Width Section

When you use full width section, make sure you are using full width page layout. This depends on the theme you use. In most cases, the section may not align properly due to your theme’s CSS.

• Use spacer block to add top and bottom space for your block.
• Alternatively, you can use columns block to have sufficient margin and padding. It is also easy to drag multiple elements in column layouts to showcase the full width section.
• Finally, if the above two options does not work you can use advanced CSS settings as explained below.

Adding Background Image to Full Width Section

At this point, Group block does not offer background image option. However, you can easily add using custom CSS option. First add two custom CSS classes under “Advanced” section of the Groups block. Let’s name these classes as fullwidthsection and bgimage.

Copy the below CSS code and ensure to replace the background image with your own. You can also adjust the height and other parameters as you need.

You need to add the custom CSS code under “Appearance > Customize > Additional CSS” section.

Now, you have added an image background to your full width section. Preview or publish to view the full width section with background image. It should look like below:

2. Full Width and Wide With Elements

The latest Gutenberg version comes with the support for full width and wide width for elements. Instead of grouping blocks, you can create full width section with single element. For example, after adding an image, you can choose the alignment to full or wide width.

Remember, the additional alignment options will be available only for certain blocks like image. You will not see these options for blocks like paragraph. If you are not seeing the full/wide width options for image, then probably your theme does not support the features Don’t worry, you can add the below code in functions.php file to enable the full/wide width for supported blocks.

add_theme_support('align-wide');

3. Using Cover Block

The last option is to use Cover block to create full width hero sections. This is typically suitable for header sections of the page layout. WordPress also offers pre-defined patterns for cover block that you can simply insert anywhere on your site.

Reusing Full Width Sections

Big advantage of Gutenberg editor is that you can convert any block into a reusable block. It means, you can insert the reusable block anywhere on your site and convert it into a local block for adding specific content. You can also move the sections up or down and create multiple sections to have a beautiful layout. Checkout the live page created with full width sections.