Introducing your team to the world is essential for building trust and credibility. A well-designed team member section can significantly enhance your website’s overall appeal and professionalism. The good news is Gutenberg, WordPress’s default block editor, offers a flexible tool for crafting a beautiful team member section.
In this article, we’ll walk you through the process of creating an eye-catching team member section using Gutenberg, even without relying on additional plugins.
When creating a team member, there are several things you should consider to ensure it effectively showcases your team on your website’s overall aesthetic, as follows:
- Visual Hierarchy
- Ensure the most important information (image, name, and job title) is easily visible.
- Responsiveness
- Design the section to look good on different screen sizes (desktop, tablet, mobile).
- Consistency
- Maintain a consistent design for all team members, including image size, layout, and typography.
- White Space
- Use white space effectively to improve readability and visual appeal. This means we should be able to set the white space wisely, it depends on the situation. Sometimes we need to add more white space between two elements, but sometimes we need to decrease it.
How to Create a Beautiful Team Member Section in Gutenberg
Alright, let’s get started!
Go to the WordPress Gutenberg editor by creating a new post type (page or post) or selecting the existing one.
First, add a Group block to the canvas area. Adding a Group block will gather blocks in a container. If you have other Group blocks, you can rename this group with your preference.
Title Section
Next, we’re going to add a title to the team member section. Inside the Group block, add a Paragraph block, then put any text you want as the title of the team member section. In this example, we add “Our leadership team” as a title.
Once you add a title for your team member section, you can style up the text to get the best look and streamline your overall design. In this example, we apply some changes to the text, as follows:
- Text Style: Bold
- Text Alignment: Center
- Text size: Extra Large (XL)
Description
Under the title of the team member section, we will add a short description as the introduction before introducing the team member. It is important because it provides context for the team members, sets expectations for the reader, builds reliability and credibility, and enhances the overall readability and engagement of the section.
Add the Paragraph block then write your preferred short description, three sentences is the maximum we think. Don’t forget to align the text to the center to make the appearance in line with the title.
White Space
To add more space between the description element and the images element that we will add later, we will need the help of a Spacer block. Add a Spacer block under the description element, then set the value as you like. In this example, we set the height at 15 pixels.
Images
Now, it’s time to show that you are proud of and value every team member’s images that you want to display by crafting a visually appealing and informative team member section.
Add the Column block with a single column, then duplicate it to multiple columns, depending on how many images of team members you want to display. In this example, we add four columns.
Once the columns are ready, add the Images block to each column, then insert the images. As we mentioned at the beginning of this article, please maintain a consistent design for your team member images, such as image size and layout.
Name and Job Title
Add the Name and Job Title Element
Next, it is time to display each team member’s name and job title. By displaying a team member’s name and job title, you tell your website visitors who specifically contribute to the growth and operation of your brand.
Under the team member images, add the Column block. The number of columns adjusts to how many team member images you’ve added previously.
In this example, we will add four columns for the name and job title elements. Afterward, add the Paragraph block inside the columns, then put their name and job title.
Adjust the White Space between the Name and Job Title elements
Once you add the name and job title elements, you can save your page and preview it by clicking the Preview in new tab button.
As you can see from the image above, the space between the name and job title elements is too stretchy, detracting from their visual appearance.
Unfortunately, a Spacer block doesn’t work in this case. Because the Spacer block only works for increasing the white space, utilizing the CSS code is the solution.
First, add the CSS class to the job description column ( Job Title -> Settings -> Advanced -> ADDITIONAL CSS CLASS(ES). In this example, we put wpp-team-space as a CSS class name.
Next, we will add the CSS snippet to the WordPress theme customizer. On your WordPress dashboard, navigate to Appearance -> Customize.
Note: If you’re using a block theme, click here to learn how to enable a theme customizer on your WordPress.
.wpp-team-space{
margin-top: 1px;
}
Once you’ve already added and published the CSS snippet, return to your team member page and do a page refresh.
That’s it. Feel free to experiment with other layouts and styles. For example, if you want to add the hover effect to your images, especially flipbox, we have a separate article covering how to create flipbox in Gutenberg (without plugin), in case you want to add this style to your team member images.
The Bottom Line
Without depending on other plugins, you can easily build a beautiful and engaging team member section by utilizing the flexibility and creativity of Gutenberg’s built-in blocks and CSS code.
By carefully arranging columns, images, paragraphs, and spacer blocks, you can create a visually captivating display highlighting your team members. Try out various layouts, colors, hovers, and font styles to produce a characteristic and captivating team member section that flawlessly blends in with the overall theme of your website.
