Divi Person模块是创建“个人资料”模块的最佳方法。 这是一个很棒的插件，可以在“关于我”页面上使用，也可以在要创建个人简历的团队成员页面上使用。 该模块将文本，图像和社交媒体链接组合到一个紧密结合的模块中。

如何配置Divi Person模块

在将 Divi Person 模块添加到页面之前，您必须先跳转到 Divi Builder。 一旦 Divi主题 安装在您的 网站Web，你会注意到一个按钮 使用Divi Builder 创建新页面时，在帖子编辑器上方。 单击此按钮以激活Divi Builder，并访问所有Divi Builder模块。 然后点击按钮 使用Visual Builder 以可视模式启动发电机。 您也可以点击按钮 使用Visual Builder 当您浏览您的 网站Web 如果您登录到 WordPress 仪表板，则在前台。

进入Visual Builder后，您可以单击灰色加号按钮将新模块添加到页面。 新模块只能添加到行内。 如果要开始新页面，请记住首先在页面中添加一行。 我们提供了有关使用以下元素的出色教程 线 和 部分 由Divi

在模块列表中找到人员模块，然后单击它以将其添加到页面中。 模块列表是可搜索的，这意味着您也可以键入单词“ person”，然后单击Enter以自动查找并添加Person模块！ 添加模块后，模块选项列表将为您打招呼。 这些选项分为三个主要组： 包装内容 , 概念 et 先进 .

用例示例：在“关于我们”页面中添加“我们的团队”部分

关于我们页面是使用Person模块介绍您的团队成员的好地方。 它增加了个人风格，可以帮助建立与新客户的信任。

对于此示例，我将向您展示如何使用“人员”模块在有关小型企业的页面上添加“我们的团队”部分。 我将使用三人三列的布局，以使该部分更加紧凑并与页面的总体设计匹配。

使用Visual Builder，插入一个新的标准部分，该部分具有三列（1/3 1/3 1/3）的行。 然后将Person模块添加到第一列。

更新人员模块设置，如下所示：

内容选项

姓名：[输入人名]
职位：【输入此人的分机】
输入社交媒体资料的 URL
描述：[输入一个简短的传记]
图像：[捕获 600 x 600 图像]

德观念选项

颜色图标：＃fcbf00
悬停图标颜色：＃e0a831
标题字体：Roboto，粗体，
标头字体大小：30px
标头文字颜色：＃505050
信头间距：1px
标题行高度：1.5em
正文字体大小：18px
身体线条大小：1.4em
自定义填充：向上15px，向右15px，向下15px，向左15px

高级选项（自定义CSS）

主要元素：
-webkit-box-shadow：0 1px 5px rgba（0，0，0，0.2）
-moz-box-shadow：0 1px 5px rgba（0，0，0，0,2）;
box-shadow：0 1px 5px rgba（0，0，0，0,2）;

保存设置

现在，将您刚刚创建的Person模块复制两次，然后将复制的模块拖到该行的第二和第三列中。 由于已经为每个重复的“人员”模块进行了设计，因此您要做的就是使用图像，标题，位置，社交媒体网址和说明来更新内容。人的。

这就是它！

人物内容选项

在内容选项卡中，您将找到模块的所有内容元素，例如文本，图像和图标。 所有控制 什么 出现在模块中的内容将始终在此标签中找到。

名字

这是您要介绍的人的名字。 该名称以较大的文本显示在模块顶部。

职务

该位置以较小的文字显示在名称下方。 通常用于指一个人在公司团队中的专业职位。 例如，“图形设计师”尼克·罗奇（Nick Roach）。

Facebook个人资料网址

在您的Facebook页面上输入URL或将其留空以禁用Facebook图标。

Twitter个人资料网址

在您的Twitter页面上输入URL或将其留空以关闭Twitter图标。

Google+个人资料网址

在您的Google+信息页上输入网址，或将其留空以关闭Google+图标。

LinkedIn个人资料网址

在您的LinkedIn页面上输入URL或将其留空以关闭LinkedIn图标。

课程描述

