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.

Ken Clients Demo 5-clients shortcode

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

In this article

Displaying the Clients Shortcode

Now that you have added clients, you need to use the Clients Shortcode to add them onto a page or post to show on the front end of the website. Follow the steps below:

Add a new page or edit an existing page.

After adding a page, use the Visual Composer tool to add the Clients shortcode by clicking on the (+) icon, and searching for Clients.

clients shortcode

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

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

clients shortcode

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
StyleSets the style for the shortcode. Please click here to see a live demo Available options are: Carousel, Column.
How Many Columns?This option will be available if you set the style of the clients shortcode to ‘column’. Use this option to set the number of columns you want to have for your client logos.
Client Item heightThis option will be available if you set the style of the clients shortcode to ‘column’. Use this option to set the height of the client image.
CountUse this option to set the number of clients you want to show. If you want to show all available clients please set this option value to -1.

Beware! This option will be limited to the number value in Main Dashboard Menu -> Settings -> Reading -> Posts Per Page option.

Setting Description
ScrollerEnable this option if you want client images to scroll horizontally. You can also swipe to scroll between client items.
Select Specific ClientsUse this option to choose the client items you want to show on the front end of the website. To know how to add client items please read the first section of this article.

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

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 ColorUse this option to set the background color of the box containing client images.
Box Border ColorUse this option to set the border color of the box containing client images.
Box Border WidthUse this option to set the border width of the box containing client images.

Beware! This option is for the Column style and Grid style when the Scroller option is enabled.

Configuring Clients’ Images

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

Setting Description
Fit to BackgroundEnable this option to scale 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.
Hover State Company DetailsUse this option to show details about the client’s company and link to the client’s website on mouseover using the client’s image.
TargetUse this option to set how you want the client’s link to open. Available options are: Same Window, New Window

If you have any questions regarding the Clients Shortcode, feel free to contact Artbees support team.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket