Hero Block Overview

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.

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

Let's take a closer look at each component.

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

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.

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.