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
FAQs
Will the audio play if I add a video to my banner?
Will the audio play if I add a video to my banner?
No, videos added to the Banner field will display visuals only, and will not include any audio. To upload a video with sound, we recommend uploading the video through the Video field. Click here to learn how to use this field.
Why doesn't my text appear correctly on mobile devices?
Why doesn't my text appear correctly on mobile devices?
If you are having issues with the mobile responsiveness of your Banner field, we have several recommendations. If you want to use a pre-designed flyer or graphic, we recommend using an Image field rather than a Banner field. Click here to learn how to add an image to your page.
If you are looking to add a picture and text, and the text is appearing incorrectly on mobile devices, we recommend adding both your image and text to the WYSIWYG portion of the Banner, rather than using the Background Image and Standard text type. Click here to learn how to use the custom WYSIWYG option.
What are the recommended image dimensions for banner images?
What are the recommended image dimensions for banner images?
We recommend using an image that is 1110 pixels wide if you are not using the full width setting. If you are using the full width setting, we recommend using an image that is 2000 pixels wide.