1. To access the Top Banner Editing Modal, roll your mouse over the banner area inside your Site Editor. This will reveal the section editing toolkit in the right top of the section. Click on any tool to open the editing modal.

2. This opens the section editing modal. Here you can edit every aspect of the top banner area.

Top Banner editing tabs

There are 3 tabs on the top banner editing modal: Design, Text/HTML, and Button.

DESIGN
Controls the overall design of the top banner area including background image, headline, text, button, etc.

Text/HTML
Allows you to customize the top banner area with your own headline. Advanced users can customize the top banner text area with their own HTML!

BUTTON
Controls the donation button in the top banner. This button like any button on your site will launch the Campaign Site form.

Design Controls

Background Image
Upload a top banner background image. A background image will override a background color selection.

Banner background color
Set a background color. It’s a good idea to set a background color that is close to your image or brand color. With a slow internet connection, the background color may appear quickly before an image fully loads.

Text/HTML Container Width
This is the width of the Text/HTML container. While your background image is always full width, the text headline can be sized to meet your needs. It’s generally best to use “Max Width 1170px” unless your are working working with your own custom HTML 

Text/HTML Content box width
This controls the width of the Text/HTML content. This may seem confusing, but it’s common web layout strategy. Think of it like this: The CONTENT is inside the CONTAINER. Your container can either extend full-width or max out at 1170px. Your content can then further be specified to take up a percentage of that container. This allows you an incredible amount of flexibility within your Text/HTML design and layout.

Banner display mode
This is the minimum height of your top banner. In most cases you’ll want to select, “Short (min 250px).” Keep in mind, as you enter headline text the height of your top banner will increase to contain your content.

Media vertical alignment
Control the vertical alignment of your background image. Align the background image to the top, center, or bottom of the section. Vertical and horizontal alignment settigns can be used together to keep a particular part of your image in view for different screen sizes.

Media horizontal alignment
Control the horizontal alignment of your background image. Align the background image to the left, center, or right of the section. Vertical and horizontal alignment settigns can be used together to keep a particular part of your image in view for different screen sizes.

Top padding
Add padding to the top of the Text/HTML container.

Bottom padding
Add padding to the bottom of the Text/HTML container.

Text/HTML Controls

Use the text WSYWIG Editor to style and customize your text. This works similar to formatting text in a word document. For maximum control of your design, you can access the HTML editor at the bottom left of this modal, click “HTML Editor” to switch editing modes.

Button Controls

Donation button visibility
Toggles the top banner donation button ON or OFF.

Button text
This is the top banner donation button text. Keep it short!

Autofill amount
Enter an amount here to launch the Campaign Site donation form with a pre-selected amount. NOTE: If you enter an amount here, be sure to leave the “Prefill Amount” blank on your Donation Form settings.

Custom button link
The top banner button can also be used with a custom link to a page on your Campaign Site or an external link. Insert a valid URL here to cancel out the donation form and use a link.

Background color
Customize the color of the top banner button.

Hover background color
Customize the hover color of the top banner button.

Text color
Customize the text color of the top banner button.

Shape
Customize the shape color of the top banner button: rectangle, rounded, or pill.

Style
Customize the fill style of the top banner button: solid or stroke.

Alignment
Customize the alignment of the top banner button: left, center, or right aligned.

Did this answer your question?