Documentation

Display Types

List / Slider

Last Updated: 

Using the list display

The list display is used to show a paginated vertical list of items and also create sliders. A slider is just a paginated list display one item on each page. For general information on using displays see: https://www.metaphorcreations.com/article/ditty/general/display-panel/

General settings

The general settings panel is where you’ll set the main functionality for your list display.

General settings

  • Spacing – Set the amount of space between items (in pixels).
  • Paging – Split the list into pages.
  • Items Per Page – Set the number of items to show per page.
  • Auto Play – Automatically transition pages on a timer.
  • Pause Autoplay on Hover – Pause the autoplay on mouse over.
  • Auto Play Speed – Set the amount of delay between slides.

Transition animations

Configure page and height transitions.

  • Page Transition – Set the type of transition to use between pages.
  • Page Transition Ease – Set the easing of the transition between pages.
  • Page Transition Speed – Set the speed of the transition between pages.
  • Height Ease – Set the easing of the list height.
  • Height Speed – Set the speed of the list height.

Inital animation

Configure the initial transition on load.

  • Initial Page Transition – Set the transition for initial display.
  • Initial Page Transition Ease – Set the easing for initial display.
  • Initial Page Transition Speed – Set the transition speed for initial display.
  • Initial Height Ease – Set the height easing for initial display.
  • Initial Height Speed – Set the height speed for initial display.

Style settings

Display styles allow you to customize the look of your list as well as setting base styling for all items that will be rendered with the list.

Item styles

Set base styles for your items. Be aware that css added to you item’s layout may override the style added with the settings here.

  • Item typography – Set the base typography for all items of the display. This is applied to the .ditty-item__elements container element of each item.
  • Item Text Color – Set the base text color for all items of the display.
  • Item Link Color – Set a color for all links contained in each item.
  • Item Background Color – Add a background color for all items.
  • Item Padding – Add padding around each item.
  • Item Border Color – Set the border color for all items.
  • Item Border Style – Set the border style for all items.
  • Item Border Width – Set the border width for all items.
  • Item Border Radius – Add rounded corners to each item.

Page styles

Add styles for the page container that wraps around items for an individual page.

  • Page Background Color – Add a background color for all pages.
  • Page Padding – Add padding around each page.
  • Page Border Color – Set the border color for all pages.
  • Page Border Style – Set the border style for all pages.
  • Page Border Width – Set the border width for all pages.
  • Page Border Radius – Add rounded corners to each page.

Content styles

Add styles to the display content container.

  • Content Background Color – Add a background color to the content.
  • Content Padding – Add padding around the content.
  • Content Border Color – Set the border color for the content.
  • Content Border Style – Set the border style for the content.
  • Content Border Width – Set the border width for the content.
  • Content Border Radius – Add rounded corners to the content.

Container styles

Add styles for the outermost display container, which includes the content and Ditty title (if enabled).

  • Container Max. Width – Set a maximum width for the container.
  • Container Background Color – Add a background color for the container.
  • Container Padding – Add padding to the container.
  • Container Margin – Add margin around the container.
  • Container Border Color – Set the border color for the container.
  • Container Border Style – Set the border style for the container.
  • Container Border Width – Set the border width for the container.
  • Container Border Radius – Add rounded corners to the container.

Title settings

Display and style the title of your list.

Display

General display settings for the title

  • Display – Select how to display the title.
  • Contents size – Set the size of the contents within the title area.
  • Element horizontal position – Set the horizontal position of the element within the title area.
  • Element vertical position – Set the vertical position of the element within the title area.

Font settings

Customize font settings for the title.

  • Element – Select the HTML element to use for the title.
  • Typography – Set the title typography.
  • Text color – Set a custom font color.
  • Link color – Set a custom link color.

Title dimensions

Customize dimensions for the title.

  • Min width – Set a minimum width for the title area.
  • Max width – Set a max width for the title area.
  • Min height – Set a minimum height for the title area.
  • Max height – Set a max height for the title area.

Title styles

Customize styles for the title.

  • Background color – Add a background title to the title area.
  • Margin – Add custom margins around the title area.
  • Padding – Add custom padding around the title area.
  • Border color – Choose a color for the border.
  • Border style – A border style must be set for a border to render.
  • Border width – Set custom border widths.
  • Border radius – Choose a custom border radius.