Standard and Card Sliders

Building in the WCMS

Creating a Slider

Sliders are like many Visual Composer elements in that you must first create a container and then insert content elements into the container:

Creating the container (the player): Use the “Add Element” tool in Visual Composer to add a slider.  When prompted for element type, select “Slider.”  (Note that you can create a slider in a reusable visual composer module, which you can then insert into any WCMS WYSIWYG editor, such as the WordPress editor.)

  • In the Settings pop-up, select / enter options for the slider container.
  • Adding images / videos: Once you have added the slider, you can add a feature item by clicking inside the slider container in Visual Composer and then, when prompted, selecting the type of item you want to add: YouTube video or image.

To edit a feature item, hover over it and click its pencil tool.  (To edit the slider container, click the pencil tool above the container.  Note that Visual Composer has excellent on-hover tips to ensure that you’re accessing the correct content element.

Important note: Don’t forget to include a title for each image / video.  Titles are required for optimal display in mobile viewports.

Notes on Slider Settings

  • You must uncheck “Hide Title” if you want the slider title to display.
  • You can select “auto-fit” for images, but this is recommended only when there is a very small difference in image height. It’s always better to use images that are the same height.

Notes on Image / Video Settings

  • For each image / video, include a brief title.
  • For each referenced video, make certain you have a thumbnail image (preferably 800 x 500) as well as any other assets required for 508 compliance (such as a transcript file).
  • Ensure that each image has good alt text.  (See topic on basic images for tips on writing effective alt text as well as other tips and guidelines on images.)
WCMS Quick Facts

The slider is a Visual Composer element.  To insert a slider into the WordPress editor (or any WCMS WYSIWYG editor), create it in a visual composer module.

To ensure optimal display in mobile viewports, enter a title for every image / video.

Note that thumbnail sliders are created with the carousel element in the WCMS.