fbpx
wordpress-plugin-ditty-metaphor-creations

How to Create a Testimonial Slider with Ditty Images Plugin for WordPress

Download the Ditty and templates created while making this video to use on your site!
* Image items have been converted to custom urls


In this tutorial, I’ll show you how to create a testimonial slider with Ditty Images to enhance your WordPress site. I will cover everything from adding and configuring Image item types to customizing the layout and styling of your testimonial slider. Follow along with the video for complete instructions!

Step-by-Step Guide

Step 1: Install Ditty and the Ditty Images Extension

First, install and activate both Ditty and the Ditty Images plugin from your WordPress dashboard. Ditty can be found in the repository at Ditty News Ticker and Ditty Images can be purchased here.

Step 2: Add an Image Item Type

  1. Add an Image Item: Select the Image item type from the item type selector panel and click Add Image.
  2. Choose an Image: Click on the Image area in the editor and select or upload an image from your media library.
  3. Add Custom Data: Click the Add custom image data checkbox and populate the name in the title field, the user’s title in the caption, and the testimonial in the description field.
  4. Close the Edit Panel: Select Update Item Settings after filling out the data.

Step 3: Customize Layout HTML

  1. Edit the Layout: Click the layout icon for your item while on the item’s list panel. Then, click Customize to open the layout editor.
  2. Edit the HTML: Use a combination of custom HTML and dynamic layout tags to create the structure of your testimonial design.
{image width="200px" height="200px" fit="cover"}
{title}
{caption}
<hr />
{content before="&quot;" after="&quot;"}Code language: JavaScript (javascript)

For detailed information on editing a layout’s HTML, see Layout HTML Editor.

Step 4: Customize the Layout CSS

  1. Add CSS Styling: Click on the CSS tab to open the CSS editor and add CSS to style out the testimonials.
  2. Update and Close the Layout Editor Panel: Select Update Layout and then Update Item to store your layout updates.

Optionally, save the layout as a template for future use. For more information, see Saving a Layout Template.

.ditty-item__elements {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}
.ditty-item__image {
  img {
    border-radius: 50%;
    border: 10px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  }
}
.ditty-item__title {
  font-family: Lobster, serif;
  font-size: 1.6em;
  line-height: 1em;
  margin: 0;
}
.ditty-item__caption {
  font-family: Arial, sans-serif;
  font-size: 0.7em;
  font-weight: 500;
  font-style: italic;
  margin-top: -5px;
}
hr {
  width: 100px;
  border: none;
  border-top: 2px dashed rgba(255, 255, 255, 0.5);
}
.ditty-item__content {
  font-family: Arial, sans-serif;
}

For detailed information on editing a layout’s CSS, see Layout CSS Editor.

Step 5: Set Up the Slider Display

  1. Add a List Display: Click on the Display tab and select the List display type.
  2. Convert the List Display to a Slider: Set Items per page to “1” to turn the list into a single item slider.
  3. Customize Slider Styles: Set font styles, add a gradient background, and apply padding and border radius to the container.

Step 6: Adding More Testimonials

  1. Duplicate the Testimonial: Back on your Items panel, select the Duplicate icon to clone the testimonial as many times as you want.
  2. Edit Testimonials: Click on the gear icon for each new testimonial and edit the data as needed. Each testimonial will already have the customized layout applied to it!

Step 7: Save the Ditty

Make sure to give your Ditty a name and click Save Ditty once you have made all of your updates!

Step 8: Add the Testimonial Slider to Your WordPress Site

There are multiple ways to add a Ditty to your site:

Conclusion

Creating a testimonial slider with Ditty Images is straightforward and customizable. You can import and modify the provided package to fit your needs.


Download the Ditty and templates created while making this video to use on your site!
* Image items have been converted to custom urls