How To Add A Banner Image To Your Page

On some page templates a banner image already has been added, such as ‘Donation Page - Informative’. In this case you just need to select the banner image and select/upload the banner image you wish to use. 

For templates that don’t have a banner image already inbuilt into the page but you wish to add one all you need to do is:

1. Open the page editor on the page you wish to edit.
2. Scroll down to the bottom of the page and click ‘Add Section’ 

3. Next, move the section up the page until it is at the top of the page or in the spot you wish to have it. Do this by clicking on the up arrow on the section quick actions. 

4. After this, click the ‘Elements’ tab on the left hand side.
5. Find the image element and drag and drop this element into your new section. 

6. Select or upload the banner image you wish to use. 

7. While the image element is still selected, click the ‘Column’ button from the breadcrumbs at the bottom of the editor. This will bring up the column settings where you will just need to set the vertical and horizontal padding to 0. This will help ensure your image extends the full width of the page. 

8. Repeat this process again for the section. While the column is still selected, click on the ‘Section’ button from the breadcrumbs at the bottom of the editor. This will bring up the section settings where you will just need to set the vertical and horizontal padding to 0. This will help ensure your image extends the full width of the page. 

9. Change the 'Content Maximum Width' settings on the section to 4000px so that on even on the largest screen sizes your banner is still full width. 

10. Move the donation form to where you would like it on the page by dragging and dropping this where you would like.

11. Move any other elements you would like to keep and then delete the template section by clicking the delete icon from the quick actions button

12. And now you have a banner image on your page in replacement of a background section. Click save to ensure your changes are saved.

Please remember to check this banner image on mobile to ensure it isn't too small for mobile. If it is we recommend you add a mobile image that is better dimensions for mobile and hide your desktop banner image. This won't affect your desktop design. 

Related Articles:

• How To Hide Desktop Elements On Mobile
• How To Add Mobile Specific Elements