Clients Shortcode

Last Updated on

The clients shortcode allows you to show your clients’ logos to give the potential clients an instant view of your work history.

In this article you’ll find an instructions on how to add a client item, add the clients shortcode to a page, and configure the shortcode settings.

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

Clients shortcode - demo

In this article

Adding a Client Item

To add a client item in Jupiter you’ll need to follow the steps below:

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

Clients shortcode - Add new

Add a new title and set a featured image for the client.

Clients shortcode - featured image

 Click on the Publish button to save your client‘s logo. You’ll need to repeat the steps above to add other items.

Displaying the Clients Shortcode

To add the Clients shortcode to a page or post, follow the steps below:

Add a new page or edit an existing page.
From the Visual Composer screen, click on the + button.

Clients shortcode - Visual Composer screen

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

Clients shortcode - Add element

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

Clients shortcode - Clients settings

Click on Save Changes and publish or update the page to check the result.

Configuring the Clients Shortcode Settings

There are a few general settings in the clients settings pop-up that allow you to select the shortcode style, set the title and number of client items, and more. These and other options are described below:

Setting Description
Style Sets the style for the shortcode. Please click here to see a live demo for each style. Available options are: Carousel, Column.
Heading Title Sets the title of the shortcode. This will work for all items and will be positioned at the top of the shortcode.
Count Sets the number of the client items to be shown in the shortcode.
Select Specific Clients Sets the specific client items to show in the shortcode. Start typing the post ID or post title to select.
Autoplay? Gives the clients shortcode autoplay functionality when it is in Carousel mode. The timespan between each carousel animation cannot be changed.
Target Sets the option for how the client link should be opened: in the same window or a new window.

Altering the Posts Sorting

There are two settings in the client settings pop-up that allow you to alter the post sorting. By default, the Order and Orderby settings are set to Ascending and Date therefore it sorts the older posts ahead of the newer posts.

Order  Sets the ascending or descending order of the Orderby parameter.
Orderby  Sorts the posts based on the selected parameter (date, menu order, title, …).
Note: To learn more about these settings, read the Configuring a shortcode’s sorting settings article.

Adding an Extra Class Name

The Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.

You can read the Adding a custom CSS class to a shortcode article for further explanation.

Configuring the Clients Shortcode Styling

The clients shortcode has a few options that allow you to configure the shortcode style. With these options, you can configure the layout style, box colors, logos height and more.

Configuring the Colors

There are three options in the clients shortcode that allow you to set the background and border colors. Their settings are:

Setting Description
Box Background Color Sets the background color of the box containing the client images.
Box Hover Background Color Sets the background color of the client box while the mouse is hovering over it, using the pop up color chooser.
Box Border Color Sets the border color of the box containing client images.

Configuring Clients’ Images

There are two settings that allow you to configure client images. Below you’ll find their descriptions:

Setting Description
Fit To Background Scales the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.
Logos Height Sets the height of client images.

Configuring the Spacing

If you want to add some space under the shortcode, you’ll need to use the Margin Bottom option.

Setting Description
Margin Bottom Sets a margin spacing at the bottom of the shortcode. The default value for this option is 20 pixels.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket