大多数关于页面、代理网站和服务业务都需要一个让工作背后的人面子的地方。 团队成员小部件 在 Elementor 的主插件 building that section without custom code。每张卡片都包含一张照片、一个名字、一个角色、一个简短的简介和一排社交链接,你需要多少会员就掉进多少会员。
Team Member 每位都是自己的小部件,所以你设置一张卡片,风格化,然后跨列复制,构建完整的网格,你展示的成员数量没有上限,本指南贯穿每个设置,从设计变体(6免费,5更多与Pro)到风格选项卡。
团队成员小部件的作用 #
Widget 渲染一个团队成员为一张卡片:上面是照片,然后是姓名、名称和简短的描述,下面是一排社交图标 A 设计变化 dropdown 一键改变整张卡片布局,从素块变为圆形照片和悬停效果,六种变体免费,五种需要 Master Addons Pro。
它有三个选项卡。 内容 保存照片、文字、对齐方式和社交链接。 风格 控制卡片每个部分的颜色、排版、间距、边框和阴影。 高级 带有常见的 Elementor 选项,例如边距、填充和响应式可见性。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- 您的团队成员的照片,以及他们的姓名、角色和社交个人资料 URL。
如何添加团队成员小部件 #
在 Elementor 编辑器中,打开 元素 面板和搜索 团队成员的,(或)滚动到主插件部分(小部件带有紫色MA徽章)。将其拖到您的页面上。它加载了占位符卡,因此您从工作示例而不是空白示例进行编辑。
设置卡内容 #
选择小部件后,打开 内容 选项卡。 内容 部分包含卡上的所有内容:
- 设计变体: 卡布局预设(下一节涵盖)。
- 图片: 员照片,从媒体图书馆拉出。
- 图像分辨率: 要加载哪个注册图像大小,默认情况下为全。
- 姓名、名称、描述: 员姓名、角色、简短的简介,每个领域都有一个 AI来写 如果您想要快速草稿,可以选择。
- 内容对齐: 向左、居中或向右对齐文本。
选择照片 #
单击图像框和 WordPress 媒体库 opens。pick现有照片或上传新照片, 然后点击选择。前面值得做的一件事:使用相同大小的照片。匹配的尺寸即使你构建网格, 每张卡片都保留, 不匹配的往往会将文本向下移动到一两张卡片上。
选择设计变体 #
的 设计变化 dropdown 是 Team Member 小部件赚取其保留的地方, 一键交换整个卡片布局, 而不会触及您的内容, 列表包括(Pro 变体已标记):
- 基本一到基本五(免费): 清理块布局,顶部有照片,详细信息如下。
- 圆梯度和圆无梯度 (Pro): 圆形照片,后面或透明背景上有彩色形状。
- 悬停的社会左派和悬停的社会右派(专业): 隐藏社交图标,直到有人悬停卡片,然后将它们滑入。
- 圆形(免费): 拱形卡片,带有圆形照片和圆形社交按钮。
- 悬停 (Pro) 上的内容: 保持照片干净并透露悬停的细节。
这是 圆润 应用了变体,包括拱形框架、圆形照片和药丸形社交图标:
添加社交个人资料链接 #
打开 社会概况 剖开并打开 显示社交资料?.每个链接都是列表中的一项,所以使用 添加项目 要添加配置文件,请选择其图标并粘贴 URL。复制图标会复制一项,X 会将其删除。
Add only a member 实际使用的配置文件,其余的删除,没有 URL 的项目仍然显示它的图标,该行默认位于卡的底部,遵循您选择的任何设计变体。
添加多名团队成员 #
Team Member 的每个小部件都是一张卡,所以你通过复制它来构建一个完整的团队,按照你想要的方式设置第一张卡,然后右键单击它并选择 重复 (或按 Ctrl/Cmd + D),将副本掉入自己的栏目,在每个人的照片和详细信息中进行交换。
1个小部件由于你在复制,所以没有限制,添加3个成员,十几个,或者整个部门,一个三列的Elementor部分给你一排干净的卡片,随着团队的成长你添加更多的行,每个副本都保持原件的设计变化和造型,所以网格保持一致,没有额外的工作。
为卡片设计样式 #
的 风格 tab 将卡片分成可以自行风格的部分: 一般风格, 拇指, 内容, 名字, 指定, 描述, 社会的、和 图案 (来自自由模式扩展)。
- 一般款式: 卡片背景颜色、物品边框半径和盒子阴影。
- 拇指: 照片的边框、半径、填充物和边距。
- 内容: 背景(颜色或渐变)、边框、半径、填充和文本区域的边距。
- 姓名、名称、描述: 每个文本元素的颜色、排版、填充和页边距。
- 社会: 社交图标的大小、颜色和间距。
常见用例 #
- 关于页面 用照片和角色介绍整个团队。
- 代理机构和工作室网站 展示创意人士的社交联系。
- 服务业务 给做工作的人一个面子。
- 演讲者或教练阵容 适用于活动、网络研讨会和课程。
- 领导力或创始人部门 突出负责人。
使用团队成员小部件的提示 #
- 先打一张牌,然后复制。 Copies继承了设计和造型,所以你只设置了一次。
- 使用相同尺寸的照片。 匹配尺寸可以使卡片保持均匀。
- 保持简历短。 一两行在照片下读起来最好。
- 将变体与页面匹配。 Circle 和 Rounded 适合友好品牌;基本布局适合企业网站。
- 删除您不使用的社交项目。 空项目仍然显示其图标。
常见问题 #
Master Addons 中的团队成员小部件是什么?
Elementor 小部件,它将单个团队成员显示为一张卡片,上面有照片、姓名、角色、简短的简介和社交链接,它包括 6 个免费设计变体(11 个带有 Master Addons Pro)和一个完整的 Style 选项卡,因此您可以直接从 Elementor 面板构建和样式一个团队部分,无需自定义代码。
我可以添加多少团队成员?
Team Member 小部件没有限制,每个小部件都是一张卡片,所以通过复制小部件并将副本丢入自己的列中来添加更多成员。构建三张卡片行或大型多行网格;布局保持一致,因为副本继承了原件的设计。
团队成员小部件包含哪些设计变体?
11个预设。免费:基本一到基本五和圆形。专业:圆梯度, 圆无梯度, 悬停社交左, 悬停社交右, 悬停内容。每个都改变卡片布局, 像悬停上出现的圆形照片或社交图标, 不改变你的内容。
我可以向每个团队成员添加社交媒体链接吗?
是打开"社交配置文件部分中的"显示社交配置文件,然后使用"添加项目添加每个配置文件及其图标和 URL。仅添加成员使用的链接,因为没有 URL 的项目仍然显示其图标。
Team Member 和 Team Slider 小部件有什么区别?
Team Member 小部件显示成员为一个静态的卡片网格,每人一个小部件,Team Slider 小部件将成员放入一个带有中继器、箭头和自动播放的滑动转盘中,在空间狭窄时使用 Team Member 进行固定网格和 Team Slider。
包裹起来 #
Team Member 小部件将人员列表变成一个精美的团队部分:添加照片、姓名、角色、简介和社交链接,选择其中一种设计变体(6 个免费,11 个带有 Pro),然后对卡片进行样式设计并在您的列中复制。查看 团队成员小部件页面 对于每个变体的演示。对于滑动版本,请参阅 团队滑块小部件,搭配上 信息框小部件 对于服务,请浏览全文 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。
