Design

Editable Carousel

This widget is used to create and manage a rotating selection of images, text, and links on any page.

This widget is good for showing various items ranging from events to news and everything in between.


How do I add this widget to a page?

  1. Click Edit Page
  2. Click either + Content or the Settings icon (down-facing caret), which will be located to the right of Edit where you will need to select either Insert above or Insert below.
  3. Choose the Editable Carousel widget.
  4. Click on the green + Slide button in the upper-right hand corner, repeating until you have created all the necessary slides.
  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 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 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 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 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. The default is on but will not be active while in edit mode.
    • 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 changing to the items associated with the dot.
  6. When you are finished, click on the green Create button, and your Editable Carousel widget will show up on the page.
  7. Now click on the container you want to add items to, followed by the green + icon to add the necessary widgets. You can use the Layout widget to show multiple photos in a container (shown on top of each other) and the TEXT widget to display an image with text in a container.
  8. Make sure to click either the Publish or the Save Draft option just as you would when you're editing pages.

 



  • How do I hide/show content being shown/hidden?
    Hiding an item from being displayed by an Editable Carousel widget can be done quickly. Edit the widget and click on the switch to the right of the slide that you would like to hide, switching it to gray (hidden), and finally Update.

    To show an item that has been hidden, click on the switch to the right of the slide that you would like to show switching it to green (visible), and finally Update.
  • How do I change the order of the content shown?
    To change the order of how the Editable Carousel widget is displaying the slides. Edit the widget and click on the vertical directional arrow icon to the right of the slide you would like to move, choose either Move Up or Move Down and finally, Update when you are done.
  • How do I remove content from the widget?
    To remove an item from being displayed by the Editable Carousel widget. Edit the widget and click on the trash icon to the right of the slide you would like to remove, followed by Update.
  • How do I edit the content that doesn't show in the widget?
    To edit the content that isn't currently showing in the Editable Carousel widget. Just click on the circles below the widget or the arrows to either side of the widget (depending on the settings) to scroll through the content containers.

Note - The height of the Editable Carousel widget is dependent on the items in the containers. If you have one using a Text widget with a lot of text, the Editable Carousel widget will be taller for all of the slides. Please note that some widgets placed in the containers will automatically resize to fit while others do not. For example, the Button widget will overlay containers to the right of it.

Finallywe do not recommend placing an Editable Carousel inside another due to any unforeseen problems that may occur.