Hero Block Overview

The main features of the Hero block.

The "Hero" area is a large area at the top of the page (usually full width) that is supposed to give the user a general idea of what the website is about. If you are offering a certain product, the Hero are is usually the place where you put the value proposition of your product, summarizing what problems the product solves, what value it delivers to its customers, how it differentiates itself as the preferred provider of this value, and so on.

Hero areas often contain images, videos, dynamic text, etc. Softr offers a variety of layouts for the Hero block to choose from. In this section, we'll review all the layouts to give you a better understanding of how they can be configured and applied.

First, let's examine the features that all or most of the layouts have in common. Afterwards, we'll investigate the specifics of each layout one by one.

Hero block structure
Hero block structure

As you can see in the above image, the Hero block usually has the following components:

  • Title
  • Subtitle
  • Image/Video
  • Buttons

Let's take a closer look at each component.

Title and Subtitle

The Title and Subtitle are simple text areas where you can add main and secondary text.

Title and Subtitle
Title and Subtitle


Next, you can add a an image or a video to accompany the text. Below the image/video field there is an option to switch the image position as well as an option to upload a background image for the whole Hero area.

Adding an image to the Hero block
Adding an image to the Hero block


Lastly, you have the Button element, which is a regular button with Open page, Scroll to section, and Open external url actions. You can also add more buttons with Add button below.

Button actions
Button actions
Did this answer your question?

Last updated on January 4, 2023