WiscWeb - WordPress UW Theme - Image Carousel Page Element
This document will walk you through adding an Image Carousel to your page in the WordPress UW Theme. For an example, see the WiscWeb website.
In this document:
Purpose and use
The Image Carousel Page Element allows you to display a rotating series of pictures within your page. This is not to be confused with the Hero Carousel, which always displays at the top of a page and uses larger images. The Image Carousel Page Element can be placed anywhere on your page and can be used to break-up content and highlight different sections of your page. The Image Carousel is only available in the One Column Content Layout option. The space and images required would not translate to the smaller two and three column layouts.
- Images used should be the same size (height x width) to ensure consistent display. The maximum width x height to fill the space is 900x600 pixels.
- Images smaller than 900x600 pixels or larger dimensions that are not proportionate will automatically scale to fit the 588x392 space.
- Image heavy carousels can be slow to load on slower mobile networks, creating a poor user experience. We recommend only using them on a few, primary pages.
- Research shows carousel images beyond the first three receive very few clickthroughs. We do not recommend using a carousel with more than three images.
- Note: The Hero Carousel does not automatically rotate. This is a theme decision to address accessibility concerns that a carousel element can create.
Adding an Image Carousel
- Navigate to the page on which you want to add an Image Carousel.
- Scroll to the Primary Content Area and the Layout on which you want to add an Image Carousel.
- At the bottom of the Layout, click on Add Page Element
- On the Page Element list, click on Image Carousel
Adding Content to your Image Carousel
Once the Image Carousel is added, you will see the following options on your screen:
- Image: Click the Add Image button. You can select an image from your Media Library by navigating to the image and clicking on it and then clicking the Select button in the lower right corner. You can also add a new image from your computer by clicking on the Upload Image tab in the upper left-hand corner. In the image below, the image appears on the left (cranberries).
- Content Title: You can add text here and it will be the title for the carousel image. It appears to the right of the image, at the top of the panel. In the image below, the title appears as "Test."
- Content Panel: You can add up to 150 characters of text here to describe your image. It appears to the right of the image, below the title. In the image below, the panel appears as "test 2".
- Button Link: Adding a URL here will create a Learn More button. It appears to the right of the image, below the content panel. In the image below, it is the "Learn More" button.