Employees Shortcode

Last Updated on

The employees shortcode allows you to display a list of employees with portrait photos, job titles, descriptions and social media links. Different style options are also available for the employees shortcode.

In this article, we will explain how to display and configure the employees section, as well as change the style.

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

Employees shortcode - demo

In this article


Enabling the Employees Post Type

Before starting, you’ll need to make sure that the employees post type is enabled in your theme.

To enable the employees post type:

1
From the WordPress left menu, go to Theme Options > Advanced > Post Types.
2
Enable the Employees Post Type option.
3
Click on Save Settings.

Adding Employees

You’ll need to add a new employee or edit an existing employee’s details, such as the portrait photo, job title, description or social media links.

To add a new employee:

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

Employees shortcode - add new employee

2
Fill out the fields with the necessary information and click on Publish.

To edit an existing employee:

1
From the WordPress left menu, go to Employees > All Employees.

Employees shortcode - all employees

2
Hover over an employee name and click on the Edit button.

Employees shortcode - edit employee

3
Edit the values in the fields as needed and click on Update.
x
Note: To learn more about the employees item, check out this article.

Displaying Employees

To display employees:

1
Add or edit an existing page.
2
In the Visual Composer section, click on the + button.

Employees shortcode - visual composer section

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

Employees shortcode - add element

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

Employees shortcode - Employees settings

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

Available Employees Settings

There are a few settings in employees pop-up screen regarding the employee details.

SettingDescription
Style Sets the employee display style.
Column Sets the employees column count.
Rounded Employee’s Photo Displays the employees’ photos with rounded corners.
Count Sets the employee count.
Select Specific Categories Sets a specific category to display.
Select Specific Employees Sets a specific employee to display.
Offset Sets the number of employees posts to displace or pass over.
Description Enables displaying the employees’ descriptions.
Order Sets the employee listing order according to the orderby value.
Orderby Sets the employee listing order.
Viewport Animation Sets the viewport animation.
Extra Class Name Adds a class name to the shortcode for Custom CSS.
Employee Name Color Sets the employees’ names color.
Employee Position Color Sets the employees’ positions color.
Employee About Color Sets the employees’ about section color.
Employee Social Color Sets the employees social media icons color.

 Configuring the Style

The employees shortcode has a few options that allow you to configure the style. With these options, you can configure the layout style, column and employee count, job title and description colors and many other options.

1
From the WordPress left menu, go to Pages and click on Edit for the page that includes the employees shortcode.
2
Hover over the employees shortcode and click on the Edit button.

Employees shortcode - edit employees

3
A new pop-up screen called Employees Settings will open.

Employees shortcode - Employees settings

4
There are a few options for configuring the employees shortcode in this page. Configure your shortcode settings according to your needs.
SettingDescription
Style Sets the employee display style. Available Options are: Classic, Boxed, Simple.
Column Sets the employee column count.
Rounded Employee’s Photo Displays the employees’ photos with rounded corners.
Employee Name Color Sets the employees’ name color.
Employee Position Color Sets the employees’ position color.
Employee About Color Sets the employees’ about section color.
Employee Social Color Sets the employees’ social media icons color.
Box Background Color Sets box background color. Available if Boxed style is selected.
Box Border Color Sets box border color. Available if Boxed style is selected.
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. To find out more information, read the Adding a custom CSS class to a shortcode article.

Configuring the visibility for devices

Visibility For Devices field in the setting pop-up allows you to configure the visibility of the shortcode in different devices.

You can read Configuring the visibility for devices article for further explanation.

Adding an entrance animation

Viewport Animation field in the settings pop-up allows you to hide the shortcode initially and make it visible with animation when you scroll in the browser.

You can read Configuring shortcode’s entrance animation article for further explanation.

 

5
Click on Save Changes and publish or update the page to check the result.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket