Event Page Hero Section

This article will guide you through what you can do with this section of designing and working with the Event Page. If you are just starting in designing your event page, you will likely want to start here.

The Hero section contains a hero image (or carousel of images), prominently placed on the page. The hero image (or section) is often the first visual element seen on the page.

The Live Event Theme replaces the Hero section described below with a completely different experience designed primarily for livestreaming. It replaces the image with a video (livestream or recorded) with an overlay similar to a Progress section and more. For details about the Live Event Theme, click here.

Completed Hero 2

It provides the most important and impactful information for the page. Add image(s), a logo image, title for the Event and up to three different action buttons, such as Registration/Tickets, Donation and Event Details.

Hero Section

Display Section

If you decide against using a Hero section, you can hide the entire section with the Show/Hide switch.

You can also delete the section by clicking the Trashcan icon, if you don't ever plan to use it. If you delete it, you will be shown a confirmation box before it completes the deletion 

Delete Warning

Warning: Deleting the section is basically irrecoverable. If you don't want to use the section, it is highly recommended to use the Show/Hide switch over the Delete option, on the off chance you may want to use this section at a later time.

Section Alignment

Click the Left, Center, Right icons to alter the alignment of the text and logo of the Hero section.

Location

Event Logo

By default, the Event Logo in the Hero section is copied from the logo selected in the Logo & Branding section. If you would prefer to have a different logo, such as a unique one for your event, placing it prominently in the Hero section would be a good place to include it. You can change the logo by clicking Update.

Select an image from your system to upload.

Crop the image as needed and click Crop and Save or select Use Original.

Crop Image Hero Logo

For best results, the Logo should be at least 150px by 150px. It doesn't need to be square, though. For more information on Image Sizes, click here.

If you don't want a Event Logo image in the Hero section, you can hide it by clicking the Show/Hide switch.

It is recommended to use a logo with a transparent background so it will blend in with the rest of the page.

Title

By default, the Title will be the the special variable [event_title]. This title pulls from the campaign's Event Details. You can change the Event Title from the campaign's Event Details, as described here. Changing it through the Event Details will insure that the Title matches your various activities, such as Ticketing.

You can also edit the Title to be anything you wish and include different formatting. You can also choose other variables from the drop down list.

Hero Title Edit

Subtitle

The Subtitle is very similar to the Title. It appears above the Title and by default includes the Venue's name [event_venue] and the event's start date and time [event_start_date] @ [event_start_time], based on the campaign's Event Details as described here.

Hero Title Location

You can edit the Subtitle to be anything you wish and include different formatting, in the same way as the Title. You can also choose other variables from the drop down list.

Primary/Secondary/Supporting Action Buttons

You can include up to three different Action Buttons in the Hero section. The Primary will always be first, followed by the Secondary and then the Supporting Action Button. If any button is not used (hidden with the Show/Hide switch), the next button will shift so they maintain the design.

The Primary button differs from the other two in that it will be the Event Page Brand color and be included in the banner.

Hero Button Locations

Click on the Edit icon to change the wording of the Button and the link it will go to.

Edit Hero Buttons

Display Label

The Display label will be what appears on the Button. You have up to 20 characters for the Button text.

Link

The Link defaults to a drop down menu where you can directly add the link to any other form within the campaign to your Event Page. You can start typing the name of your form to narrow your selection.

You can also click Use an external link instead to direct your supporters to something like your homepage. If you change your mind about using an external link, you can click Use a MobileCause link instead to revert to the original design.

Note: you do need to include the http:// or https:// with external links.

Make sure to Save the Button settings when it is ready.

Background

The Background of the Hero section starts as a solid color. This can be changed to a different color or a media carousel.

Solid Color

When in Dark Theme, the Hero Solid Color is a dark grey by default (hex code #333333). In the Light theme, the Solid Color is white (hex code #ffffff). To change the Solid Color, enter a color's hexadecimal code or click on the color square and pick the color of your choice using the wheel and square.

Media Carousel

Instead, you can use one or more images for your Hero section. 

Click on the Edit icon to add or edit images for your Hero section.

Edit Media Carousel

Click Upload to add images.

Note: It is recommended that the images have a minimum size of 1024px by 800px. The carousel will only take images smaller than 5MB.
File Size

Click the Trashcan to remove an image from the carousel. You will get a warning before it deletes.

Remove Hero Image warning

Click the Upload icon (the icon next to the Trashcan with the up arrow next to it) to swap out an image.

When you have multiple images, you can click one image and drag it to change the order for the carousel.

Image Move

Note: The Captions in the Hero images are there just for reference. They do not appear on the Event Page.

Completed Hero 3

With your Hero section set up, your Event Page is starting to pull together and it is time to supplement the main content. Check the Event Page Design article for next steps.