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 Image 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.
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.
Display Section
If you decide against using the Image Hero section, you can hide the entire section with the Show/Hide switch.
Show Overlay
If your image is bright enough that the text on your page is lost in the image, you can turn on the Overlay so it will darken the image to allow the text to be more visible.
Section Alignment
Click the Left, Center, Right icons to alter the alignment of the text and logo of the Hero section.
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.
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.
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.
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.
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.
Click on the Edit icon to change the wording of the Button and the link it will go to.
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 GiveSmart Fundraise link instead to revert to the original design.
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 picker and select the color of your choice by using the color bar and dragging the circle around the color field. There are also default colors you can select or use as a starting point. You can also type in the color's hexadecimal code. Once you've selected a color on the color picker, click apply.
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.
Click Upload to add images.
Click the Trashcan to remove an image from the carousel. You will get a warning before it deletes.
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.
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.