Using Your Website’s Homepage Carousel


The image carousel (also referred to as a slider), located on your website's homepage, is an area in which multiple images can be placed to help your parish highlight some of its website content visually. Using a combination of images and text, it is easy to highlight an image from a newly created photo gallery, an image from an article about a previous or upcoming event, or an image to draw your visitors to another website. Here we have some tips for how to maintain your image carousel. The homepage carousel is powered by the FlexSlider snippet. In this article we will review how to use your homepage carousel by adding and deleting slides, and changing the order of your slides.


Elements of your slide

  1. Image: Should be clear, eye-catching, and a maximum of 1500 x774 pixels and a minimum of 1200 x 630 pixels. 
  2. Caption Title: Should be simple, descriptive, and interesting for your visitors (e.g. "Parish Festival Kicks Off This Weekend!")
  3. Caption Text: Should be concise and complementary to your title (e.g. "Food, music, dancing, games for kids, and church tours are part of the festival. Free admission! Parking shuttle available.")
  4. Link Title: Should be an action for your visitors to move into the website to learn more (e.g. "Join Us This Weekend")
  5. Link: A link to the content you would like to feature. Can be an internal link to a page within your parish website or an external link to another website.


Adding a new slide

Each slide in your homepage carousel must include an image. You may either create a graphic with overlaid text using photo editing software or just crop a photograph or graphic to the proper size and customize the carousel to overlay text for you. If the graphic you are posting has text already on it there is no need to overlay text through the carousel. Learn more about images for your homepage carousel.

  1. Edit your website's homepage resource.
  2. Scroll down the page to the Multimedia section which contains the Page Carousel block. 
  3. Click the green plus button located on the top right-hand edge of the top slide. This will drop a blank slide below the top slide.  
  4. To add an image to the slide, click the Insert button. In the file window provided, select the folder in the file list where you are storing the images for your carousel slides. Click the plus button [+] below the desired image to insert it into the slide. This will close the file window and return you to the main screen. 
  5. If you have a photo or graphic on your computer that has been prepared for your carousel and needs to be uploaded, click the green Upload button at the top of the window and select the file to upload. Find your uploaded image and click the plus button [+] below the image to insert it into the slide. This will close the file window and return you to the main screen.  
  6. If applicable, add the appropriate caption title, caption text, link title, and link. 
  7. Click the Save + Continue editing button at the top of the page to commit your changes to the site. 


Changing the order of your slides

  1. You may change the order of your slides by moving your mouse pointer to slide you would like to move. Press, and hold down, the button on the mouse to "grab" the slide. "Drag" the slide to the desired location by moving the pointer. "Drop" the object by releasing the button.
  2. The slide located at the top of the list will appear first in the rotation followed by the others.


Deleting a Slide 

  1. Click the red minus button located on the top right-hand edge of the top slide. This will immediately delete your slide. 


Homepage Carousel Best Practices

Now that you have been introduced to the homepage carousel, check out our article for Best Practices for Maintaining Your Homepage Carousel.