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 CategoriesOnly shows items from specified categories.
Select Specific TestimonialsOnly 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

OrderSets the ascending or descending order of the Orderby parameter.
OrderbySorts 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

CountSets the number of visible items in the slideshow.
Animation SpeedSets the speed of the animations in milliseconds.
Slideshow AnimationSets 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 ColumnsSets the number of columns for the items.
CountSets 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 DesignThe predefined design of the items.
Design PropertiesSettings 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 ColorSets the text color for the quote.
Author ColorSets the text color for the author’s name.
Skill ColorSets the text color for the company name/job title.
Font SizeSets the text size of the quote.
Font WeightDefines the thinness or thickness of the quote text.
Font StyleSets the quote text to appear italic or normal.
Text TransformControls the text case and capitalization of the quote text.
Letter SpacingIncreases or decreases the space between the quote text characters.
SkinSets 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?