Testimonial Shortcode

Last Updated on

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

In this article

Creating Testimonial Posts

To add a new item:

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

Enter a title, choose an image and fill out the necessary information.
Click Publish.
Note: The recommended image size is 250×250 pixels.

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:

Add a new page or edit an existing page.

From the Visual Composer screen, click on the + button

Testimonial Shortcode - visual composer screen

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

Testimonial Shortcode - add element

When 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

Click 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.

Note: To learn more about these two settings, read the Configuring specific items in a shortcode article.

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, …).

Note: To learn more about these two settings, read the Configuring a shortcode’s sorting settings article.

Configuring the Items Layout

To change the testimonial item’s layout:

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

Testimonial Shortcode - Testimonial layout

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

Testimonial Shortcode - column based

Click 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:

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

Testimonial Shortcode - Testimonial design

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

Testimonial Shortcode - choose style

Click 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.
Note: If you need to go beyond the default settings to customize the look and feel of the item’s design, you can add a custom CSS class in the Extra Class Name setting to be able to add specific styling to the shortcode through CSS. For more information, read the Adding a custom CSS class to a shortcode article.


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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket