List Templates

List Templates control the layout of Lists on landing pages.  The List Templates define:

  • What information is displayed for each item, or card, in the List
  • How cards are arranged on the page

To review, edit or create List Templates, go to Lists > All List Templates.

You can also access a specific List Template on a page by opening the List object in Page Builder and clicking Edit Template.

Five Types Of Card Arrangement

Basic Lists
If chosen, the list will display each card in the list stacked vertically.
Grid Lists (Uniform)
If chosen, the list will display with each card in the List in a grid going left to right. The template settings will determine how many items are in each row. Each row will be the height of the largest object in the row.
Grid Lists (Mosaic)
If chosen, the List will display with each card in the List in a grid going left to right. The template settings will determine how many items are in each row. The rows will not be uniform in height.

This display emphasizes the images at the expense of readability. It should only be used for sections with very strong, compelling images.

Carousel Lists (Single Card)
If chosen, the List will display each card as a “slide” in a slideshow.
Carousel Lists (Multi-Card Slider)
If chosen, the List will display each card horizontally in the slideshow area. The template settings under the Carousel Options tab will determine how many items display in the slideshow at a time.

Card Design Options

The following elements can be added to each card in the List. Each element can also be reordered to determine the order elements will appear within the card.

In general, it is best to keep card designs as simple as possible in order to increase readability. Only add extra data such as author, date, etc. if there is a compelling reason for the website visitor to see that data in context of the list they are viewing.

Image
  • If the article has a featured image, the featured image will display in the card.
  • If the article does not have a featured image, it will use the first image in the article.
  • If the article has no image, the List will not display an image.
  • If there is an image, the image itself will link to the post.
Tags This will display a List of all tags defined for that article. Each tag will link to the archive page for that tag.
Categories This will display a list of all categories defined for that article. Each category will link to the archive page for that category.
Title This will display the title of the post and a link to the post.
Subtitle This will display the subtitle field from the Article interface.
Excerpt This will display the excerpt field from the Article interface. If there is no excerpt and the “Hide Excerpt” option isn’t checked, the list will pull in the first words from the article body.

It is recommended that you only use the Excerpt option if editors are writing SEO-friendly excerpts in the article interface.

Date This will display the article’s publish date. The format of the date is not currently configurable.
Author This will display the first and last name of the article’s author.

List Template Options

There are some options that are set when the Content List object is placed on the page. These options can also impact how cards display.

Grid List Number of Columns This will determine the number of items (cards) per row.
Grid List Uniform Columns If selected, each row in the grid will be the height of the largest object in the row.
Carousel List Arrows and Dots This will add the selected navigational element or elements to the carousel.
Carousel List Slideshow Speed This will determine how fast the slideshow advances to the next item. The speed is in seconds.
Carousel List Number of Cards Per Slide This will determine the number of items (cards) that appear on each slide of the carousel. On a mobile device, it will revert to a single-card slide
Images Width  This indicates the percentage of the card the image should fill.

This setting is not available for grid images.

Images Cropping If used, this forces all images in the List to be the same ratio by cropping all images from the center of the image. You will define the ratio. The standard image ratios used are: 1:1 (square), 3:2, and 16:9.

Sites are often designed to use the same ratio across the site to create a uniform look.

Images Placement If the width of the image is less than 100 percent, this setting determines whether the image appears to the left or right of the text area.
Images  Require Images If selected, this will exclude items that do not have images from appearing.

This setting is recommended for all grid lists

Images Enable Responsive Images
All Lists Hide Excerpt By default, if an excerpt has not been defined, WordPress will pull in the first couple sentences of an article to use as the excerpt.  If desired, you can set the List to not display an excerpt for an item if a specific excerpt has not been written.
All Lists Custom Class This allows you to put a CSS class on Lists to use to display custom designs.

Frequently Asked Questions

How should I name my List Template?

List Templates can be reused for multiple Lists on various pages, so it is important to give other users clues as to what the settings are in the List Template name so that they can choose the right template for their displays. Here are good examples for each kind of List Template:

  • Carousel – Dots/Arrows (2/1) -Image (2:3), Title
  • Grid List – 3x – Image (2:3), Title
  • Basic List – Image (16:9, 30%), Category, Title
  • Three-Card Carousel – Dots, Image (16:9), Title

On some devices my grid list gets a widow item/card under the row. Why?

This is often because the List Template is set to show an odd number of items. As the List collapses, the rows will begin to collapse right to left. To avoid this problem, choose an even number of items per row.

My Multi-Card Carousel Slider List does not have enough cards to fill all the slots. What will happen at the end of the List?

If the number of articles in the List is not a multiple of the number os cards per slide, the slider will show the remaining cards with a few cards from the previous slide.

I set my Carousel to show two cards per slide, but on mobile it’s only showing one. Why?

On mobile, Carousels will only display one card per slide.