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 |
|
| 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.