在此处输入模块主文本的内容。

图片网址

在这里，您可以下载照片以在简历中使用。

背景颜色

为模块定义自定义背景色，或留空以使用默认颜色。

背景图像

如果设置，此图像将用作此模块的背景。 要删除背景图片，只需从设置字段中删除URL。 背景图像将出现在背景颜色的顶部，这意味着应用背景图像时背景颜色将不可见。

管理员标签

这将更改构造函数中的模块标签，以便于识别。 在Visual Builder中使用WireFrame视图时，这些标签将出现在Divi Builder界面的模块块中。

Person模块的设计选项

在“设计”选项卡中，您将找到所有模块样式选项，例如字体，颜色，大小和间距。 这是用于更改模块外观的选项卡。 每个Divi模块都有一长串的设计设置，可用于更改任何内容。

图标颜色

此选项控制出现在每个人的个人资料中的社交媒体图标的颜色。 默认情况下，这些图标是灰色的，购买时您可以使用此设置更改此颜色。

悬停图标颜色

您还可以更改社交媒体图标的悬停颜色。 在此设置中，使用颜色选择器选择所需的颜色。

文字颜色

在这里，您可以选择文本的值。 如果您在黑暗的背景上工作，则应打开文本。 如果您使用的是浅色背景，则文本应为深色。

标题字体

您可以通过从下拉菜单中选择所需的字体来更改标题文本的字体。 Divi随附了数十种由Google字体支持的出色字体。 默认情况下，Divi对页面上的所有文本使用Open Sans字体。 您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

标题字体大小

您可以在此处调整标题文本的大小。 您可以拖动范围滑块以增大或减小文本的大小，或者直接在滑块右侧的输入字段中输入所需的文本大小值。 输入字段支持不同的度量单位，这意味着您可以根据尺寸值输入“ px”或“ em”以更改其单位类型。

标题文字颜色

默认情况下，Divi中的所有文本颜色都显示为白色或深灰色。 如果要更改标题文本的颜色，请使用此选项从颜色选择器中选择所需的颜色。

标题字母间距

字母间距会影响每个字母之间的间距。 如果要增加标题文本中每个字母之间的间隔，请使用范围滑块调整间隔，或在滑块右侧的输入字段中输入所需的间隔大小。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

标题行高度

行高会影响标题文本每一行之间的间距。如果要增加每一行之间的间距，请使用范围滑块调整间距或在光标右侧的输入字段。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

正文字体

您可以通过从下拉菜单中选择所需的字体来更改您的字体。 Divi随附了数十种由Google字体支持的出色字体。 默认情况下，Divi对页面上的所有文本使用Open Sans字体。 您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

正文字体大小

在这里您可以调整您的正文文本大小。 您可以拖动范围滑块以增大或减小文本的大小，或者直接在滑块右侧的输入字段中输入所需的文本大小值。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

正文文字颜色

默认情况下，Divi中的所有文本颜色都显示为白色或深灰色。 如果要更改文本的颜色，请使用此选项从颜色选择器中选择所需的颜色。

正文字母的间距

字母间距会影响每个字母之间的间距。 如果要增加文本中每个字母之间的间距，请使用范围滑块调整间距或在滑块右侧的输入字段中输入所需的间距大小。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

身体线的高度

行高会影响正文中每一行之间的间距如果要增加每一行之间的间距，请使用范围滑块调整间距或在输入字段中输入所需的间距大小位于光标右侧。 输入字段支持不同的度量单位，这意味着您可以根据尺寸值输入“ px”或“ em”以更改其单位类型。

使用边框

启用此选项将在模块周围放置边框。 可以使用以下条件参数来自定义此边框。

边界的颜色

此选项会影响边框的颜色。 从颜色选择器中选择一种自定义颜色，以将其应用于边框。

边界的宽度

默认情况下，边框为1像素宽。 您可以通过拖动范围滑块或在滑块右侧的输入字段中输入自定义值来增加此值。 支持自定义度量单位，这意味着您可以将默认单位从“ px”更改为em，vh，vw等。

