Create an interactive Team page Using Divi Plus Team Grid Module

Feb 1, 2024 | Divi Resources

Create an Interactive Team Page Using Divi Plus Team Grid Module

Are you looking to add a dynamic feature on your website to display team members? The Team Grid module is one of the modules available in the Divi Plus plugin. If you use the Divi theme and are looking to create a dynamic team section, this article will help. It covers creating team members based on CPT and modules available in the Divi Plus plugin and displaying them. Here are some elements you can include with each team member.

  • Name
  • Photograph
  • Designation 
  • Department
  • Contact details 
  • Skills 
  • Certifications
filterable wordpress employee directory

That’s like a small WordPress member database for an organization. We generally refer it as ‘Our team’ page. Our team page design can also simulate a team member directory.

small wordpress member directory

Requirements

The basic requirements to create an employee list on your WordPress website are

  • An active Divi theme on your website
  • Divi Plus plugin

Create an Employee List

Let’s start creating a Divi team page using the Team Grid module of the Divi Plus plugin.

1. Add Category and Team Members

This is the crucial step to creating an employee list team page. You need to Add employees as members and departments of your company as categories.

(A). First of all, add a Team member category. Click on DP Team member Categories. Insert the department name and a little description about it. Click on the Add Team Member Category button.

wordpress member directory add departments

(B). Open the Divi Plus Team Members and click on ‘Add New’. Use the h4 heading and mention the department, employee ID, hiring date, experience, and certifications. Use bold font and proper spacing between them. Also, assign a category to choose a department and choose the member image.

WordPress team page add profile details

Add the designation, contact information, skills, and social media URLs in the Team Member Meta Fields.

Create team page using Divi Plus

The next important step is to create the employee page which would be displayed from the Team page link on the main menu of your website.

2. Create a Page to Display the Employee List With a Team Grid Module

In this step, we will use the Team Grid module to create an interactive list page showcasing all the crucial information about the employees. Moreover, we will also implement the category filter option to sort the employees on the basis of their departments. Let’s see how to do that.

(A). Add a new page to display the team members of your company. Insert the Divi Plus Team Grid Module.

wordpress team page staff list pages

(B). Navigate to the Content Tab and follow the given instructions to tune up your team page to show vital information about the employees.

  • Define the number of employees or team members you want to display.
  • Select the order and order criteria in which the team members would be selected.
  • Leave all categories unchecked to display the employees from all the departments.
  • Mention All Departments in All Link text.
wordpress team directory content tab
wordpress member directory choose departments

(C). Move to the Elements Tab to use various elements of the Team Grid module.

  • Enable the Filterable Team to sort the employees on the basis of their departments.
  • Enable the Show All Link tab on the category filters.
  • Similarly enable Show Designation, Show Short Description, and Show Social Icon.
  • Choose the Image Size as Medium and Select Open Popup to display the employee details on the pop up window.
  • Choose the information you want to display in the popup.
  • Enable Pagination.
wordpress member directory element tab
wordpress member directory setting
wordpress member directory pop ups
wordpress member directory paginations

C. Switch to the Design Tab at the top and start personalizing the Divi team page as per your needs.

Choose Layout 1 and select the number of columns to display the employee grid. You can also adjust the Column Spacing to make the appearance of the list more clear.

Similarly, you can style the below elements in your custom fashion.

  • Name
  • Designation
  • Short Description
  • Social Icons
  • Filter Category 
  • Pop up text and Elements
  • Pagination 
  • And much more

Click on the Green tick button to save the personalizations.

wordpress member directory design tab
wordpress member directory style

Congratulations. You have created a fantastic team member page that can be used on your WordPress website to depict all the employee details in a single place.

wordpress team page staff list filter

Take a look on the light box that pops up to display all the mentioned details of an individual employee.

Add team member profile page lightbox

If you have a small team and want to display it on any page of your Divi website, it is possible with Divi Plus Team Slider module. There are several designs that you can use to showcase your entire team with all their details.

Add team member with Divi Plus Team Slider

Why should you create an employee team page on your WordPress website?

These are some reasons we should prefer using a team page on your WordPress website.

  • Having a staff list on your website facilitates communication between your team and clients.
  • Much simpler to update than an Excel file.
  • keeps things incredibly convenient and organized.
  • Sort the staff members according to their departments.

At last, we can conclude that a team member page is a must-include thing on your WordPress website and you can use the Team Grid module of Divi Plus to create some incredible team page designs. The endless design possibilities of this module let you fine-tune your team page the way you want.

Posted By:
Jagmohan
A curious learner who is ready to break down and simplify things to make them easily understandable to the end user. His main motive is to deliver easy-to-grab solutions in a user-friendly manner.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to Create a Member Exclusive Blog Using Divi Conditions

How to Create a Member Exclusive Blog Using Divi Conditions

If you are a content creator, you understand the importance of providing valuable information to the audience. What will you do, if you want to share your valuable content with the registered members only? In that case, you can create a member-exclusive blog with the...

Why You Should Use Prebuilt Theme for a Website | 7 Key Benefits

Why You Should Use Prebuilt Theme for a Website | 7 Key Benefits

For one who wants to build websites easily and quickly, there's always a battle of choosing to work with developers or do it on their own. One creates a loop of hundreds of email exchanges, so another saves you from it — just you and your design ideas.  But how...

Divi Agency Child Theme to Present Your Enterprise

Divi Agency Child Theme to Present Your Enterprise

When you are using Divi to create your agency website on WordPress, you need a Divi agency child theme. This is a perfect solution with 5 modern Divi agency layouts to introduce your services, portfolio, contact, and other essential things about your company. Display...

Divi WooCommerce Extended

Popular on Divi Extended

Divi Plus WooCommerce Extended Divi Layouts Extended Divi Header Layouts