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
StyleSets the employee display style.
ColumnSets the employees column count.
Rounded Employee’s PhotoDisplays the employees’ photos with rounded corners.
CountSets the employee count.
Select Specific CategoriesSets a specific category to display.
Select Specific EmployeesSets a specific employee to display.
OffsetSets the number of employees posts to displace or pass over.
DescriptionEnables displaying the employees’ descriptions.
OrderSets the employee listing order according to the orderby value.
OrderbySets the employee listing order.
Viewport AnimationSets the viewport animation.
Extra Class NameAdds a class name to the shortcode for Custom CSS.
Employee Name ColorSets the employees’ names color.
Employee Position ColorSets the employees’ positions color.
Employee About ColorSets the employees’ about section color.
Employee Social ColorSets 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
StyleSets the employee display style. Available Options are: Classic, Boxed, Simple.
ColumnSets the employee column count.
Rounded Employee’s PhotoDisplays the employees’ photos with rounded corners.
Employee Name ColorSets the employees’ name color.
Employee Position ColorSets the employees’ position color.
Employee About ColorSets the employees’ about section color.
Employee Social ColorSets the employees’ social media icons color.
Box Background ColorSets box background color. Available if Boxed style is selected.
Box Border ColorSets 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