Hello everyone, and welcome to another WordPress tutorial. Today we’re going to learn how to create a team member page, just like this. It’s a simple and beautiful layout that you can use for multiple team members.
To build this, we’ll use the free theme Hello Elementor and the free version of Elementor Pro. Alright, let’s get started.
- First, create a new page. From the page settings, hide the page title and change the page layout to Elementor Canvas. This way, the header and footer will be hidden.
- Now we’ll add a container. Set the minimum height to 70VH. Change the direction to horizontal and set align items and justify content to center.
- Next, we’ll add another container inside this one. This will act as our inner column. Now, duplicate this container until you have four columns. Let’s select one of these to start designing.
- First, go to advanced settings and set the padding: Top: 30; Bottom: 40; Left and Right: 0
- Then, head over to style settings and apply a background color. The color codes, along with all CSS used in this tutorial, are available in the description box.
- Now, let’s set the border radius to 5 pixels on all sides.
- Inside this column, add another container. Set align items to center. Then, under advanced settings, set the padding to: Write: 25; Left: 25; Top and Bottom: 0.
- Next, add another container inside for the image. Set the padding to zero. Now, drag in an image widget. Set the image resolution to medium large for faster loading. Upload your team member’s photo, ideally 300 by 300 pixels.
- Now, let’s add a CSS class to this image. Name it Sager Profile Image. Then, select the container holding the image and add another CSS class, Sager Profile Background. Now, select the main inner container and add one more CSS class, Sager Profile Main.
- Great. Now let’s add the text. Drag a heading widget below the image container. Move the image container above if needed. For the team member name, type something like John Doe.
- Then, set the typography to Poppins size, 24 pixels, weight 600, semi-bold, and uppercase.
- Change the text color to black. Duplicate this heading to add the designation, for example, web developer. Here, change the font size to 16 pixels, weight to 400, normal, and set the transform to default.
- Now, let’s create a section for social media icons. Add another container below the designation. Set a background color for this container and add a CSS class, Sager Profile Icon.
- Align items to center and add the social icons widget inside. Change the shape to square. In style settings, set the color to custom and make the primary color fully transparent.
- Adjust the icon size to 20 pixels. Now, under icon hover settings, change the primary color to match your background color and set a secondary color if needed.
- Also, adjust the icon spacing to 10 pixels and set all padding of the container to zero.
- Alright, click publish and let’s preview the page. Now, let’s move on to some custom CSS. Go to customize, then additional CSS and paste the CSS code you’ll find in the description box.
- As you can see, the page looks even better now with some smooth effects, but we still need to adjust a few things. Click publish, then reload the page.
- Now, to make the profile picture circular, select the image container and set the border radius to 50%. Set the overflow to hidden under advanced settings. Next, we’ll work with the Sager Profile Pattern class.
- Add a spacer widget outside the inner container and give it the CSS class, Sager Profile Pattern. Now, when you hover over a profile, you’ll see a cool pattern effect appear. Almost done.
- Now, duplicate the finished. Pattern effect appear. Almost done. Now, duplicate the finished column to create three more team member profiles. Remove any old empty columns if needed.
- Click publish and preview again. And there you go, your beautiful, mobile responsive team member page is ready. You can easily change the photos, names, and designations as needed.
Quick tip: if you don’t have the time to build everything from scratch or want even more designs, you can use a plugin. Visit https://bwdelementoraddons.com/ where you’ll find addons like “Meet The Team”.
This plugin offers two free team member designs, and I’ve already installed it to show you. After installing, simply search for “Meet the Team” in the Elementor widgets, drag it onto your page, and your team section is instantly created.
You can easily customize it and you can also choose from over 30 plus different team styles. Just a single click and your entire design changes. It’s a huge time saver if you want more styling options without starting from zero.
That’s it for today’s tutorial. Thanks for watching and I’ll see you in the next video.
Installation Process of “BWD Meet The Team Elementor Addon”
- Install Meet The Team Elementor Addon using WordPress plugin installer or by uploading its files into the WordPress plugins directory.
- Activate the Meet The Team Elementor Addon through WordPress Plugins menu.
- Click the Plugins => Add New
- Click Upload Plugin and then Choose the meet-the-team.zip from your computer then click on the Install Now button.
- After activating, it doesn’t work without Elementor Page Builder plugin. Firstly, you should activate Elementor Page Builder.
- To activate newly installed plugin navigate the Plugins => Installed Plugins.
- Find the Meet The Team Elementor plugin from the list and press/click Activate.
- Congratulations! plugin has been installed and activated on your website.
Check different styles of Meet The Team and choose the style you want. Simple!
You can also check our BWD Elementor Addons Bundle from CodeCanyon. Buy the plugin now!
Download the Code File.