Skip to main content

Creating Sliders

Sliders are a great way to present multiple pieces of information to your users/patrons, usually with a link that directs them to a page with more information. Sliders can be added in both a large or mini format depending on the look you want to achieve and the content you wish to display.

Users with the Contributor, Editor, Moderator, or Administrator can all create new sliders; however, only users with the moderator or administrator role can publish sliders and add them to a landing page.

This article will look at how to create sliders as well as how to add them to a landing page and configure their display settings.

Creating a Slider

  1. From the Dashboard, click the Sliders tile
  2. Click + Add Slider
  3. In the window that opens, complete the fields
    1. Title, enter a title for the slider
      1. This will become the default header when adding the slider to a landing page, but may be overridden or hidden as described in the Adding Sliders to a Landing Page section below
    2. Author, the name of the person who created the slider
    3. In the slides section
      1. Body, this is a caption that can optionally be displayed on the slider (depending on the slider layout chosen)
      2. URL, enter the URL that a user will be directed to when the slide is clicked
      3. Link text, enter the text that should appear, if you wish the link to be displayed
      4. Image
        1. Click Upload/Select image, to upload a new image, or select from an already uploaded image to appear on the slide
          1. See the Recommended Image Sizes article for guidance when uploading/selecting images
      5. Publishing schedule - if applicable, enter the dates and times to schedule publish or un-publish actions; leaving these fields blank will publish the slide immediately
        1. Note: content may not become visible or hidden immediately on the scheduled publish or un-publish time; it could take up to 60 minutes for the changes to take effect. We recommend scheduling a publish or unpublish time at least 120 minutes into the future
    4. Click Add Slide to add more slides and repeat as needed
  4. Click Save

Adding a Slider to a Landing Page

Once a slider has been created, it can be added to your homepage or any other landing pages on your Stacks site. 

  1. Navigate to the page you wish to add the callout to
  2. Click the Layout tab just below the header
  3. If needed, add a new section to the landing page, otherwise go to step 4
    1. To add a new section
      1. Click + Add section
        1. A window will open with 3 layout options
          1. 1 column, the section will be the full width of the content area
          2. 2 column, the section will be split into two columns both 50% of the content area
          3. 3 column, the section will be split into three columns, with an additional option to choose between either a 33%/34%/33% split OR a 25%/50%/25% split, select the appropriate option
        2. Administrative label, once the column configuration is selected, you will have the option to add this label
          1. This will only be visible to administrators when in this layout builder view and may be helpful in identifying the type of content being added to the section, especially if you have multiple administrators who manage the site
        3. Click Add Section
  4. In the desired section, click + Add block
    1. A window will open on the right listing the content that can be added to the section
      1. Content will be organized by feature type, scroll to the Slider section or filter by the slider's title in the filter field at the top
    2. Once found, click the slider's Title
      1. A window will open displaying the current Heading
        1. By default this will be the Title value entered when the slider was created, you have 3 options
          1. Leave the heading as is, by default this will be visible to your users/patrons
          2. Change the heading name, click into the field and type in a new heading name
          3. Hide the heading, if you do not wish to show any heading, click the eyeball icon to the right
            1. The field (and helper text field below) will then be "greyed-out" and cannot be edited
        2. Helper Text, if applicable, enter a short description or instructions to provide guidance to the user/patron
          1. This will appear as an 'i' icon to the right of the heading, users/patrons can click or hover over the icon to view the helper text
        3. Subheading, if applicable, enter a value to display as a subheading
          1. Sub-Title URL, if applicable, enter the full URL to the page you wish to direct users/patrons to when they click the displayed subheading
          2. Open in new tab/window, if adding a Sub-Title URL, check this box to open that page in a new browser tab/window
        4. Layout, select the desired size/layout for the slider
          1. Large sliders offer 5 different layout options (see the image below)
          2. Mini sliders offer 7 different layout options (see the image below)
        5. Slider Settings, select the desired setting options
          1. Display Arrows, when checked, will display arrows on the left and right side of the slider for users/patrons to navigate between slides
          2. Display Indicators, when checked, will display indicator dots under the center of the slider indicating how many slides are in the slider
          3. Display Slide Captions, when checked, will display the text entered in to the Body field as a caption on the slide
            1. Note: this only applies to layouts that display text
          4. Enable Auto Play, when checked, will auto rotate between the slides at a preset interval
          5. Auto play speed (seconds), enter a numerical value to set how long each slide will be displayed before auto-transitioning to the next slide (when auto play is enabled)
          6. Enable Infinite Scroll, when checked, users/patrons can keep clicking either the left or right arrow, when the last slide is reached and the arrow is clicked again the slider will automatically start with the first slide again
          7. Enable Fade, when checked, will fade the images from one to the next when more than 1 slide is in the slider
      2. Click Add Block
  5. Scroll to the top of the page, then click Save Layout to save your changes

Large and Mini slider layouts:

sliders.png

Was this article helpful?
0 out of 0 found this helpful
Return to top