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.
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.
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.
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.
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.
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.
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.