List Templates
dList 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 Template 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.Note: We recommend against using carousels. See the FAQs for more information. |
 |
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.Note: We recommend against using carousels. See the FAQs for more information. |
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 in the Article interface. |
| Excerpt | This will display the excerpt field in the Article interface. If there is no excerpt and the “Hide Excerpt” option isn’t checked, the list will pull in the first several hundred characters of the article.
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. |
Configuring List Templates
See a screencast of configuring list templates.
Frequently Asked Questions
Why do you recommend against carousel list templates?
Rotating or layered content such as carousels, top story rotators and sliders are often requested and seem like a good idea in theory; they showcase multiple stories in a condensed area and seem like they are visually more interesting than their static alternatives.
However, thanks to research from industry experts in usability, we now understand that in practice, the drawbacks of carousels overwhelmingly outweigh any perceived advantages.
Here are just a few of the main reasons why experts caution against rotating content:
- Rotating content has terrible click-through rates.
- Rotating content can trigger “banner blindness” because they look ad-like
- Tests show Carousels frustrate and confuse users
- Rotating content is not mobile friendly.
- Rotating content is bad for accessibility.
- Rotating content is bad for SEO
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:
- Grid List – 3x – Image (2:3), Title
- Basic List – Image (16:9, 30%), Category, Title
- Carousel – Dots/Arrows (2/1) -Image (2:3), 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.