How to Create a Team Members Page - P1 - Using Meta Box and Elementor
Tags: member, page, metabox, tutorial
Published: 2022-05-24 01:46:29



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5f0wmsns5z6x4uplh8g.jpg)There are many ways to create a Team Members Page. With custom fields and Meta Box, you can choose to use cloneable fields or custom post types.

If you are looking for ways with cloneable fields, it’s the same as the method we used in the series on creating <a href="https://metabox.io/series/display-images-from-cloneable-fields/">brand logos for partners</a>. Just follow it.

We’re having this series of tutorials on using custom post types and using different page builders. Let’s follow us and see how!

<!--more-->

In the first one, we’re going to do it using Meta Box and Elementor. And, this is a sample we’ll use for this practice:

<img class="aligncenter" src="https://i.imgur.com/FjOklKG.png" alt="Team Members Page" width="1000" height="831" />
<h2>Video Version</h2>
&nbsp;

https://youtu.be/gemgZLtMe84
<h2></h2>
<h2><strong>Before Getting Started</strong></h2>
There is something to clarify before getting started.

As you can see, each member’s information will be included in a separated box, maybe called a name card. They are saved in posts of a custom post type for team members only.

The name and avatar of the member are the titles and the featured images of the post. And other information such as Position, Facebook, Instagram, and Mail will be saved in different custom fields.

To do it, we need Meta Box and its extensions:
<ul>
 	<li><a href="https://wordpress.org/plugins/meta-box/">Meta Box core plugin</a>: This is the framework to create custom fields and custom post types. It’s free and available on <a href="https://wordpress.org/plugins/meta-box/">wordpress.org</a></li>
 	<li><a href="https://metabox.io/plugins/custom-post-type/">MB Custom Post Type &amp; Custom Taxonomies</a>: It’s a free extension of Meta Box to create custom post types;</li>
 	<li><a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a>: This Meta Box premium extension provides a UI in the back end to create custom fields easily;</li>
 	<li><a href="https://metabox.io/plugins/mb-elementor-integrator/">Meta Box - Elementor integrator</a>. This extension allows you to get data from custom fields created by the Meta Box plugin in the templates of Elementor.</li>
</ul>
To have the display of all the member information on the frontend, I use <a href="https://elementor.com/">Elementor</a> for this practice. I also use the <a href="https://wordpress.org/plugins/ele-custom-skin/">Elementor Custom Skin</a> plugin to have the Loop template to display the listing of posts.
<h2>Step 1: Create a New Post Type</h2>
In the <strong>Admin Dashboard</strong>, go to <strong>Meta Box</strong> &gt;<strong> Post Types</strong>, then create a new post type for members.

<img class="aligncenter" src="https://i.imgur.com/yb8gspm.png" alt="create new post type for members" width="1000" height="651" />

After publishing the new post types, you will see a new menu in your dashboard.

<img class="aligncenter" src="https://i.imgur.com/R6MZse9.png" alt="Add the post type's name in the box" width="1000" height="668" />
<h2>Step 2: Create Custom Fields for the Post Type</h2>
Let’s create custom fields to save some extra information for members. Go to <strong>Meta Box</strong> &gt; <strong>Custom Fields</strong>.

We have <a href="https://youtu.be/_DaFUt92kYY">a tutorial on how to create custom fields</a>, you can refer to it for more information.

For the position information, I’d like to create a <strong>Select</strong> field that allows us to set some predefined options to choose from.

<img class="aligncenter" src="https://i.imgur.com/ILn7UvY.png" alt="Create a Select field for Position information" width="1000" height="688" />

For other information such as <strong>Facebook</strong>, <strong>Instagram</strong>, and <strong>Mail</strong>, we set them as <strong>URL</strong> fields that allow us to fill in a link.

If you want to add some extra information, just create more fields as you go.

