Design

Carousel

Used to create and manage a rotating selection of images, text, and links on any page.

This widget is good for calling attention to events and other items across your site.

 

How do I add this widget to a page?

  1. Click Edit Page
  2. Click either + Content or the Settings icon (down-facing arrow) which will be located to the right of Edit where you will need to select either Insert before or Insert after
  3. Choose the Carousel  widget
  4. Click on the green + Slide button in the upper-right hand corner and enter the Heading and an image that you would like to be displayed. Additional fields that can be filled out include;
    • Teaser Text - Enter the additional text you would like to display with the item.
    • Link Target - When enabled, the link for the button will open in a new window.
  5. Additional fields can be found in the Settings tab, changing these is optional and not necessary for the function of the widget. But they will allow you to customize the widget to your liking. The fields and their descriptions are listed below;
    • List Heading - Enter the title of the list. If nothing is entered a heading will not be displayed.
    • Heading Size - You can choose the size of the heading, if one is entered. The available options for sizes range from H1 through H3.
    • Description - Enter a short description of the list. If nothing is entered no description will be displayed.
    • Title Sizes - Choose the size of titles, sizes range from H1 through H6.
    • Auto Width - If the items displayed in the widget need to have a  consistent width on all devices. Flip the switch to on by default it is off.
      • Items Displayed (Mobile) - Control the number of items to be displayed on screen for small devices (i.e. mobile phone). This value has no effect when "Auto Width" is enabled.
      • Items Displayed (Tablet) - Control the number of items to be displayed on screen for medium devices (i.e. tablet). This value has no effect when "Auto Width" is enabled.
      • Items Displayed (Desktop) - Control the number of items to be displayed on screen for large devices (i.e. desktop, a standard monitor). This value has no effect when "Auto Width" is enabled.
      • Items Displayed (Large Desktop) - Control the number of items to be displayed on screen for large devices (i.e. desktop, a standard monitor). This value has no effect when "Auto Width" is enabled.
    • Spacing - This field lets you control the margin (pixels) between each item.
    • Autoplay - Should the carousel automatically play.
    • Loop - By default, the carousel will loop but it can be turned off here.
    • Speed- You can customize the speed of the carousel by entering a number (in milliseconds) here.
    • Navigation - By switching this to on, arrows will be displayed on either side of the widget allowing a visitor to manually navigate through the slides.
    • Dots - Similar to the navigation arrow, dots are displayed at the bottom of the widget. They allow a visitor to navigate through the carousel by shifting to the item associated with the dot.
  6. When you are finished, click on the green Create button and your Carousel widget will show up on the page.
  7. Make sure to click either the Publish or the Save Draft option just as you would when you're editing pages.