您的网站访问者想知道谁是品牌的幕后黑手。精心设计的 元素团队成员 section 为您的业务摆出面孔,建立信任,让您的网站感觉个人化而不是企业化,问题?Elementor 不会开箱即用专门的团队成员小部件发货。
那里 Elementor 的主插件 进来。它为您提供了两个专门为此构建的小部件: MA团队成员 小部件(用于网格布局)和 MA 团队成员旋转木马 (滑动团队部分)。两者都是免费的, 并且都带有11个独特的设计变体, 您可以一键申请。
在本指南中,您将准确学习如何操作 在 Elementor 中创建团队成员部分 使用这两种方法,定制造型,并充分利用所有可用的设计选项。
为什么每个网站都需要一个团队成员部分
人买人,埃德尔曼信任晴雨表的一项研究发现,当消费者能看到一家公司背后真实的人时,他们就更有可能信任它,你的“关于”或“团队”页面往往是你整个网站上访问量最大的页面之一。
这是多么好的 elementor 中的团队成员部分 为您的网站做:
- 建立信誉 —游客在伸出援手之前可以看到他们正在和谁一起工作
- 创建个人联系 —照片和简短的生物使您的品牌具有相关性
- 增加转化率 —团队照这样的信任信号,减少购买时的犹豫
- 改善雇主品牌 —展示你的团队吸引了更好的求职者
- 降低跳出率 —引人入胜的视觉部分让访问者在页面上的时间更长
WordPress 网站上添加团队部分需要 10 分钟,无论您是经营小型代理机构、SaaS 公司还是本地企业,都需要产生可衡量的影响。
团队成员部分应包含哪些内容
动(将任何小部件拖到页面上)之前,请计划出每个团队卡应该显示哪些信息。以下是包含什么和跳过什么的快速细分:
| 元素 | 优先 | 为什么这很重要 |
|---|---|---|
| 照片 | 基本 | 人处理面孔的速度比文字快。使用一致的、专业的头像。 |
| 名字 | 基本 | 应直接出现在照片旁边或下方,以便连接即时。 |
| 指定/职位名称 | 基本 | 告诉访客这个人在团队中扮演什么角色。 |
| 简短描述 | 推荐 | 1-2句bio。保持人性化、人格化驱动。 |
| 社交媒体链接 | 推荐 | 让访问者通过 LinkedIn、Twitter 或其他渠道进行连接。 |
| 电子邮件或电话 | 可选 | 仅当您想要直接联系时才添加(对于销售量较大的团队来说很常见)。 |
专业提示: 保持团队内部的头像一致。相同的背景颜色、相似的裁剪和匹配的图像尺寸(300x300px 或 400x400px 效果良好)使整个部分看起来精致。
开始之前您需要什么
要遵循本教程,请确保您拥有:
- 文字出版社 已安装并运行(任何最新版本)
- 元素 (免费或专业)—这适用于两者
- Elementor 的主插件 (免费版)— 从 WordPress.org 下载
- 团队成员照片可供上传(头像,推荐平方比)
Master 插件安装并激活后,您将找到 MA团队成员 並 MA 团队成员旋转木马 “MASTER ADDONS”选项卡下的 Elementor 编辑器内的小部件。
如何创建 Elementor 团队成员网格部分
Grid 布局非常完美, 当您想要以干净、结构化的格式显示您的团队, 并具有多个列, 以下是如何一步一步设置:
步骤 1:插入新部分
Elementor编辑器中打开任意页面,点击“+”图标添加新栏目,选择自己喜欢的栏目结构,团队栏目,3栏或4栏布局效果最好。
步骤 2:添加内部部分
如果您需要对间距和布局进行更多控制,请拖动 内部分 widget 在您的主部分内。这会为您提供每个团队成员卡独立坐着的嵌套列。
Team 大小,根据需要创建任意数量的列,每行三列是桌面显示屏最常见的选择。
第 3 步:拖动 MA 团队成员小部件
在左侧的 Elementor 面板中,向下滚动到 主插件 签(或者只是在搜索栏中搜索“MA队员”)。拖动 MA团队成员 小部件进入您的一列。
您会立即看到默认团队成员卡显示占位符图像、姓名、名称和社交图标。
第 4 步:为每个团队成员重复
复制小部件或拖动新部件 MA团队成员 widget 进入每个剩余的列,每个 widget 代表一个团队成员,因此您可以完全控制各个卡。
专业提示: Widget 右键选择“重复”复制, 造型全部完好, 然后就把照片和文字换成每个新队员就可以了。
自定义 Elementor 团队成员小部件内容
单击任何 MA团队成员 打开其设置的小部件。 内容选项卡 是您为每个团队成员添加所有个人详细信息的地方。
团队成员详细信息
中的内容选项卡 elementor 团队成员小部件 为您提供以下字段:
- 图像 —上传大头照或团队照,也可以设定图片大小,选择自定义长宽比。
- 名字 — 团队成员的全名。这渲染为标题标签,因此选择合适的 HTML 标签(H3 或 H4 是团队卡的典型)。
- 指定 —职称、角色或职位(例如,“首席设计师”或“联合创始人兼首席执行官”)。
- 描述 —简短的简历或标语。保持1-2句,最干净的样子。
社交媒体资料
Main details 下面, 您会找到社交媒体部分, 添加每个团队成员个人资料的链接, 该小部件支持所有主要平台, 包括:
- 脸书
- 推特/X
- 链接In
- GitHub
- 使用自定义图标自定义 URL
Social links 在团队成员的信息下方显示为小图标,默认情况下它们会在新选项卡中打开,因此访问者不会离开您的页面。
样式选项卡:设计变化和预设
这就是哪里 MA团队成员 widget真的从基本的elementor解决方法中脱颖而出,而不是从头开始构建团队卡片设计,你得到了 11种独特的设计变体 並 5款预设 要选择。
设计变化
单击 样式选项卡然后打开 一般风格 panel。你会发现一个下拉标记为“设计变体” 11个选项中任意一个选择, 小部件立即重构卡片布局, 一些变体将图像堆叠在文本上方, 其他使用并排布局, 有些在悬停上添加叠加效果。
Best part: 变体间切换不会抹去你的内容,你的名字、照片、bio、社交链接都完好无损,你可以尝试每一个变体,并选择符合你网站设计的。
5 种风格预设
在通用款式面板中,您还会发现 5 种风格预设。这些是预先配置的颜色和布局组合,只需单击一下即可让您看起来精致。
手动样式控制
"样式"选项卡还可让您自定义:
- 背景颜色 —为每张卡片设置纯色、渐变或透明背景
- 内容对齐 —左、中、右对齐所有文字和图标
- 版式 — 字体族、大小、重量、行高、字母间距分别完全控制名称、名称和描述
- 文本颜色 —姓名、名称、描述文字颜色不同
- 社会图标颜色 —为正常状态和悬停状态定制图标颜色
- 间距和填充 —微调卡片内部元素之间的空间
- 边界和边界半径 — 添加边框或绕卡角
- 盒子阴影 — 深处加微妙的阴影效果
有关每个样式选项的完整演练,请检查 MA 团队成员文档.
如何在 Elementor 中创建团队成员旋转木马
有更大的团队吗? MA 团队成员旋转木马 widget,您可以在单个滑动部分添加无限的团队成员,当您有6个以上的团队成员并且不想用网格填充整个页面时,这是更合适的。
以下是如何 elementor 中的团队成员旋转木马 作品:
第 1 步:拖动 MA 团队成员旋转木马小部件
与网格方法不同,你确实如此 不是 need 内节或多列,只要新增一个单列的节,然后搜索“MA队员旋转木马”拖进去。
第 2 步:添加您的团队成员
Widget里面,会看到一个中继器字段,中继器中每个项目代表一个队员,点击“添加项目”创建新卡片,每张卡片填写:
- 照片
- 名字
- 指定
- 描述
- 社交媒体链接
1000万,随心所欲的加入多少队员,不限,转盘处理5个成员或者50个成员都一样轻松。
3步:设置标题标签
HTML标题标签定义您的团队成员姓名(H2,H3,H4等),对于大多数页面,H3或H4是正确的选择,因为上面的部分标题通常是H2。
轮播设置:导航、列和自动播放
Carousel 小部件附带一个专用的设置面板, 用于控制滑块的行为方式, 您可以配置以下内容:
要滚动的列和项目
设置屏幕上同时出现多少组成员,您可以根据您的布局宽度显示 2、3、4 或更多列。“项目滚动”设置控制访问者单击导航箭头时有多少张卡片移动。
| 屏幕尺寸 | 推荐专栏 | 要滚动的项目 |
|---|---|---|
| 桌面 (1200px+) | 3-4个列 | 1-2 |
| 片(768px-1199px) | 2-3个列 | 1 |
| 动(768px以下) | 1 列 | 1 |
导航风格
您有两种导航类型:
- 箭 —旋转木马两侧的左右箭头按钮。最适合常用悬停交互的桌面。
- 点 —转盘下方显示总幻灯片和当前位置的小点指示器。在桌面和移动设备上都运行良好。
您可以启用一个、两个或两个。如果您打开自动播放,某些用户甚至可能不需要手动导航。
自动播放
Toggle 自动播放,并设置以毫秒为单位的持续时间,3000-5000ms(3-5秒)的值让访问者在滑块移动之前有足够的时间读取每张卡片,您还可以启用暂停悬停,以便当有人悬停在卡片上时滑块停止。
旋转木马风格选项
就像网格小部件一样,旋转木马也随之而来 5款预设 并完全手动控制:
- 项目填充(每张团队卡之间的空间)
- 名称、名称和描述的印刷
- 每个文本元素的颜色
- 每张卡的背景和边框设置
- 导航箭头/点造型和颜色
有关完整的设置参考,请参阅 团队成员轮播文档.
更好的团队部分的提示
构建数百个团队部分后,以下是将好的团队页面与伟大的团队页面分隔开来的小细节:
- 使用真实照片,而不是库存图像。 游客可以分辨出不同之处。真实的头像比抛光的库存照片更能建立信任。
- 保持描述简短且一致。 3句生化,而另一人有完整段落,则会造成视觉上的不平衡。在所有卡片上都以相同的长度为目标。
- 精确匹配图像尺寸。 率(例如,400x400px)上传所有头像,不匹配的大小会破坏网格对齐。
- 仅包括活跃的社交档案。 LinkedIn 死链接比根本没有链接更糟糕,坚持到你的团队实际使用的平台。
- 在移动设备上进行测试。 Carousel段尤其需要移动测试,确保卡片可读,导航点易于点击。
- 6个以上的成员使用转盘。 3-4个队员的话,一个网格看起来更干净,对于需要滚动的大队,保存转盘。
MA 团队成员 vs MA 团队成员旋转木马:您应该使用哪种?
| 特点 | MA 团队成员(网格) | MA 团队成员旋转木马 |
|---|---|---|
| 最好的 | 小团队(2-6 名成员) | 较大的团队(6 名以上成员) |
| 布局 | 静态列(您控制网格) | 带自动/手动导航的滑动旋转木马 |
| 设置 | 每个团队成员内部部分有一个小部件 | 带中继器字段的单个小部件 |
| 设计变化 | 11种变体 | 5款预设 |
| 导航 | 无需(全部可见) | 箭头、点、自动播放 |
| 页面空间 | 占用更多的垂直空间 | 紧凑,节省空间 |
| 个人卡片控制 | 全(每个小部件都是独立的) | 所有卡片的统一造型 |
3-4个团队成员的网格方式,对于大多数小型企业网站来说,是最佳选择,如果你的团队成长超过6人,切换到旋转木马,保持页面干净。
想探索可用小部件的完整列表吗?查看 完整的 Master Addons 小部件库 80多个小部件和扩展。
常见问题
Elementor 有内置的团队成员小部件吗?
No。Elementor(免费或专业版)不包括专门的团队成员小部件。您需要像这样的第三方插件 主插件 专门建造一个 elementor 团队成员小部件 具有设计预设、社交链接和旋转木马选项。
MA 团队成员小部件免费吗?
是的。MA Team Member 和 MA Team Members Carousel 小部件均可在 Elementor 的 Master Addons 免费版本中找到。你可以 从 WordPress.org 下载 不需任何费用。一些高级设计变体可能需要 Pro 版本。
我可以在旋转木马上添加多少团队成员?
MA Team Members Carousel没有限制, MA Team Members Carousel使用的是中继器字段, 所以你可以根据你的页面需要添加多少团队成员, 小部件处理5或50张卡片, 没有性能问题, 只需设置可见列, 让滑块处理其余的即可。
我可以为不同的团队成员使用不同的设计吗?
格(MA Team Member widget)布局,是的,由于每个队员都是单独的小部件,因此可以对每张卡片应用不同的设计变体,在转盘中,所有卡片共享相同的设计预设,以保持视觉一致性。
团队成员照片应使用什么图像尺寸?
300x300px到500x500px之间的方形图像效果最好。保持所有照片的尺寸相同,以保持一致的对齐。JPEG或WebP格式在80%的质量下为您提供良好的视觉质量,而不会导致页面速度变慢的大文件大小。
相关阅读
包裹起来
创建一个 elementor 中的团队成员部分 不需要自定义代码或昂贵的页面构建器附加组件,使用 Master Addons 的两个团队小部件,您可以在 10 分钟内从空白部分进入完全风格化的团队页面。
对于小团队,使用 MA团队成员 网格布局中的小部件。对于较大的团队,请切换到 MA 团队成员旋转木马 为节省空间的滑块。这两个选项都为您提供设计预设、社交媒体集成以及完整的排版和颜色控制。
开始使用主插件 并建立一个团队部分,您的访问者实际上会信任。