After creating all the fields, move to the <strong>Settings</strong> tab of the field group. In the <strong>Location</strong> section, choose the <strong>Post Types</strong> as<strong> Team Members</strong> to apply these fields to it.

<img class="aligncenter" src="https://i.imgur.com/nXqbnRN.png" alt="Set location for Member Information field group" width="1000" height="703" />

Now, go to the post editor in <strong>Team Members</strong> post type, you will see the fields. Add information for some members for the test. We need them for the preview in the next step.

<img class="aligncenter" src="https://i.imgur.com/CeHd3gg.png" alt="Add member's information" width="1050" height="700" />
<h2>Step 3: Create a Template for the Name Cards</h2>
Go to <strong>Templates</strong> &gt; <strong>Saved Templates</strong> &gt; <strong>Add New</strong>.

Each name card is a post and we’ll display all the posts, so we should create a template as a loop.

<img class="aligncenter" src="https://i.imgur.com/1Cg3YHL.png" alt="Create a loop template" width="1000" height="700" />

To get the post from the <strong>Team Members</strong> post type to have a visual <strong>preview</strong>, go to the Preview settings, choose <strong>Team Members</strong> from the list.

<img class="aligncenter" src="https://i.imgur.com/prLJp0j.png" alt="Get all the posts from team member post type" width="1000" height="720" />

Now, we’ll add a widget to create a name card.
Since each name card of a member has 2 columns. One is to display the avatar and social icons, another one is to show the member information.

<img class="aligncenter" src="https://i.imgur.com/GYVwukS.png" alt="Wiget for the card name" width="450" height="199" />

So, choose the structure as 2 columns for the widget.

<img class="aligncenter" src="https://i.imgur.com/WoZnO4s.png" alt="Select the structure for widget" width="1000" height="720" />

Name the <strong>CSS Classes</strong> in the <strong>Advanced</strong> section for styling the name card later.

<img class="aligncenter" src="https://i.imgur.com/WiM15iC.png" alt="Name the CSS Classes in the Advanced section" width="1000" height="720" />

In the first column of the name card, add the <strong>Featured</strong> <strong>Image</strong> element to have the avatar saved in the featured image of the post. Then, change the size of the image to the thumbnail size.

<img class="aligncenter" src="https://i.imgur.com/Ndkj6Xu.png" alt="Add the Featured Image elements to save the avatar" width="1000" height="720" />

All the social contacts are icons with the same style so I’ll add them into a section that will help to style them at once. For it, I choose the <strong>Inner Section</strong>.

<img class="aligncenter" src="https://i.imgur.com/wkZE625.png" alt="Style the social contacts" width="1000" height="720" />

Drag an <strong>Icon</strong> element to the section and choose what you want.

To get the links saved in the custom fields such as Facebook, Instagram and Mail, click the <strong>Dynamic</strong> <strong>Tags</strong> button, choose <strong>Meta</strong> <strong>Box</strong> <strong>Field</strong> option in the <strong>Post</strong> section and select the corresponding field.

<img class="aligncenter" src="https://i.imgur.com/Gi9GB07.gif" alt="Save the link such as Facebook, Mail,... in custom fields" width="1000" height="562" />

Drag the <strong>Post Title</strong> element to get the name of each member.

<img class="aligncenter" src="https://i.imgur.com/eEAof3c.png" alt="Drag the Post Title element to get the name of each member." width="1000" height="720" />

The position of each member also is saved in a custom field. It’s just text so I add a <strong>Text Editor</strong> element, then also connect it to the corresponding field. Click the <strong>Dynamic Tags</strong> &gt; <strong>Meta Box Field</strong>, then find the <strong>Position</strong> field.

<img class="aligncenter" src="https://i.imgur.com/NWsSHPj.png" alt="Add a Text Editor element, then connect it to the corresponding field" width="1000" height="720" />

The description about each member is saved in the <strong>Post content</strong>, so drag the Post Content element into the second column.

