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 https://wiscweb.wisc.edu/page-elements/image-carousel/.
Note: This is not the same as the Hero Carousel. The Image Carousel appears in the content of your page, rather than the fixed position of the Hero Carousel at the top of the page. Instructions for the Hero Carousel can be found (link to hero carousel document).
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 should be the same size (height x width) to ensure consistent display. The maximum width x height to fill the space is 588x392.
- Images smaller than 588x392 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.
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 Imagetab 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.