Site Builder Banners

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 a call to action.

This article is for anyone using a Site Builder compatible theme.

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:

Navigate to your desired page in Site Builder
At the bottom of the left menu, select Add section
Locate and click Banner in the dropdown menu
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)

Headings

Hero Image

Size and Alignment

Picture-in-picture

Social Links (Vision 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. 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. Recommend size for this image is 1440px x 720px (1MB)

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.

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:

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: