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.
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:
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:
To edit an existing employee:
Displaying Employees
To display employees:
Available Employees Settings
There are a few settings in employees pop-up screen regarding the employee details.
| Setting | Description |
|---|---|
| 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.
| Setting | Description |
|---|---|
| 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. |
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.
