Create Full Width Jumbotron Section 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 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.

Full Width Section
Full Width Section

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.

Group Multiple Blocks
Group Multiple Blocks

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.

Apply Full Width
Apply 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.

Group Block Settings
Group Block Settings

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

Add Background Color to Group Section
Add Background Color to Group 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.

Add Custom CSS Classes
Add Custom CSS Classes

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.

.fullwidthsection {
min-height: 400px;
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
}

.bgimage{
background-image: url(“https://img.webnots.com/2017/05/parallax.jpg”);
}

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

Add Custom CSS
Add Custom CSS

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:

Full Width Section with Background Image
Full Width Section with Background Image

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.

Editorial Staff at WebNots are team members who love to build websites and share the learning with webmasters community. Follow us on Facebook and Twitter.

1 thought on “Create Full Width Jumbotron Section in WordPress”

Leave your response.

Leave a Comment