Header - Types and Setup

by Mike Dennis - Head of Implementation 22 Jul 2019

Create a great first impression with beautiful page headers. Part 1, we will cover header types and basic set up. Part 2, we will jump into the finer details of selecting the right header images. Let's do this!

Where to find your header

When editing a platform level page you will find your header within the middle white navigation.

For event specific pages you will find your header options inside the tabs.

  

Header types

There are multiple header types that you can choose from depending on the style and functionality you are after.

Platform default

The platform default header will use your default background image and settings set up within PLATFORM SET UP > DESIGN SET UP > GLOBAL HEADER. You can add content via the WYWIWYG editor. For more control over your background and content settings try a hero header.

Hero header

A hero header is the most common header used throughout most sites. It allows you to feature an image or video background with overlaid content at the top of your page. There are also settings for customising the header height, device specific content and more.


You will find the settings for your header in the following tabs.

 

  

Hero settings

Here you will set some basic settings like the height and how you’d like the content aligned.

 

Background options

Here you can upload a background image or video. Images can be automatically resized to one of the preset sizes. You can also set a colour overlay to allow any text or content to be more legible over the background.

 

Content

The content editor allows you to add any text, buttons or additional graphics you would like to appear in the header.

 

Please note: You can customise each of these steps for mobile. Allowing you to have mobile specific header heights, background images and content.

 

Slider

A slider header allows you to have multiple slides animating in sequence.

Each slide can have it’s own background image and content. 

 

User Parent’s 

If your page is parented to another this header will automatically use the header from the parent page.  This allows you to control all child page headers from the 1 parent page. 

 

Custom Code

If you want to create something completely custom this header is for you.

 

Offline event default

Available within offline events, this header will set you up a templated header that can automatically populate your events details. You can choose what details you’d like to display and also select a foreground and background image.

 

 

That gives you an overview of headers types and set up. If you’d like further help please pop in a support ticket from your Funraisin admin and our team will assist you.

Part 2: Headers - Image tips and tricks