How to use Slider: Banner
Be sure you have Site Page Templates and Smart Slider Banners SPT Collection installed into your Thinkific. site
On any Site Page, add the Site Page Templates section and place it as the first section
Add the Slider: Banner on the page
Update the slides to be shown on the slider and other slider settings below
Slide Settings
Each slider will contain a set of slides. Each slide is added using the Blocks. Each slide will have it's own set of settings that control it's content as well as if the slide will be shown to the user if you decide to use the "Smart Settings" feature.
Image
This setting controls the image that will be used for the background. The image will be cropped, so do not include any text inside the image and be careful where people are placed in the image. The cropping will be different depending on if the device is desktop or mobile as well as the size of a desktop browser. It is recommended that the size be at least 1920x1080. Also be sure the image is not large MB-wise. Use Squoosh.app to optimize the size of the images.
External hosted image url
When using slider effects that have a ** next to it, you will need to provide an image url for each slide. This is due to a technical limitation from the standard Thinkific image hosting provider. The good news it is easy to do using postimages.org. See how to do this below.
Overlay Type
These settings control the type of overlay and color that is used on top of the image. This setting is important to make sure your text stands out.
Overlay type:
None - use this only if you already applied an overlay in your image editing software
Gradient - this will have a solid to transparent gradient (bottom to top) so your text stands out but does not cover the image completely
Color - this will apply a consistant color on top of the entire image. Use the Overlay opacity setting to control how transparent the overlay is
Heading & Subheading
Put in the text that you will be using for the slide. Also choose the color you wish to use for each item. The size of the headings are controlled in the Slider Heading settings group (described below)
Buttons
Each slide can have up to two buttons to provide call to action links or to trigger a Site Page Template popup. You can also choose between the standard button styles or use a custom SPT button style if you have the Buttons SPT collection installed.
Access Control
Each slide can be "Smart" and only be shown to certain people based on the Access Control settings. These settings are similar to the settings that all Site Page Templates sections have.
Slider Settings
Slider Behavior
This setting group will control if the slider will automatically advance and the direction that the slides will transition
Slider Style
This setting group controls how the slider looks
Slider Width
Full : The slide will fill the browser window edge to edge
Container : The slide will fill the width of the SPT content container
Content height: controls how tall the slide appears
Content width: this controls how wide the text will go within the slide. On mobile the text will always try to fill 100% of the width
Content padding: this will control how much padding the content will have around all sides. When using a Full width option, this setting is ignored because the text will be placed within the content contrainer.
Corner Roundness: this controls how round the corners will be. Slide to the right to make it more round.
Margins: this controls how much space is above and below the slider.. Drag to the right to increase space.
Show slider arrows on mobile: Check this box if you wish to show the slider navigation arrows on mobile devices.
Arrow colors: the color of the navigation arrow.
Slider Headings
This setting group controls how large the fonts are for the heading and the subheading of the slides.
Slider Effects
This setting group controls the transition effect for the slides.
NOTE: When using effects that have a ** next to it, you will need to provide an image url for each slide. This is due to a technical limitation from the standard Thinkific image hosting provider. The good news it is easy to do using postimages.org. See how to do this below.
How to get an external url for an image
Open your browser to https://postimages.org/
Make sure Do Not Resize My Image is selected
Click the Choose images button and then select your image
After a few second you should see the page below. Click on the copy to clipboard icon on the Direct Link option.
Paste that link into the slide setting
