For most of the custom Showit, ProPhoto, and WordPress website design projects I worked on with my clients, there was a need to implement a responsive testimonial slider. While some required design and implementation of a simple testimonial slider other needed a few extra features or layouts.
Here is an example of a testimonial slider I did for one of my custom branding and ProPhoto WordPress website design clients.
Above is a Custom ProPhoto Testimonial Slider from Branding and Website Design Project for Andrea Cathomas Photography by the Flying Muse
I also felt the need to design some responsive testimonial sliders as an add-on to the website templates I sell here on the Flying Muse shop. I can not count how many times people who had purchased a ProPhoto WordPress website template from my collection of ProPhoto WordPress Templates asked if there is an option to add a testimonials slider to their website.
On top of this, I was considering adding a testimonial slider on my
Elementor WordPress website homepage or somewhere else on my website. So, I wanted to find a solution that will not only fit my client’s needs but one that I could use or a variation of that slider on my own Elementor website.
No matter if you’re looking to add a simple or advanced responsive testimonial slider to your WordPress, ProPhoto, or Elementor website read below for a complete and full tutorial on how to add a testimonials slider to your website, blog, or shop.
Table of Contents
- What do I need to be able to add a testimonial slider in WordPress, ProPhoto or Elementor?
- How to create and add a testimonial slider tutorial
- Smart Slider 3 Testimonial Slider Plugin Templates
What do I need to be able to add a testimonial slider in WordPress, ProPhoto or Elementor?
I searched for a WordPress testimonial slider plugin and came across the
Smart Slider 3 plugin. With the Smart Slider 3 WordPress plugin, one can create simple or more advance responsive testimonial slider layouts. The plugin comes with its own library of templates, making it easier to start creating a testimonials slider in Smart Slider 3.
If you’re using ProPhoto, the Smart Slider 3 plugin is recommended by the ProPhoto team themselves as a compatible plugin with ProPhoto 7. The process to create the slider is the same as if you were creating a testimonial slider for any other WordPress or Elementor website. However, due to the specifics of the platform adding a testimonials slider to ProPhoto is a bit different.
How to create and add a testimonial slider tutorial
1 | Install the Smart Slider 3 testimonial slider plugin in WordPress
There is a free version of the Smart Slider 3 plugin for WordPress and is available for download via the WordPress plugin repository.
To install the Smart Slider 3 plugin in WordPress simply navigate to the Plugins menu and click on Add new plugin inside your WordPress dashboard.
Simply enter the name Smart Slider 3 into the search field and install and activate it.
After you have done so, you’re ready to start creating a testimonial slider to add to your WordPress, ProPhoto, or Elementor website, blog, or shop.
2 | How to create a testimonial slider with Smart Slider 3?
Creating a testimonial slider with Smart Slider 3 WP plugin is a creative process.
Although the plugin seems intimidating and the interface may scare you off at first, it is definitely worth the effort to invest time in learning the plugin and creating a testimonial slider layout you always dreamed of having.
However, if you plan to start with any of the free templates provided with the Smart Slider 3 plugin, the complete process is not going to take too much of your time.
Only if you want to add a fully customized look, feel, and layout for a responsive testimonial slider on your website, blog, or shop it will require more effort, and will definitely take more time. However, it’s definitely worth it!
But don’t get scared!
I created the step-by-step tutorial below that I am sharing with you and am going to show you the very exact steps I did to add a testimonial slider.
If you don’t like adding a slider and customizing it from the Smart Slider library by yourself you can grab the Testimonial sliders library from the Flying Muse shop that I am currently working on. Just scroll to the very bottom of this page to find out how you can get information when the Testimonials sliders library will get available.
All, right! Let’s create the slider.
Step 1. Navigate to Smart Slider Dashboard and click on the Start New Project Button.
Step 2. Choose how you’d like to create the slider, either a custom one or to start from a template. For the purpose of this tutorial, I will be creating a slider from one of the included and free templates in Smart Slider 3.
Note: If you will use the Smart Slider Testimonial Templates I am in the process of creating that will be available via the Flying Muse shop, you will need to click on the Import your Own Files (at the very bottom of this screen). Info on when the template bundle will get available is included below.
To create a slider from the Smart Slider 3 library of templates, click on the Start with a Template option.
Step 3. Select a slider to import and customize the slides by clicking each of the slides’ thumbnails.
Step 4. After you have customized all of the slides, save your slider and go and grab the Smart Slider shortcode. You will need the shortcode to add the slider on any page of your preference, such as your homepage, services page, or other.
You can find the Smart Slider shortcode under the General tab for the slider you have customized.
Next is to add this shortcode into the position you’d like it displayed. How you add the Smart slider shortcode depends on the platform you are using for your website, blog, or shop.
Below are instructions for ProPhoto and Elementor. Just scroll to the instructions for each of these platforms.
How to add a testimonial slider in Elementor?
The Elementor PRO version (that I used to design the Flying Muse website) provides its own testimonial slider.
However, the testimonial slider that comes with Elementor PRO is a very basic one.
You can only choose from only a few very limited layouts. You are not going to be able to rearrange elements as you would like to (and with Smart Slider you can!)
For my own needs, the Elementor Pro slider is what I needed. You can check the Elementor Pro testimonial slider in action on my branding and custom website design services page.
Some will find the slider that Elementor PRO provides exactly what they need. However, sometimes the included slider is not going to fit your vision and needs. Luckily, you can design your very own with this plugin.
Now! Off to add the slider you had just created in Elementor!
Step 1. Drag and Drop the Elementor Shortcode element to an existing or new block in Elementor. The shortcode element is available in the free Elementor version, but I always recommend upgrading to Elementor PRO since it comes with upgrades and features you will most likely need in some point in time.
Step 2. Paste the Shortcode into the ” input field and click on Apply. That’s it! 🙂 You just added the Smart Slider you already created to your Elementor page.
How to add the testimonial slider in ProPhoto 7?
ProPhoto 7 is one of the most awesome platforms I worked with as a designer. One of the misconceptions about ProPhoto is that users usually think that it is only a WordPress theme, but it’s actually a lot more than that.
Even designers who work with other platforms or just plain WordPress websites believe it would be extremely easy to work with ProPhoto. But, the ProPhoto platform has its own specifics and it does take time to learn every single feature.
The process to add a testimonial slider to ProPhoto is a bit different from other platforms and specific to ProPhoto only. However, it is a very simple process that can be completed in only a few steps.
Step 1. Navigate to Appearance > Widgets and add the Smart Slider widget to the ProPhoto widgets area. From the drop-down select your slider.
Step 2. Now, navigate to the page or the layout where you’d like to display the testimonial slider in ProPhoto and Drag and Drop a widget module to a new or existing ProPhoto block.
Step 3. Click on the gear icon and select the Smart slider widget from the Widget dropdown menu in ProPhoto.
Note: Inside the customizer, you’re not going to see a preview. Just save the ProPhoto Layout and Page and the slider you just added will display on your live page and website.
Smart Slider 3 Testimonial Slider Plugin Templates
I am designing and creating a few testimonial slider templates that will be available in the following days. Below is a preview of one of the templates that will be available as part of a Testimonial slider bundle.
To get a notification when the bundle is going to be available just enter your details below. For those who subscribe to get a notification before the template bundle goes out, a little bonus is going to be available, too.
To get a notification for the template availability just fill in your information below and don’t forget to confirm your email address, too.