ZeGuten — a collection of blocks for Gutenberg Get for $15.00

How to build a Hero section WordPress block with Gutenberg


SEO copywriter at Gutenix Team

How to work with WordPress customizer and Reusable blocks
Prew post
  • Feb 17, 2020
  • 3 min read
  • 458

How to build a Hero section WordPress block with Gutenberg

In this quick and simple tutorial, we will figure out how to build a Hero section WordPress block, and also how to customize it.

First things first, let’s dive into the main idea of the “welcome” 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.

Watch this video to get some ideas on how to style your block.

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

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

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.

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!

Hero block with gradient background

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

As a next step, 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.

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

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

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.

Hero block with 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.

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

How to do the block recovery in Gutenberg
Next post
How to work with WordPress customizer and Reusable blocks
Prew post
How to do the block recovery in Gutenberg
Next post
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 a on opportunity to make work with it easier for everyone.
Give us a Call: +1.347.342.0463
Email: [email protected]
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.