The Divi & # 39; s Person module is a great way to introduce your team. It includes a location for their name, position, social media links, description and image. This is a simple module with all the information of the person stored in the module itself. What happens if you want to add categories and select the members of the team to view based on these categories? What if you wanted to change the design of each member of the team at a time? What about layout options or a filter?
A third-party plugin for Divi called Divi Team Members does just that. It adds 6 modules to the Divi Builder with several layout options and style features and a zone to create your team members. You can place as many modules as you want and select the categories that each module will display.
Let's take a look at the members of the Divi team and see what she can do. The images in these examples came from layouts of elegant themes. I'm using a combination of squared and circled images.
- 1 Installation and activation of members of the Divi team
- 2 Menu Members of the Divi Team
- 3 Addition of a member of the team
- 4 Modules members of the Divi team
- 5 Examples of members of a Divi team
- 6 Using members of the Divi team with Extra
- 7 License and documentation of members of the Divi team
- 8 End of Thoughts
Installation and activation of members of the Divi team
Once you have downloaded and activated the Divi Team Members plugin, you will need to activate the license. In the dashboard, go to Settings> Divi Team Members and enter your API key and your e-mail address.
Menu Members of the Divi Team
A new menu is added to the dashboard called Team Members. In this menu you will find the list of team members, the area to create a new member of the team, department categories and settings.
Addition of a member of the team
Creating a team member includes a TinyMCE editor, service categories, a team member image, and information about team members. Here you can add content and create categories as with a WordPress post. Create the member of the team and click Publish.
Team members list each member of the team you have created. You can search, perform group actions, and view by category.
Department categories work the same way as normal WordPress categories. Add name, slug, parent, description, etc.
The general settings allow you to set the length of the content display, choose the archive page, set the archive layout (grid or list), choose the number of members per page, display the filter, pagination and detail.
Modules members of the Divi team
The Divi Team Members plugin adds 6 new modules to the Divi Builder:
Members of the team
Grid of the members of the team
Team Members Horizontal View
List of members of the team
Members of the Slider team
Table of the members of the team
Most modules include the same options or similar options, but display differently. Grid modules for team members and team members have 52 layout options. Other features include a category filter, categories, order, link type (including custom options), color options, social link posting, and more. The Team Members List module includes 4 layout options. The filter button has 20 different styles integrated.
The Design tab includes the text of the team name, the text of the name of the designation, the text of the name of the description, the border, the shadow of the box and the l & # 39; # 39; animation. Some modules include customizations for the text of the phone and the text of the website. They have basic customizations for fonts.
The Advanced tab includes custom CSS fields so that you can customize multiple items individually.
With 52 layout styles and 20 button styles, it clearly has enough creative options to create virtually any type of style you might want. Each of the elements is customizable. You can adjust background colors, overlay colors, text, icons, and filter buttons.
Examples of members of a Divi team
This is the Team Members module using the default settings. It actually shows all the members of my team, but only three on one line. The members of the team are presented in the form of individual cards. He zooms in on the image and shows the social links in hovering. In this example, I hover over the middle map. This is the Style1 layout. Even the default settings are elegant enough to be used as is.
Here is the Style2 layout. He adds a superposition with social links on the hover.
Style3 adds a READ MORE link on hover.
Style4 adds a layering with gradient and social icons on the hover.
Style6 adds a circular overlay with all the animated text.
Style7 introduces social icons and adds a stylized tab at the bottom.
Style8 introduces the social buttons on the right.
Style10 shows text in overlay overlay and adds social icons to the left.
Here is the Style1 layout for the Grid module of team members. It adds a filter for all categories. This is the style of filter 1.
The Team Members Horizontal View module displays all the information contained in a map. This is the Style1 layout. It is also filterable. This one uses Style2 for the filter button.
The Team Members List module moves the image out of the map and adds an excerpt of the content and a button to see more. It also includes the filter. This is the Style1 layout with Syle3 for the filter button. It was a square image that the module shows as an oval.
The Slider module of the members of the team includes navigation. It does not include layout styles and is not filterable, but all elements are customizable.
The Team Members Table module displays a table with all the information on a row. Each other line is a different color. You can customize even and odd lines individually. I hover over the bottom team member, which changes color and increases the size of the hovering image.
Here is the module of the team member using Style13 in the About the Digital Payments page of Elegant Themes. This is the default settings.
I made some changes, including colors for the background, icons, border, overlay, and name text. I put it to show 2 members of the team. The cards remain the same size as if they were showing 3. The size will change if I put it in a smaller column. If I change my style, the colors stay with that style – so I can set different colors for each style. Social icons remain the same in all styles.
This is Style15. It retains colors for social icons, but my custom colors for overlays are by default, which allows me to use a different color for each style.
Here is the Grid module of team members displaying 3 team members using Style16. I placed it in a smaller column in the section.
Here is the same module using Style17 and Random for selecting team members. I fly over the middle team member, who displays the social icons in an overlay. The colors are by default.
Here is the grid members of the team with the Style19 layout and the style of the filter button 5. I have changed the colors of the buttons and added a shadow of the background cards to match. In this example, I fly over Visual Media in the filter to display the button's animation.
This uses the Design Agency layout with the Team Members List module using the Style4 layout.
This module List of Team Members uses Style3. I've customized the background color to beat me in the design of the layout. I set it to show only one member of the team.
Here is the Tableau module of the team members in the section Our work of the layout of the design agency. I've styled the colors to blend in with the site, using white for text and yellow for all the icons.
You can adjust the font colors independently. I've added a few other team members, changed the font colors, increased the font size of the team name and changed it to Arimo (only the name has this option, and only this module), added a background for odd and even rows, and added a border with the shadow.
Using members of the Divi team with Extra
The Divi team members work well with Extra. This is the List module of team members using Style2.
License and documentation of members of the Divi team
There are three licenses to choose from:
1 site – $ 35
5 sites – $ 60
Unlimited sites – $ 80
The documentation is provided as a download file on the developer's website. It is a 15-page document with detailed information about each module.
You can see more information and buy the plugin Divi Team Members on the developer's website .
End of Thoughts
The Divi team members are easy to use and have a beautiful appearance in Divi layouts. There are so many layout styles that I did not feel the need for a lot of customization. With 52 layout styles and 20 button styles in multiple modules, I had no problem finding anything that works in my layouts. Most of the time, I just had to stylize the colors so that they fit my layout.
There were a few times that I wanted to make a bold font or make other adjustments, but I did not have a style option for that. The style features are always added, so I'm sure that will be taken into account. I hope to see some style options for images such as sizes and shapes, and more font style options. It would be nice to have a universal style that I could select rather than having to create the same color of layering when I changed my style.
If you are interested in a simple module and have many presentation options to display your team members, Divi team members can be the plugin you need.
We want to hear from you. Have you tried the Divi team members? Tell us about your experience in the comments.
Image of the star by Sentavio / shutterstock.com