A hero image is a section/component that displays an image on a page on the platform. To the hero image you have the possibility to set its height and also set a title and a subheader on top of the image. You can also add a call to action button that takes the viewers to your subscriptions.

The hero image can also contain a video (without audio) and you can upload a specific image to fit on mobile devices.

Editing a hero image

Click on the section, Hero/Cover Image, to the left of the list.

Press save to see a preview of your settings to the right. This won't go live until you press "Publish"

Height:

Here you can set what height of the image you would like to have. It is written i pixels (px).

Background image:

Here you set what image you would like to display. Upload one from your computer.
Here you can also set if you would like the hero image to be an image or a video. You can also add separate version of the image to fit on mobile devices.

Overlay color

An overlay color is a color that you can have on top of the image. You can write a specific # code or you can click in the left corner of the color box to get the color picker where you can choose a color of your choice.

Title & Subheader

Here you set the title and subheader of the hero image. You can also choose to set a different title and subheader to mobile devices.
Write the text you would like to have.
You can set the title to different sizes: "Heading 1 (the biggest) to Heading 6 (the smallest).
You can change the size of the subheader in secondary text styles, where you change text-xl to text-2xl and all the way up to 9xl.

md:text-2xl is a style tag used for responsive design. The sm:, :md, :lg, :xl and :2xl can be added to all text classes to display them differently on different screen sizes.
To learn more about it you can read this article: Responsive Design

Text color

In text styles and secondary text styles you can change the text color. By default it is set to white (text-white). The text-white can be replaced to a different color. For example the platforms primary or secondary color or a color from Tailwind.
The tailwind color is added by setting the class to the name of the color and then the number of the color. For example: text-red-500.
The primary color is added by setting the class: text-primary
The secondary color is added by setting the class: text-accent
You can always set the color to be white or black: text-white or text-black.

Here you can see all colors you can use:
Tailwind color classes

Read more about primary and secondary color on the platform.

Call to action button

Press Add new button +
Set the text for the button
Set the button target which could be a link to a subpage on the platform or an external website.

For example:
Write /subscribe - to get to your subscribe page in the platform editor.
Write www.staylive.io to link the button to an external website.

Read more about how to create subpages and how to find the path of a subpage.

Logotype, bottom text or countdown

You can also upload a logotype, add a bottom text or a countdown to the hero image.

Updated on: 05/10/2023