<img class="aligncenter" src="https://i.imgur.com/uUhUlLN.png" alt="Drag the Post Content element as the description about each member is saved." width="1000" height="720" />
<h2>Step 4: Style the Name Cards</h2>
First, change the columns’ width.

<img class="aligncenter" src="https://i.imgur.com/AINqzdx.png" alt="Adjust the column width" width="1000" height="650" />

Next, we’ll need to style the social icons a bit. Let’s change their size, color and spacing.

<img class="aligncenter" src="https://i.imgur.com/WwevKOZ.png" alt="Adjust the social icon size, color and spacing." width="1000" height="720" />

<img class="aligncenter" src="https://i.imgur.com/NGp02el.png" alt="Adjust the social icon in layout and inner section" width="1004" height="720" />

Change the alignment of the second column. Then, add borders to the name card and the avatar.

<img class="aligncenter" src="https://i.imgur.com/w0WufAO.gif" alt="Change the alignment of the second column, then add borders to the name card and the avatar." width="1000" height="562" />

If you want to style more, customize the settings of each element as you want.
<h2>Step 5: Display all the Members’ Name Cards on the Page</h2>
If you’ve already had a page for <strong>Team Members</strong> information, just edit with Elementor directly. Otherwise, create one and edit it with Elementor as well.

Drag the<strong> Post</strong> widget to the content of the page.

<img class="aligncenter" src="https://i.imgur.com/VKsQDd7.png" alt="Drag the Post widget to the content of the page." width="1000" height="720" />

In the setting of the <strong>Post</strong> element, I have the <strong>Skin</strong> option in the <strong>Layout</strong> section because I used the <strong>Elementor</strong> <strong>Custom</strong> <strong>Skin</strong> plugin. In the <strong>Select</strong> <strong>a</strong> <strong>Default</strong> <strong>Template</strong> settings, choose the <strong>Team</strong> <strong>Member</strong> <strong>Template</strong> which we have just created.

<img class="aligncenter" src="https://i.imgur.com/hOdCRot.png" alt="Adjust the layout according to the template created." width="1002" height="720" />

Next, in the <strong>Query</strong> section, choose the source as the post type of your team members’ information to get all the posts from that post type.

<img class="aligncenter" src="https://i.imgur.com/g9WZtKT.png" alt="Choose the source as the post type in Query section" width="1004" height="720" />

Now, the preview shows the posts with exactly the information we want.

<img class="aligncenter" src="https://i.imgur.com/uQJWMB1.png" alt="Preview of the posts" width="1000" height="720" />
<h2>Step 6: Style the Team Members Page</h2>
You can skip this step if you see the display of this page reasonably. In my case, I want to change the spacing between each line of information so I add some CSS code.

In the <strong>Preview</strong>, go to <strong>Posts</strong> &gt; <strong>Advanced</strong> &gt; <strong>Custom</strong> CSS and then add CSS code into the box.

<img class="aligncenter" src="https://i.imgur.com/zqMlY7Y.png" alt="Add CSS in the box" width="1000" height="720" />

Here is my CSS code that you can refer to:
<pre>.team-member .elementor-widget:not(:last-child) {
    margin-bottom: 5px;
}
.team-member p {
    margin: 5px;
}
.team-member .member-box .elementor-row .elementor-widget-wrap .social-icon .elementor-row .elementor-widget-wrap {
    padding: 5px 0;
}
.team-member .member-box .elementor-row .elementor-column .elementor-widget-wrap {
    align-content: center;
}</pre>
It displays beautifully as I want.

<img class="aligncenter" src="https://i.imgur.com/b2ENTxJ.png" alt="Team Members Page after adding CSS" width="1000" height="831" />
<h2>Last Words</h2>
In my opinion, using a custom post type is an easier way than using cloneable fields to create a Team Members Page, especially for those who haven't known much about coding and using a page builder. For other page builders, please keep track of our next tuts.

If you have any questions, leave us a comment. Good luck!