Start a conversation

Widget: Dynamic Carousel

The Dynamic Carousel Widget allows you to build and design a Carousel of images on your website using powerful customization features. The carousel's slides could include links allowing users to be redirected to sub-pages, events, news article, and more.

Navigation
Configuring & Setting up the Dynamic Carousel Widget
Uploading Multiple Slides for the Carousel
Uploading a Single Slide to the Carousel
Delete/Remove an Image
Reorganizing/Reorder Slides 

Configuring the Dynamic Carousel Widget

1. From the Admin Dashboard, click "Website" or the globe icon on the left menu.

2. Select where you would like to add the Dynamic Carousel Widget:

  • For the Home Page - Click Home Page, hover over top of the home page and click Open.
  • For a Custom Page - Click Pages, then hover over top of the page and click Open. To create a new page click the Create New Page button.

3. From the Website Designer, click on the Content tab, then click on the arrow beside Carousels to expand the section.

4. Click-and-drag the Dynamic Carousel widget over to the website. Look for a green Drop Here box to place it in the correct area. Then let go the mouse button to drop the widget into place.

Note: The widget can be dropped above or below any existing widget on the page. A green-shaded Drop Here box will appear, displaying where the widget will drop.

5. After it is placed on the page, the Details for Dynamic Carousel page will open.

6. On the Properties for Dynamic Carousel Widget page there are three sections:

  • Carousel Properties - This allows you to enter a description of the widget.
  • Widget Properties - This provides options to customize the widget.
    • Title - The title of the widget.
    • Show Title - Hides or displays the title of the widget.
    • Carousel Animation - The type of animation displayed when the slide changes.
    • Transition Time (in seconds) - The time it takes for the slide to change.
    • Carousel Indicators Position - The position of the navigation icons.
    • Show Slide Indicators - Hides or displays the navigation icons.
    • Show Slide Navigation Arrows - Hides or displays the next and previous arrow icons.
    • Show Slide Title - Hides or displays the slide title.
    • Match Photo Sizes - Make all the Slides in the Carousel the same size
    • Carousel Zoom View - Zooms into the photo when moused over.
    • Paging Style - The style of the navigation icons.
    • Custom Pagination Color - The color of the navigation icons.
    • Custom Navigation Color - The color next and previous arrow icons.
  • Carousel Slides - This displays images in the carousel. You can add images into this section by using the buttons:

7. After you have added the slides into the carousel, you can add/change the title, description, link on the slide. This can be done by clicking Edit on the same line as the slide.

8. After you click "Edit", you will be on the Edit Slide page. There are a few options: 

  • Title - The title of the slide.
  • Description - The description of the slide.
    • Show Slide Description on the Carousel - This will show the slide's description on the carousel.
  • Carousel Link Settings
    • Label - The name of the link.
    • Link Type - Provides a list of different types of links which can be opened.
      • Custom URL - Allows you to enter any URL or website address which will redirect visitors to that site. Be sure to include the https:// in front of the website address.
      • Custom Page - This allows you to link to a custom page you have created in the past.
      • Document - Allows you to select a file for download from the Documents area.
      • Event - Displays a drop down list of Events which were created by the Organization.
      • Built-in Page: Built-in pages are system created pages that update automatically. The options you can choose are:
        • Home - The home page.
        • Bulletin List - A web page with a list of bulletins.
        • Contact Us - A web page which a visitor can email the website contact.
        • Event Calendar - A web page which displays a calendar with events on it from Events.
        • Events (Card View) - A web page which displays Events as thumbnails.
        • Events List - A web page which displays a list of Events.
        • Photo Albums - A web page that displays photo albums.
        • Search - A web page where you can perform a search for content on the website.
        • Stories - A web page that displays a list of Stories.
      • Photo Album: This activates a drop down menu, in which you may select a link to a photo album to display on the homepage menu.
      • Story - This allows you to select an existing story.
      • Forms - This allows you to select a form.
  • Button Style - Display how the button for the link appears on the slide.
  • Open Link in New Window - When checked, the link will open in a new browser tab.

9. Click the Save button to save your changes.

10. Click Go Back to return to the Website Designer.

 

Adding Multiple Slides into the Carousel

1. While on the Details page for the Dynamic Carousel Widget, scroll to the bottom of the page and click on the Upload Multiple Slides button.

Note: To get the to Details page, hover over top of the Dynamic Carousel Widget and click on the square box with the arrow icon while on the Website Designer.

2. To add slides, click the Add Files button and select the images from your device. You can also click and drag the images into the "Drag files here" area.

3. To upload the images, click the Start Upload button. Once the upload is done, click OK to return to the previous page.

 

Add a Single Slide

1. To add a single slide, click the Add Slide button on the Details page for the Dynamic Carousel Widget.

Note: To get the to Details page, hover over top of the Dynamic Carousel Widget and click on the square box with the arrow icon while on the Website Designer.

2. The Add a New Slide page will open with a few options:

  • Load from Image Library - Allows you to select an image from your device to be added into the carousel.
  • Title - The title of the slide.
  • Description - The description of the slide.
    • Show Slide Description on the Carousel - This will show the description of the slide on the carousel.
  • Carousel Link Settings
    • Label - The name of the link.
    • Link Type - This provides a list of different types of links which can be opened.
      • Custom URL - Allows you to enter any URL or website address which will redirect visitors to that site. Be sure to include the https:// in front of the website address.
      • Custom Page - This allows you to link to a custom page you have created in the past.
      • Document - Allows you to select a file for download from the Documents area.
      • Event - Displays a drop down list of Events which were created by the Organization.
      • Built-in Page: Built-in pages are system created pages that update automatically. The options you can choose are:
        • Home - The home page.
        • Bulletin List - A web page with a list of bulletins.
        • Contact Us - A web page which a visitor can email the website contact.
        • Event Calendar - A web page which displays a calendar with events on it from Events.
        • Events (Card View) - A web page which displays Events as thumbnails.
        • Events List - A web page which displays a list of Events.
        • Photo Albums - A web page that displays photo albums.
        • Search - A web page where you can perform a search for content on the website.
        • Stories - A web page that displays a list of Stories.
      • Photo Album: This activates a drop down menu, in which you may select a link to a photo album to display on the homepage menu.
      • Story - This allows you to select an existing story.
      • Forms - This allows you to select a form.
    • Button Style - Display how the button for the link appears on the slide.
    • Open Link in New Window - When checked, the link will open in a new browser tab.

3. Click the Save button to save your changes and to upload the image.

 

Delete/Remove a Slide

1. While on the Details page for the Dynamic Carousel, click Delete in the Carousel Slides section, on the same line on the slide you want to remove.

Note: To get the to Details page, hover over top of the Dynamic Carousel Widget and click on the square box with the arrow icon while on the Website Designer.

2. Click OK confirm deleting the slide from the carousel.

 

Reorganizing/Reorder Slides

1. While on the Details page for the Dynamic Carousel, in the Carousel Slides section, click and hold your mouse button on the three vertical dots on the left on the same line as the slide you want to move/reorder.

Note: To get the to Details page, hover over top of the Dynamic Carousel Widget and click on the square box with the arrow icon while on the Website Designer.

2. Drag the slide up or down to change the order of it on the carousel.

Publishing the Page

When you have finished adding the Dynamic Carousel, remember to "publish" the page when you are ready for the changes go live. This is done by clicking Publish near the top right.

Choose files or drag and drop files
  1. David H.

  2. Posted