Banners are a Site Builder section that are fully customizable, and are commonly used at the top of your landing pages as a main focal point for visitors. Banners will include a main headline and often contain a call to action.
In this article:
How to Add a Banner
A Banner will appear by default as the topmost section on your Homepage, Course, Bundle, and Community Landing Pages. However, you might like to include multiple Banners within a single page, create a Custom Page with a Banner, or maybe you deleted your Banner and would like to add a new one!
To open your banner settings from your Admin Dashboard:
- Select Design Your Site
- Click Site Pages
- Select the page you want to edit by clicking the pencil icon. This will open your Site Builder.
- At the bottom of the left menu, select Add section
- Locate and click the section called Banner ([product name])
- (Optional) Click to hold and drag the six dots beside the word Banner to adjust the location of your banner on the page
- Customize your banner by clicking on the section in the left hand menu, and adjusting the settings in each dropdown section
- Click Save to apply changes
Banner Settings
The following settings are customizable within your Banner:
Hide default buttons (product pages only)
Hide default buttons (product pages only)
This applies to the default buy Button that automatically appears on Product Landing Page Banners as well as Private Product Call to Action Banner text. This will showcase your linked pricing option. If you provide additional prices for your product, the prices will be shown in a dropdown.
Note that this button will only go to your checkout if your product is published.
If you would like to remove the default, you can simply check off Hide default buttons (product pages only):
Headings
Automatically add product name and description
This setting only applies to product landing pages. When this is enabled, the product name and description that you have included in your product settings will automatically populate.
If you would prefer to customize the text, you can simply uncheck this box and add your desired text to the Heading and Subheading.
Heading and Subheading
This is the main text that will display on your Banner and it can be customized as desired. These fields are optional, so if you prefer to only include a Heading for example, you can simply delete the text in the Subheading field.
Text color override
Your Heading and Subheading text are white by default. If you would prefer to customize this color, you can select a desired color from Text color override.
Size
This will adjust the size of your Heading text. You can slide the bar left to decrease the size and slide the bar to the right to increase the size of the text.
Hero Image
Image
This is where you can upload the background image for your Banner. Recommended size for this image is 1440px x 720px (1MB recommended, maximum 4MB.)
Focal Point
Your site is responsive, which means your banner will be sized and/or cropped, depending on the screen size it is being viewed on. Because of this, there might be specific part of the image you would like to keep visible at all times. To help out with this, we have a Focal Point picker, where you can select which part of the image you'd like to be the 'focus'. So even when your site is viewed on a smaller device, you can always display that part of the Banner image.
For example, in the image below, if I want the mason jar to show on mobile devices, I can use the Focal point picker to set the focus of the image on the 'right center' option. When we first switch to the mobile view, you can see that the mason jar is not visible, and then after setting the focal point, I can switch to mobile view and have the mason jar be visible.
Overlay Color and Opacity
Sometimes your Banner text can be hard to read based on the colors of your Hero Image. Overlay color can help mute extreme brightness contrast in your image to ensure that your text is visible. The overlay opacity can be used to increase or decrease the overlay effect as desired.
Size and Alignment
Height
You can adjust the Height of your Banner to:
- Small
- Medium
- Large
- Extra Large
Note that this is a general height range as the Banner will still be responsive according to the amount of content included in it. For example, if you have a Banner's Height set to Small, but have a lot of Heading or Subheading text, the Banner will automatically adjust larger to ensure the text will never expand beyond the edges of the image.
Alignment
This will adjust the alignment of your Heading and Subheading text. You can choose to justify/align the text in the following directions:
- Left
- Center
- Right
Picture-in-picture
This applies to Vision theme only.
Video
You can select a video that you would like displayed within your Banner. You can select a video from your Video Library or include a link to a YouTube video.
Image
This is the thumbnail image that will appear in the video block within the Banner. Recommended size for this image is 720px x 420px (1MB)
Social Links
This applies to Vision theme only.
You have the option to include up to 3 social link icons on the bottom right hand side of your Banner.
Banner Buttons
Button Blocks can be added to your Banner if you would like to add a custom Call to Action Button.
- Navigate to your desired Banner
- Under Blocks, select Add Button
- Click Button heading to open Button settings
- In the Text field, input the text you would like displayed on the Button
- Under Link select desired page or custom URL
- Under Type, select desired visual format (Primary or Secondary)
- Click Save to apply changes
Default Banner buy buttons (see Hide default buttons) will be overridden when adding a Button Block to a Course or Bundle Landing Page Banner.
Frequently Asked Questions
Why is my Banner image getting cut off?
Our Banner section in Site Builder is set to be responsive. This means the size and shape changes depending on the device the student is using to access it.
On larger screens like laptops, the Banner will appear wider. You will see more of the image width. On smaller devices like phones and tablets, the height may increase to create more real estate for text and buttons vertically, and the left/right sides will be cropped.
This is intentional to ensure that the content within your Banner is always visible and optimal on mobile devices. For example, if your Banner image was really wide and we tried to show the full width of the Banner on a small phone, that would mean we would need to drastically shrink the text and buttons which would be illegible for the student!
Because of this responsiveness, there might be specific part of the Banner image you would like to keep visible at all times. To help out with this, see Focal Point.
Can I add HTML to my Heading and Subheading fields to create personalized customizations?
Sometimes you might have custom banner changes you would like to applied and often this can be done by including some HTML in your Banner Heading and Subheading fields. We don't providing coding support, however we have some wonderful freelance web developers on our Thinkific Experts page who you can reach out to if you need. Many course creators also use upwork.com or fiverr.com for hiring developers.
If you are comfortable with adding HTML yourself, you can also check out w3schools.com for some great HTML tips!
To give you an idea of what is possible, here is a quick example of a simple HTML edit that can be applied to force a line break in your Heading text. This can be done with a break: <br>
For example, My Amazing<br>Banner would display:
