如果您经营一家小型企业,在网站上创建团队介绍页面可以帮助您显得更加平易近人。此外,您可能还想展示每位员工的技能,向潜在客户表明您都是该领域的专家。然而,您可能不知道如何让您的整个团队脱颖而出。
幸运的是,您不需要成为网页设计师就能创建一个有效且美观的团队页面。通过参考一些真实案例并遵循一些简单的建议,您应该能够设计出引人入胜的个人资料,以最佳方式展示您的员工。

📚 在本文中,我们将介绍一些 impactful 的团队页面。然后,我们将分享一些帮助您展示自己团队的技巧。让我们开始吧!
有效的团队介绍页面的优秀案例
与任何类型的网页设计一样,在创建团队页面之前参考一些真实案例是一个好主意。当然,您不需要复制其他页面,而是要从它们身上汲取灵感,并借鉴一些最佳功能。
考虑到这一点,让我们来看看一些拥有出色的团队介绍部分的网站。
1. Luminary
Luminary 是一家拥有相当规模团队的数字机构。该网站以黑色背景上的个人照片网格形式展示所有成员:

用户可以点击任何照片来详细了解该团队成员及其专业领域:

正如您所看到的,这些个人资料非常详细,提供了关于员工职业背景和价值观的信息。但是,也有一个“快速了解”部分来突出每位成员的个性特征。
这个案例表明,您可以创建在经验丰富的员工中建立信任的个人资料,同时也可以通过有趣的事实注入一些亲切感。
2. Digital Marmalade
接下来,让我们看看另一个来自数字机构网站的案例。再一次,我们看到了团队成员头像的照片库:

然而,Digital Marmalade 使用彩色背景使页面更加有趣。此外,它还使用翻转卡片来展示每位员工的信息。点击照片后,您将获得该团队成员的一些关键指标和评分:

该页面还通过列出每位员工的个人偏好和超能力来融入趣味性和幽默感。这些内容配有一张童年照片和一张虚构英雄的图片,员工的面孔被叠加在上面:

如果您经营一家数字或营销公司,在团队页面中使用交互元素可以向潜在客户展示您有能力创建独特的内容。
3. Humaan
Humaan的页面轻松有趣,英雄区域与公司的品牌形象保持一致:

此外,它使用GIF而不是传统的头像,每个个人资料都包含一行简短的描述:

正如这个例子所示,您不需要创建复杂的个人资料来产生影响。简单的描述和有趣的图片就足以传达您团队的性格和专业能力。
4. SaltedStone
如果您想创建更正式的团队页面,请查看SaltedStone的这个示例:

它使用专业的头像,并附有全名和职位。此外,个人资料按不同部门归档。
当您点击图片时,会弹出一个弹出窗口,显示该员工的更多信息及其社交账号链接:

由于SaltedStone有多个部门且团队规模较大,这种布局有助于让您一览整个团队的全貌,同时保持页面整洁有序。
5. Text
Text的页面采用极简设计,白底黑字。还有一个过滤器,让用户可以按不同部门浏览:

个人资料轻松有趣,重点介绍团队成员的兴趣和技能:

此外,Text还利用这个页面引导用户查看公司的空缺职位。如果您一直在寻找新人加入您的团队,可以在页面上添加一个强有力的行动号召按钮。
6. Digital Uncut
如果您是平面设计师或艺术家,可以在网站的团队页面上展示您的技能。例如,Digital Uncut使用团队成员的插图而不是照片:

然而,它通过在简短的简介中突出每位员工的专业知识来保持专业感:

此外,Digital Uncut为每个个人资料使用弹出窗口。这有助于保持主页面的整洁。
7. Electric Pulp
乍一看,Electric Pulp 的团队页面看起来非常正式,配有专业的黑白照片:

但是,如果将鼠标悬停在任何图像上,你可能会感到惊讶:

每张员工照片都配有一个表情包。这是一个有效的展示专业形象的方式,同时不会显得过于严肃。
8. Crowd
Crowd 是另一个在其团队页面上有效使用翻转卡的网站。当您将鼠标悬停在个人资料照片上时,您会看到一些关于该员工的有趣事实,例如他们的国籍和获得过的奖项:

这是一个简单但有效的团队展示方式。另外,如果您想限制页面上的文字数量,这可能会特别有用。
9. FCINQ
FCINQ 是一个单页网站,其关于部分非常独特。团队成员的个人照片以“气泡”形式呈现,同时还有一些关于公司的关键信息:

当您点击图像时,会看到一个包含员工姓名、职位和社交媒体链接的说明文字:

此外,这些元素会随着您向下滚动页面而加载,从而实现更流畅的用户体验。这个例子表明,即使是一个单页网站并且团队规模很大,您仍然可以创建一个有效的团队页面,而不会让用户感到不知所措。
10. Lateral
最后,让我们看看 Lateral。在这里,我们只有一个包含团队成员动态小照片的网格。当您将鼠标悬停在图像上时,您只会看到该人的姓名,其他什么都没有:

您可能出于不同的原因选择这种设计。也许您只是想突出团队的多样性。或者,您可能想尽量减少文字,专注于视觉效果。
如何在 WordPress 中创建团队页面
在看过一些强大的示例之后,让我们讨论一些在 WordPress 中创建团队页面的技巧。
1. 选择带有预制“团队介绍”部分的主题 🎨
大多数 WordPress 主题都带有“关于”页面。但是,如果您想要一个专用页面,我们建议您寻找提供此功能的主题。这样,您就不需要花时间自己构建它——您可以直接自定义现有设计。
例如,Neve 有几个带有专业团队介绍部分的入门网站:

此外,你还可以混合搭配不同演示中的元素。因此,如果你喜欢的站点没有“团队成员”版块,可以从其他 Neve 模板中导入这个元素。
2. 创建信息丰富且引人入胜的个人资料 🦔
无论你是想创建一个有趣的页面还是保持更正式的语调,重要的是你的团队个人资料要信息丰富且引人入胜。通常,用户访问此页面是为了更多地了解公司背后的人。
如果个人资料过于严肃,一些用户可能会感到有些敬畏。另一方面,如果你让内容稍微随意一些,他们可能会觉得你更容易接近。
但是,你可能需要避免设计一个只关注幽默和有趣事实的团队页面。请记住,大多数用户会对公司的专业知识更感兴趣。
通过突出每位员工的知识和技能,潜在客户将能够决定你的团队是否适合他们的项目和使用需求。使用高质量的肖像照也可以帮助你留下良好的印象。
3. 使用动画让页面更具互动性 🎮️
正如本文中的一些示例所展示的,像翻转卡片这样的有趣元素可以帮助你创建一个互动性强且简洁的页面。然而,在添加动画功能方面,默认的 WordPress 编辑器有些局限。
幸运的是,你可以使用像 Otter Blocks 这样的插件为你的页面添加动画。这是一个页面构建模块集合,你可以直接从区块编辑器中访问。例如,翻转区块可以让你为团队个人资料创建动画卡片:

你可以在正面显示姓名和职位,在背面提供一些必要的信息或简短的简介。此外,你还有多个自定义选项,包括不同的翻转效果。
使用 Otter Blocks,你还可以向团队页面添加 Lottie 动画,创建包含每位成员更多详细信息的弹窗,等等。更重要的是,这些功能大部分都是免费的!
结论 🧐
创建团队页面可以帮助你“人性化”你的企业。它让潜在客户能够一窥品牌背后的人物,并使他们能够联系到相关的团队成员。因此,你可以使用此页面来展示每位员工的技能和个性。
总结一下,以下是一些帮助你入门的关键提示:
- 选择一个带有预制“团队成员”版块的主题,如 Neve。
- 创建引人入胜的团队成员个人资料。
- 使用像 Otter Blocks 这样的插件,通过动画让页面更具互动性。
你对在 WordPress 中创建“团队成员”页面有任何问题吗?请在下面的评论部分告诉我们!



