In this article:
How to Add a Banner
A Banner will appear by default as the topmost section on your Homepage, Course Landing Pages, and Bundle 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 do this:
- From your Admin Dashboard, select Design Your Site
- In Site Pages, select a page to open in Site builder by clicking the pencil icon
- Once Site Builder has opened, at the bottom of the left menu, select Add section
- Locate and click Banner
- Adjust order and Customize as desired
- 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 Course and Bundle Landing Page Banners as well as Private Course Call to Action Banner text. This will showcase your linked pricing option. If you Provide Additional Prices For Your Course the prices will be shown in a dropdown. Note that this button will only go to your checkout if your course or bundle is published.
If you would like to remove the default, you can simply check off Hide default buttons (product pages only):
Headings
Automatically add course name and description
This setting only applies to Course and Bundle Landing Pages. When this is enabled, the Course name and description that you have included in your Course 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/cropped dependent 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.
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:
- 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?
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:
More About Site Builder
Build a Course or Bundle Landing Page