边框样式

边框支持八种不同的样式：实心，点缀，点缀，双点，凹槽，山脊，覆盖和开始。 从下拉菜单中选择所需的样式，以将其应用于边框。

自订保证金

边距是添加到模块外部，模块与模块上方，下方或左侧和右侧之间的下一个元素之间的空间。 您可以将自定义边距值添加到模块的四个侧面中的任何一个。 要删除自定义边距，请从输入字段中删除添加的值。 默认情况下，这些值以像素为单位进行度量，但是您可以在输入字段中输入自定义度量单位。

自定义填充

填充是在模块内部及其边缘与内部元素之间添加的空间。 您可以将自定义填充值添加到模块的四个侧面中的任何一个。 要删除自定义边距，请从输入字段中删除添加的值。 默认情况下，这些值以像素为单位进行度量，但是您可以在输入字段中输入自定义度量单位。

人员模块的高级选项

在高级选项卡上，您将找到经验丰富的Web设计人员可能会有用的选项，例如自定义CSS和HTML属性。 在这里，您可以将自定义CSS应用于模块的许多元素中的任何一个。 您还可以将自定义CSS类和ID应用于模块，该自定义CSS类和ID可用于在子主题的style.css文件中自定义模块。

CSS ID

输入用于此模块的可选CSS ID。 ID可用于创建自定义CSS样式或链接到页面的特定部分。

CSS类

输入用于此模块的可选 CSS 类。 CSS 类可用于创建自定义 CSS 样式。 您可以添加多个类，并用空格分隔。 这些类可以在您的 Divi 子主题或添加到页面或网站的自定义 CSS 样式表中使用。 网站Web 使用 Divi 主题选项或 Divi Builder 页面设置。

自定义CSS

自定义CSS也可以应用于模块和任何模块内部。 在“自定义CSS”部分中，您将找到一个文本字段，您可以在其中直接将自定义CSS样式表添加到每个元素。 这些设置中的CSS条目已经包装在样式标签中。 因此，只需输入用分号分隔的CSS规则即可。

动画

默认情况下，图像在滚动页面时是动画的。 在这里，您可以选择动画的方向或将其禁用。

能见度

此选项使您可以控制模块所在的设备。 您可以选择分别在平板电脑，智能手机或台式机上禁用模块。 如果要在不同的设备上使用不同的模块，或者要通过从页面中删除某些元素来简化移动设计，这将很有用。

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]下载DIVI主题[/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family =下载 TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

其他Divi教程

• 5网站对餐厅使用迪维主题
• 如何在Divi WooCommerce产品上添加文字
• 如何更改Divi页面之间的菜单颜色
• 如何使用Divi个性化博客的网格
• 如何使用WordPress的作用迪维编辑
• 如何创建全屏Divi滑块
• 如何更改Divi页面之间菜单的颜色
• 您可能不了解Divi的功能
• 如何在WordPress上使用Divi Builder
• 如何使用Divi视频滚动模块
• 如何使用Divi Builder Flip模块
• 如何在Divi Builder上添加推荐模块
• 如何使用Divi文本模块
• 如何在Divi上创建滑块
• 如何编辑Divi用户角色
• 如何使用Divi社交媒体模块
• 如何在主题WordPress Divi上使用shop模块
• 如何使用Divi侧边栏模块
• 如何使用Divi Price表模块
• 如何使用Divi出版物的标题模块
• 如何添加Divi的视频模块
• 如何使用文章导航模块
• 如何使用Divi搜索模块
• 如何使用Divi钱包模块
• 如何在Divi Builder上使用person模块
• 如何使用带有Divi过滤器的钱包模块
• 如何使用全宽滑块模块
• 如何使用Divi Builder图像模块
• 如何使用Divi Builder的全宽导航模块
• 如何使用图库模块
• 如何使用Divi Builder全宽模块
• 如何使用Divi全宽度组合模块
• 如何使用Divi全角标题模块
• 如何使用Divi计数器模块
• 如何在Divi Builder上使用文章滑块
• 如何使用Divi Email Optin模块