Skip to main content
Slider: Cards

A Smart Slider that shows cards with a background image

Updated over 7 months ago

How to use Slider: Banner

  1. Be sure you have Site Page Templates and Smart Slider Banners SPT Collection installed into your Thinkific. site

  2. On any Site Page, add the Site Page Templates section and place it as the first section

  3. Add the Slider: Banner on the page

  4. 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.

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 how fast it will move if it is set to automatically advance.

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 desktop or 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.

Did this answer your question?