Skip to main content
All CollectionsBuild +Design Your Donation PageFields
Customize the Banner Field with Images, Video and Effects
Customize the Banner Field with Images, Video and Effects

Make your page look amazing by adding a large graphic or video with text overlay and gradients

Maddy avatar
Written by Maddy
Updated over a month ago

The Banner field is where you can upload a large image or video and include text overlay, color gradients and more. This is commonly used towards the top of pages to beautifully feature a video or image, the name of your organization or cause, and additional details.

Learn how to upload your image or video and apply your desired effects below.

Jump To...

Add a Banner Field

  • From the Pages screen, click the pencil icon on the page you want to edit

  • Scroll to find the faintly dotted line, just above the donation section

  • Hover your mouse over that line and click the green + icon

  • Select the Banner field

Pro Tip: Users can also add a Banner to the donation section of the page, although this is less common.


Customize Your Banner

  • Background Type: Select the background type you would like to add to your banner

    • Image: Click Choose Image to select your banner image. Choose to Upload your own image or a previously uploaded image, use one of our photos, or browse patterns & textures.

    • Color: Click the color circle and select the desired color, or manually add a color hex you would like. Make the color more or less opaque by adjusting the opacity slider under the color slider

    • Video: Paste your video URL into the text field

    • Transparent: Add a transparent banner where you can highlight the background and add custom text

  • Add Effect (available with an image and video background): Add a blur, grayscale, sepia, saturation, or brightness effect to your image or video. Move the slider to adjust the intensity of the effect

  • Color Overlay (available with an image and video background): Toggle On if you would like to overlay your image or video with a color. When this option is turned on, click the color circle and select the desired color, or manually add a color hex you would like. Make the color more or less opaque by adjusting the opacity slider under the color slider

  • Position (available with an image background): Select where you would like the image to be positioned in the banner

  • Width: Check the checkbox to make the background extend to the full width of the page

  • Minimum Height: Adjust the slider to set the minimum height of the banner

  • Mobile Settings: Toggle on Mobile Settings if you would like to banner to be more mobile compatible. If this option is selected, set the minimum height of the banner on mobile


Add Text to Your Banner

Standard Option

  • Text Type: Click Standard

  • Text Alignment: Set your text to align to the left, the center, or the right on the banner

  • Add any text to the banner. Users can customize the font, font size, the font color, and font styling (bold or italics)

  • Click Add Text to add additional text

  • Click Make Text Full Width to make the text extend to the full width of the banner

Custom WYSIWYG Option

  • Text Type: Click Custom WYSIWYG

  • Add your text. Format the text using the menu bar options

  • Click Make Text Full Width to make the text extend to the full width of the banner

Did this answer your question?