Documentation - Hero Module

Documentation - Hero Module

Examples of Hero Module configurations and layouts

-

REQUIREMENTS

Before creating this module it is important to make sure you have everything you need:

  1. UTM DATASET: If you will include a CTA, you must first create a Utm Dataset to reference it in the corresponding field. Please follow [this link] to find more info about how to create it.

  2. COUNTDOWN: If the content of this module is going to change depending on a countdown you must first create it. In [this link] you can find more information about how to do it.

-

COMPONENTS

In this module you can add several components, as many as you want. You can see the following:

CITY NAME

Normally used to add the city of the event.

-

TITLE, SUBTITLE & DESCRIPTION

The title, subtitle and description of the event in Sales.

-

CTA

Here we edit the CTA, we can choose to go to a city selector, to go to the Plan ID or to go to an External Link. Although it is optional, it is advisable to add the UTM Dataset.

[See more info about how to configure an UTM Dataset here].

-

COUNTDOWN

Here we add the contents of TITLE, SUBTITLE, DESCRIPTION and CTA of the event in "Waitlist".

To make this info visible instead of the "Sales" one, you must configure a Countdown and link it in the REFERENCED COUNTDOWN field.

[See more info about how to configure a Countdown here].

-

ICONS

Here we add the images and text of the icons already known in the hero.

-

MULTIPLE CTA

This block is important to use when you want more than one CTA together in the hero. For example, we usually use this when an event is closed and we want to add a button to the CIty selector and another one to another city of the event.

-

PARTNERS

Very similar to the icons, but in this case if we want to add a partner to the Hero.

-

FEVER POWERED

Add the image.

LAYOUT

In the Layout of this module you can edit:

  • IMAGE or VIDEO: Choose to add an Image or a Video. You can only choose one.

  • HERO HEIGHT: Choose the height of the hero if 100% or 90%.

  • STYLE: where you can select:

    • Full 100% (text centered): the image/video occupies the total of the screen behind the text.
    • Half 50% (text left): the image/video occupies the right half of the screen and the text the left half of the screen.
    • Half 50% (text right): same configuration as above but in this one the text goes to the right and the image to the left.

.

Find below the examples of all variations of the Hero Module:

Full width image layout

In this layout we can add a full-width image as background. The content and information will be centered.
Lorem ipsum dolor sit

Madrid

Countdown Lorem ipsum dolor sit amet

Countdown Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Tickets on sale on Month DD at HH:MM

4 Days
0 Hours
57 Min
20 Sec
Join the waitlist!
Powered by Fever
Icono 360º PROJECTIONS 360º PROJECTIONS Icono +1000m2 SCREENS +1,000m2 SCREENS Icono High Quality High Quality

Half image right

In this layout we can add a module with a layout divided in two, on the right you can add the image and on the left we will have all the content and information.
Lorem ipsum dolor sit

Madrid

Countdown Lorem ipsum dolor sit amet

Countdown Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Tickets on sale on Month DD at HH:MM

4 Days
0 Hours
57 Min
20 Sec
Join the waitlist!
Powered by Fever
Icono 360º PROJECTIONS 360º PROJECTIONS Icono +1000m2 SCREENS +1,000m2 SCREENS Icono High Quality High Quality

Half image left

In this layout we can add a module with a layout divided in two, on the left you can add the image and on the right we will have all the content and information.
Lorem ipsum dolor sit

Madrid

Countdown Lorem ipsum dolor sit amet

Countdown Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Tickets on sale on Month DD at HH:MM

4 Days
0 Hours
57 Min
20 Sec
Join the waitlist!
Powered by Fever
Icono 360º PROJECTIONS 360º PROJECTIONS Icono +1000m2 SCREENS +1,000m2 SCREENS Icono High Quality High Quality

video-full-width

In this layout we can add a full-width video as background. The content and information will be centered.
poster

Madrid

Countdown Lorem ipsum dolor sit amet

Countdown Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Entradas a la venta el DD de Mes a las HH:MM

4 Days
0 Hours
57 Min
20 Sec
Lista de espera
Powered by Fever
icon 360º PROJECTIONS 360º PROJECTIONS icon +1,000m2 SCREENS +1,000m2 SCREENS icon High Quality High Quality

Half video right

In this layout we can add a module with a layout divided in two, on the right you can add the video and on the left we will have all the content and information.
poster

Madrid

Countdown Lorem ipsum dolor sit amet

Countdown Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Entradas a la venta el DD de Mes a las HH:MM

4 Days
0 Hours
57 Min
20 Sec
Lista de espera
Powered by Fever
icon 360º PROJECTIONS 360º PROJECTIONS icon +1,000m2 SCREENS +1,000m2 SCREENS icon High Quality High Quality

Half video left

In this layout we can add a module with a layout divided in two, on the left you can add the video, and on the right we will have all the content and information.
poster

Madrid

Countdown Lorem ipsum dolor sit amet

Countdown Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Entradas a la venta el DD de Mes a las HH:MM

4 Days
0 Hours
57 Min
20 Sec
Lista de espera
Powered by Fever
icon 360º PROJECTIONS 360º PROJECTIONS icon +1,000m2 SCREENS +1,000m2 SCREENS icon High Quality High Quality