Grid

• Items Per Row – Set the number of items to show per row.
• Spacing – Set the amount of space between items (in pixels).
• Paging – Split the grid into pages.
• Items Per Page – Set the number of items to show per page.
• 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 grid height.
• Height Speed – Set the speed of the grid height.
• 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.

• Responsive Container – Select the container used to calculate width for the breakpoints.
  • Grid – The max width used for breakpoints will be based on the width of the grid container.
  • Browser – The max width used for breakpoints will be based on the width of the browser.
• Break Points – Add multiple breakpoints to customize grid settings for different container widths.
  • Max. Width – Set the maximum width for this breakpoint.
  • Items Per Row – Set the number of items to show per row.
  • Spacing – Set the amount of space between items.

Configure the arrow navigation settings.

• Arrows – Set the arrow navigation style.
• Arrows Visibility – Choose to display arrows only on hover or keep arrows visible at all times.
• Arrows Icon Color – Add a custom icon color to the arrows.
• Arrows Background Color – Add a custom background color to the arrows.
• Arrows Position – Set the position of the arrows.
• Arrows Padding – Add padding to the arrows container.

Configure the bullet navigation settings.

• Bullets – Set the bullet navigation style.
• Bullets Color – Add a custom color to the bullets.
• Bullets Active Color – Add a custom color to the active bullet.
• Bullets Position – Set the position of the bullets.
• Bullets Spacing – Set the amount of space between bullets (in pixels).
• Bullets Padding – Add padding to the bullets container.

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.

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.

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.

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.

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.

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.

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.

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.