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 300+ free WordPress tutorials.
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.
Create Full Width Jumbotron Sections in WordPress
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. You can view the demo here.
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.
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 Jumbotron 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 Jumbotron 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.
background-position: 50% 50%;
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. You can view the demo here and it should look like below:
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.