Event Page Hero Section - Live Event Theme

This feature is currently in beta and is actively being tested. If you would like to include this feature in your account, talk to your Account Manager about adding it. While it is in beta, functionality may change.

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.

If your Event will have a prominent video (livestreamed or recorded), you can use the Live Event theme to display it prominently in the Hero section. The Live Event Hero section can also include elements similar to a Progress section or Fundraising Thermometer page, so your video Hero can display the amount raised, your goal and your pledged and collected donations.

The Live Event Theme provides a single screen (the Hero section) that can be used with the most important parts for a live event, so a virtual event or a virtual component to an in-person event is as meaningful as the in-person experience.

Besides the video adjusting to fill whatever screen it is shown on, the progress bar toward your goal is prominently displayed across the bottom of the video, the Donate button is always visible in the banner at the top and the Activity Wall shows donations and pledges as they are added. When a supporter first comes to the Live Event themed Event Page, they will be shown a banner across the video and disappear after a few seconds so more of the video is visible. This same banner will reappear when the video is paused.Video Hero Example

Designing the Live Event Hero section

Go into your Event Page either from the Navigation menu: Events > Event Page (if you've created it already), or by clicking the Event Page category on the left while in your activity. If you have not yet created your Event Page, click here to get started. If you have not selected the Live Event Theme, go to the Theme section and select Live event as described here.

The best way to use the features here will be to create the Event Page on your Text to Donate activity.

Live Event Hero Section

Display Section

If you decide to not use the Hero section, you can hide the entire section with the Show/Hide switch.

Depending on your design, you may want to have a "placeholder" section before your event goes live. Then, when you are actively livestreaming, you can switch that placeholder section to Hide and switch this Hero section to Show. That way your supporters will not see an error or a screen that says the video is not yet live, etc.

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.

The Live Event Theme places the Event Logo in the banner that appears when the page first loads and when the video is paused.

Placement of Hero Logo, Title and Subtitle

Select an image from your system to upload.

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

Crop Image Controls

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 an 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

Like the Hero Logo and the Subtitle, the Title appears in the banner that appears when the page first loads and when the video is paused.

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.

Subtitle

Like the Hero Logo and the Title, the Subtitle appears in the banner that appears when the page first loads and when the video is paused.

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.

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.

Video Stream

To turn off the Video Stream use the Show/Hide switch.

Click on the Edit button to add a video to stream. This can be a livestream or previously recorded video from YouTube, Vimeo or Facebook.

Copy and Paste the link from the source (YouTube, Vimeo or Facebook)

Do not use any special link from the source sites, such as embed links. 

Click Save.

The video should automatically play when the page loads.

Note: It will automatically play on the actual Event Page that you can view by clicking on Event Page in the Display Pages section below the categories along the left of the design page. The preview of the Event Page that is shown as you edit it will not play the video.

Hero Video Edit

Progress Bar

The Progress Bar appears across the bottom of the video with the amount collected and pledged in the lower left, the goal in the lower right and the bar filling the page width.

Placement of Progress Bar, Activity Wall and Action Button

You can turn off the Progress Bar with the Show/Hide switch.

Click the Edit icon to make changes.

Here, you can Show or Hide the Goal, the Total Donations and the Donor Count by turning each on or off.

You can also set your Goal here.

Make sure to click Save after making any changes.

Hero Progress Bar Edit

Activity Wall

The Activity Wall appears up the right side of the video. It can be turned on or off on the Event Page with the the icon in the lower right of the Hero section immediately below the Goal.

Show/Hide Activity Wall on the Event Page

To change what appears on the Activity Wall click the Edit icon.

You can Show/Hide the Donor Name and the Donation Amount with the Show/Hide switches.

The Show/Hide switch for Donations as the activities to display on the wall is for a future feature. Right now if you Hide the donations, you effectively turn off the Activity Wall.

Make sure to click Save after making any changes.

Hero Activity Wall Edit

Action Button

While the action button defaults to the word Donate and appears in the banner at the top of the form, so is always visible even when you scroll away from the Hero video.

The Action Button, by default, goes to the activity the Event Page is created in. Even though you can change what activity it will go to, the Progress Bar and Activity Wall will only show information from the activity the Event Page is created in, which is why it is important to create the Event Page in your Text-to-Donate activity so the correct information will be available for your Event. 

If you do not want to include the Action Button, you can use the Show/Hide switch to remove it from your Event Page.

Click the Edit icon to change the label on the button and to which form it will go.

Edit Action Button

Include in Totals

Like a Fundraising Thermometer, the Live Event Hero section is designed to be presentable for a live event, in this case something livestreamed. This means that you are expecting your supporters to be viewing the Event Page live and so they will want to see immediate responses to their texts to pledge and donate.

So, like the Fundraising Thermometer, by default, the Activity Wall will include collected donations, pledges and offline donations. You can change this in the  Include in Totals section by clicking the Edit button and turning off the Pledges and/or Offline donations.

Click Save to save any changes you make.

Edit Include in Totals

Background Color

The Background of the Sponsors section starts as dark grey (hex code #333333) for the Dark Theme and white (hex code #ffffff) with the Light Theme. 

To change the Background 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.

Sponsor Background Color Wheel