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.
Adding a Client Item
To add a client item in Jupiter you’ll need to follow the steps below:
Displaying the Clients Shortcode
To add the Clients shortcode to a page or post, follow the steps below:
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.
| Setting | Description |
|---|---|
| Order | Sets the ascending or descending order of the Orderby parameter. |
| Orderby | Sorts the posts based on the selected parameter (date, menu order, title, …). |
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. |
