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:

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

2
Enter a title, choose an image and fill out the necessary information.
3
Click Publish.
x
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:

1
Add a new page or edit an existing page.

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

Testimonial Shortcode - visual composer screen

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

Testimonial Shortcode - add element

4
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

5
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 Categories Only shows items from specified categories.
Select Specific Testimonials Only shows the specified items.

x
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
Order Sets the ascending or descending order of the Orderby parameter.
Orderby Sorts the items based on the selected parameter (date, menu order, title, …).

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

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

Testimonial Shortcode - Testimonial layout

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

Testimonial Shortcode - column based

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

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

Testimonial Shortcode - Testimonial design

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

Testimonial Shortcode - choose style

3
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 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.
x
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