Divi 教程：如何使用职位模块

Divi Job Title 模块以优雅的方式显示您当前帖子的标题以及帖子图像和元数据（如果适用）。这允许您在使用 Divi Builder 创建帖子时创建更多独特的帖子。

如何将帖子标题模块添加到您的页面

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

进入Visual Builder后，您可以单击灰色加号按钮将新模块添加到页面。新模块只能添加到行内。如果要开始新页面，请记住首先在页面中添加一行。

在模块列表中找到文章标题模块，然后单击它以将其添加到您的页面。模块列表是可搜索的，这意味着您也可以输入“职位名称”一词，然后按回车自动查找并添加职位模块！添加模块后，您将看到模块选项列表。这些选项分为三个主要组： 包装内容 , 概念 et 先进 .

用例示例：格式化博客文章的文章标题模块

对于此示例，我将向您展示为博客文章自定义文章标题是多么容易。

您需要做的第一件事是转到 WordPress 仪表板的“编辑文章”页面。在右上角的Divi Post Settings区域，将页面布局设置为Full width并隐藏文章标题。

使用 Visual Builder，添加具有全宽行（1 列）的常规部分。然后将 Post Title 模块添加到该行。

更新帖子标题设置如下：

内容选项

显示帖子类别：没有显示评论数量：没有显示特色图片：是特色图片位置：标题/元背景图片

德观念选项

文字方向：居中文字颜色：浅色背景文字颜色：是文字背景颜色：rgba（0,0,0,0.35）标题字体：Roboto（粗体）标题字体大小：50px标题字母间距：2px标题行高：1em元字体：Raleway Light Meta 字体大小：24px Meta 字体颜色：# e0ba67

保存设置

就这样。现在你再也不用满足于另一个无聊的职位了！

帖子标题内容选项

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

显示标题

在这里您可以选择是否显示文章的标题。

显示元

在这里您可以选择是否显示 Post Meta。

显示作者

在这里您可以选择是否在 Post Meta 中显示作者姓名。

显示日期

在这里您可以选择是否显示日期。

日期格式

您可以在此处设置 Post Meta 中的日期格式。默认为'M j, Y'

显示文章类别

在这里您可以选择是否在 Post Meta 中显示类别。注意：此选项不适用于自定义帖子类型。

显示评论

在这里您可以选择是否在 Post Meta 中显示评论数量。

显示特色图片

您可以在此处选择是否显示所选图像。

特色图片放置

您可以在此处选择放置所选图像的位置。

背景颜色

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

管理员标签

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

职位名称设计选项

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

使用视差效果

如果所选图片的定位设置为“标题/元背景图片”，您可以选择是否对所选图片使用视差效果。

视差法

您可以在此处选择用于所选图像的视差方法 - CSS 或 True Parallax。

文字方向

您可以在此处选择标题/元文本的方向。

文字颜色

您可以在此处选择标题/元文本的颜色。

使用文本背景颜色

在这里您可以选择是否使用标题/元文本的背景颜色。

文字背景色

如果启用了背景颜色，请在此处选择所需的背景颜色。

标题字体

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

标题字体大小

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

标题文字颜色

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

标题字母的间距

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

标题行的高度

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

Metas字体

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

Metas字体大小

在这里，您可以调整元文本的大小。您可以拖动范围滑块以增加或减小文本的大小，或者直接在滑块右侧的输入字段中输入所需文本大小的值。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ 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规则即可。

能见度

此选项允许您控制显示模块的设备。您可以选择在平板电脑、智能手机或台式机上单独停用您的模块。如果您想在不同的设备上使用不同的 mod，或者您想通过从页面中删除某些元素来简化移动设计，这将非常有用。

[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教程：如何使用Job Title模块