Testimonial Shortcode

Updated on September 19, 2017

The testimonial page acts as a platform to show how your current customers have benefited from your product or service. Adding testimonials to your website can be an extremely effective way to build trust and increase your company’s reputation.

To display testimonials in the Jupiter theme, you’ll need to follow two main steps: adding items to the testimonial page and adding the testimonial shortcode to a page to show the testimonial items.

To see the Testimonial shortcode in action, check out the demo page.

Testimonial Shortcode - demo


Creating Testimonial Posts

To add a new item:

1From the WordPress left menu, go to Testimonials > Add New.

2Enter a title, choose an image and fill out the necessary information.
3Click Publish.

Categorizing the Items

Categorization provides an easy way to organize the items and gives you lots of flexibility when you only need to show specific items. Configuring categories for testimonial items follows the WordPress convention.


Displaying Testimonial Posts

After adding testimonial items, you can display them on a page of your website.

To show the testimonial items:

1Add a new page or edit an existing page.

2From the Visual Composer screen, click on the + button

Testimonial Shortcode - visual composer screen

3In the Add Element pop-up screen, search for Testimonials and click on it to be added to the page.

Testimonial Shortcode - add element

4When the shortcode is added, a new pop-up screen called Testimonial Setting will open that allows you to configure the shortcode settings.

Testimonial Shortcode - Testimonial Settings

5Click on Save Changes and publish or update the page to check the result. It will shows all the available testimonial items.

Showing Specific Items

There are two settings in the testimonial settings pop-up that allow you to show the items based on specific categories or IDs: Select Specific Categories and Select Specific Testimonials.

Setting Description

Select Specific Categories Only shows items from specified categories.
Select Specific Testimonials Only shows the specified items.

Altering the Item Sorting

There are two settings in the testimonial settings pop-up that allow you to alter the items’ sorting: Order and Orderby

By default, the order and orderby settings are set to Ascending and Date therefore it sorts the older items ahead of the newer items.

Setting Description

Order Sets the ascending or descending order of the Orderby parameter.
Orderby Sorts the items based on the selected parameter (date, menu order, title, …).


Configuring the Items Layout

To change the testimonial item’s layout:

1Click on Edit Testimonials to open the Testimonial Settings pop-up.

Testimonial Shortcode - Testimonial layout

2From the Show As? setting, select one of the options: Slideshow or Column Based.

Testimonial Shortcode - column based

3Click on Save Changes.

Configuring the Slideshow Layout

There are a few settings in the testimonial settings pop-up regarding the slideshow layout.

Setting Description

Count Sets the number of visible items in the slideshow.
Animation Speed Sets the speed of the animations in milliseconds.
Slideshow Animation Sets the speed of the slideshow cycle in milliseconds.

Configuring the Column Based Layout

There are a few settings in the testimonial settings pop-up regarding the column based layout.

Setting Description

How Many Columns Sets the number of columns for the items.
Count Sets the number of visible items in each column.

Configuring the Item Design

There are two types of settings to configure the item’s design: Predefined Design and Design Properties.

Setting Description

Predefined Design The predefined design of the items.
Design Properties Settings like font weight, letter spacing, color and so on which customize the specific styling of the items.

To change the predefined design:

1Click on Edit Testimonials to open the testimonial settings pop-up.

Testimonial Shortcode - Testimonial design

2From the Style options, select one of the options: Avant Garde, Boxed, Modern, or Simple Centered

Testimonial Shortcode - choose style

3Click on Save Changes.

Customizing the Items Predefined Design

There are a few settings in the testimonial settings pop-up to customize the default styling.

Setting Description

Content Color Sets the text color for the quote.
Author Color Sets the text color for the author’s name.
Skill Color Sets the text color for the company name/job title.
Font Size Sets the text size of the quote.
Font Weight Defines the thinness or thickness of the quote text.
Font Style Sets the quote text to appear italic or normal.
Text Transform Controls the text case and capitalization of the quote text.
Letter Spacing Increases or decreases the space between the quote text characters.
Skin Sets the skin color scheme. This option is only available for the Simple Centered predefined design.

 


Adding an Entrance Animation

To make the testimonial items visible on scroll with animation, there is a setting in the testimonial settings pop-up called Viewport Animation. Using this setting is easy and straightforward but if you need a step-by-step tutorial, read the Configuring a shortcode’s entrance animation article.

Did this answer your question?