Wait! Are you leaving?

Try Gutenix subscription for Free !

  • +6 Free templates for Elementor and Brizy
  • Free Gutenix theme
  • Warm hugs from Gutenix team!

How to Build a WordPress Hero Block with Gutenberg


I’m the SEO specialist at Webcodebuilder and ZEMEZ, companies that create templates powered by Gutenberg WordPress editor and Elementor page builder . We also have ZeGuten multipurpose plugin, which expands Gutenberg's possibilities.

How to Use WordPress Customizer and Reusable Blocks
Prew post
  • Feb 17, 2020
  • 3 min read
  • 929

How to Build a WordPress Hero Block with Gutenberg

In this quick and simple tutorial, we will figure out how to build a Gutenberg Hero block, and also how to customize it. Firstly, let’s dive into the main idea of the WordPress Hero block.

This section might consist of pretty many elements and one of the specific element is the fullwidth image, video or any other background. However, you have to get the golden middle not to override the visitor with the information.

Additionally, you can watch this video to get some ideas on how to style your block.

Moreover, the Hero block contains a few must-have elements:

  • a background;
  • a heading;
  • a paragraph with text;
  • a CTA button.

Nevertheless, it doesn’t mean you shouldn’t use a slider or something else aside from the list. You can mix and match the elements you want to get the exact eye-catching effect. However, there are some basic rules for each welcome Hero block.

Firstly, you should use H1 heading with the main keyword in it. This tip will do for SEO optimization and help search engines to rank your website high. Now let’s try to build a few hero section variants to choose from!

Block with Gradient Background

Basically, the easiest way to create a welcome Hero block in WordPress is to do it with the Cover Gutenberg block. It will allow you to add various kinds of backgrounds, and the gradient is one of the options. Let’s start with the gradient Hero block background. Simply add a Cover block to the page’s canvas.

add a cover block

After that, navigate to Overlay options on the right and here switch to Gradient. In that tab, you can pick a few gradient points, select the gradient type and set an angle.

make a Gutenberg hero block gradient

Now let’s add two more background gradient points and choose the proper colors. Set the linear type and the angle value. As a result, you are able to fill the block with the content.

style up the gradient

After that, you can add any element you want over the background gradient of the Hero block. The most basic and productive variant is to stay minimalistic and don’t disturb people from the necessary information.

Also, you should probably add:

  • eye-catching heading to attract visitors.
  • some text to introduce your company, platform, startup or anything that will discover why people need to stay on this page.
  • CTA button that will engage people to learn more.

To make your Hero block take up full width od the page, check its options and select Full width alignment.

Image background for a landing page

Creating a Hero section WordPress block with a default image is even easier. Create a block and upload an image to the media library from your PC.

add a new cover block

Besides, as the background in this Hero block is an image, any information overabundance will disturb people from the main point and make it uncomfortable for them to follow the topic.

That is why you may need to showcase a few text elements to give people a piece of introductory information. In our course, we will build a landing page for the preschool startup. We decided to add a Heading block and a Paragraph block below.

customize the Gutenberg hero block

Hero block with video background

Fewer words – more actions. The video background of the Hero section WordPress block will catch the attention of any visitor and might become the main visual trigger. Use it instead of the image background, to make your page more dynamic.

add a video

You can add any Gutenberg block over the video background. Simply click on the “+” icon and choose the needed one.

Choose the background that will work for you and let’s move to the next tutorial! Subscribe to our newsletter and stay in touch for more useful tutorials and instructions.

How to Recover WordPress Block in Gutenberg
Next post
How to Use WordPress Customizer and Reusable Blocks
Prew post
How to Recover WordPress Block in Gutenberg
Next post

Get Gutenix Subscription

Create unlimited websites with dozens of templates, premium Gutenberg blocks and lightweight theme — all in one toolkit.

Meet Gutenix, the devoted team of developers that stands behind ZeGuten plugin and Gutenix free theme. We're inspired by WordPress, and are always looking for an opportunity to make WordPress easier for everyone.
Subscribe to get the news from Gutenix! Be the first to know of updates & discounts!
Enter a valid email!
Server error. Please, try again later!
Form was successfuly submited!
Follow Us:
Copyright © 2020 Gutenix. All Rights Reserved.