CivicTheme
Search
K
Comment on page

Slider

Summary

The Slider component allows you to add a 'slider' where users can move through multiple full-width 'cards' that include images.
This section shows you how to add the Slider component.
Below is an example of the Slider component.

How to add a Slider

Step 1: Go to the page you'd like to add the Quote to (or create a new page) and in the Content tab, Components section, select Quote from the dropdown list.
Step 2: Fill in the fields as per below.
  1. 1.
    Title - Type in the title for your 'slideshow'.
  2. 2.
    Slides - Use the dropdown here to add slides. You can either add slides manually (Add Slider slide) or using automation (Add Slider reference slide).
  3. 3.
    Background - Check this box to apply a background colour.
  4. 4.
    Theme - Choose the light or dark theme.
  5. 5.
    Vertical spacing - Add vertical spacing on the component (above, below or above AND below).
Step 3: Fill in the information for each slide - see below.
  1. 1.
    Title - Add the title for this slide.
  2. 2.
    Image - Add an image for the slide.
  3. 3.
    Image position - Choose left or right for the image position.
  4. 4.
    Date - Add a date (if desired).
  5. 5.
    Content - Add some content about the slide.
  6. 6.
    Links - Add any links you'd like to include in the content section of the slide (these are displayed as buttons).
  7. 7.
    Add another (link) - Add extra links if desired.
  8. 8.
    Topics - Add in topics if you'd like the slider to include a topic tag.
  9. 9.
    Add another (topic) - Add extra topics if desired.
  10. 10.
    Theme - Select the light or dark theme.
  11. 11.
    Add Slider slide - Add more slides.

Slider reference slides

You can also add 'Slider reference slides'. These slides pull content automatically from an existing page.
Below is a screenshot of the fields for the Slider reference slides.
  1. 1.
    Reference - Start typing the page title of the page you'd like to reference, and then select the page/content.
  2. 2.
    Link text - Add in link text, if desired.
  3. 3.
    Image position - Select right or left for the image. Note: This brings in the xxx image from the page you're linking to.
  4. 4.
    Theme - Select light or dark theme.
Last modified 8mo ago