Event Page Banner 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 Banner provides an always visible component to your Event Page. It stays visible in either desktop or mobile view. You can use the Banner for your logo and links.

Completed Hero 1

The Banner section can include a logo, different navigation links and a primary action button (that is configured in the Hero section).

Banner Section

Display Section

If you decide against using a Banner section, you can hide the entire banner with the Show/Hide switch. When you do this, the Hero section will reach to the top of the page instead.

Note: On the mobile display, since the button that appears in the banner is controlled by the Hero section, and it shows at the bottom of the mobile display, to turn it off for mobile, you will need to disable it in the Hero section.

Logo

The logo that appears in the banner starts by bringing in the logo that is set in the Event Page's Logo & Branding section, but can be changed here by clicking on 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

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 image in the banner, 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.

Navigation Links

You can use the banner as a navigation bar by providing up to five links will show in the banner. On a smaller display, such as a mobile device, the navigation links will appear in a "hamburger" menu that can be tapped to expand and show the links.

Completed Hero 3Mobile Menu

If you do not want to use Navigation links, either just don't enter any, or use the Show/Hide switch.

When you click on the edit button below the Show/Hide switch, you can add/remove/edit/move your navigation items.

Edit Banner Links

The Display Label can be up to 12 characters long and will be the word(s) that appear in the banner.

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.

To reorder the links, click and drag the arrows icon of the item you wish to move and drop it into the correct position.

To delete a link, click the minus icon to the right of the line.

Make sure to Save the links when you're ready.

Background Color

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.

Background Color

With your Banner set up, your Event Page is now nicely framed and you can start entering the images and content in the main sections as described in the Event Page Design article.


If you will have more than 1,000 live viewers during your virtual event, please contact your Account Manager a week in advance so we can advise on the setup and preparation for your event and schedule complementary technical monitoring during your event.