Search Divi Plus Documentation

Search for answers or browse our knowledge base.

All Topics
Print

Team Grid

With the Divi Team Grid module, its become very easy & fast to display your team member’s profile on the webpage and you can add/edit team members comfortably just with few clicks.

Create team member’s custom posts

Before you add team grid on the website, first, you need to create team member’s custom posts. To do that, follow the below steps,

  1. On your WordPress Dashboard, go to the DP Team Members >> click Add New.
  2. Then, under Add New Member >> Add Title >> input team member’s name.dp-team-member-add-new-divi-team-slider
  3. After this, head over to the DP Team Members Categories block >> click Add New Team Member Category >> and create a new one. Or assign a pre-made category.
  4. Now, move to the Team Member Image block >> Set team member image.
  5. After this, go to the Team Member Meta Fields block >> and add information about the team member >> Short Description, Designation, Social Links, and Email. 
  6. Then, go to Skill >> input the skill >> then in Skill Value Between 0 to 100 >> give skill value. 
  7. Use plus (+) to add multiple skills. And minus (-) to remove any given skill.
  8. Publish.

Create team categories

To display a team grid, it’s not necessary that you create categories. However, it would help you manage your team members’ post type on a webpage preferentially. You can create team members’ categories when creating a team member, as mentioned above in step 3. Alternatively, you can create & manage the team members’ categories as follows,

  1. Go to DP Team Members >> click DP Team Member Categories.
  2. Enter the required details under the Add New Team Member Category.
  3. Once done with all the details, click the Add Team Member New Category.
  4. If you want to edit a previously created category >> click Edit under the category name.
  5. Update.
divi-team-category

How to add Team Grid module to your webpage

Once Divi Plus is activated, it adds several modules to the Divi builder. To add a module on the page, use the following steps:

  1. Create/Edit a Page/Post that uses Divi builder.
  2. Create/Edit a row.
  3. Click on Add New Module option; choose the DP Grid module.

Content Tab

Content

  1. How to choose the number of team members on the slider: Go to the Content settings >> Number of Members >> input your desired number.
  2. How to define order: Go to the Content settings >> Order >> select either DESC (Descending) / ASC (Ascending.)
  3. Select order type: Go to the Content settings >> Order by >> and select one from the options >> Date / Modified Date / Title / Slug / ID / Random / Relevance / None.
  4. Select category: Go to the Content settings, >> Select Categories >> tick the checkboxes next to the categories you want to include. If you leave all categories unchecked, then it will display team members from all the categories.

Elements

  1. To Active Filterable Team: Go to the Elements settings >> Filterable Team >> ON.
  2. Hide Designation: Go to the Elements >> Show Designation >> NO.
  3. Hide Designation: Go to the Elements >> Show Short Description  >> NO.
  4. Hide Social Icon: Go to the Elements >> Show Social Icon >> NO.
  5. Image Size: Here you can select the image size from the given option that is Thumbnail, Medium, Large, and Full.
  6. OnClick Trigger: Here you can select trigger event it can be a link or popup. trigger-event

Background

  1. How to adjust Slide Background: Go to the Background settings >> Slide Background >> and apply background customization as needed.

Design Options

  1. Layout: Here you can select the grid layout from given 4 options.
  2. Name: Apply Text Customizations for Name. 
  3. Designation Text Settings: Apply Text Customizations for Designation.
  4. Short Description Text: Apply Text Customizations for Description.
  5. Change Social Icon Sizer: Go to the Social Icons >> Icon Size >> input the value or move the slide.
  6. How to change Social Icon Color and Background Color: Go to the Social Icons >> Icon Color / Icon Background Color >> choose any color.
  7. Change Social Icon Alignment: Go to the Social Icons >> Social Icon Alignment >> select your preferred alignment position.
  8. Adds extra space to the inside of the element: Go to the Spacing >> Content Padding This setting increases the distance between the edge of the element and its inner contents.
  9. Adjust Grid Padding: Go to the Spacing>> Grid Padding >> and input the values.
  10. Apply rounded corners to the image and other customizations: Go to the Border settings >> Member Image Rounded Corners >> input the values. In this same setting, you get other options such as Border Styles, Border width & color.
  11. Shadow on the team member, member’s image & box-shadow: Go to the Box Shadow settings >> Team Member >> choose appropriate shadow & style >> Member Image Box Shadow >> choose appropriate shadow & style >> Box Shadow >> choose appropriate shadow & style.

Table of Contents