Divi教程：如何在文章中使用导航模块

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

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

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

用例示例：将自定义导航链接添加到博客文章的底部

在文章底部放置指向下一篇和上一篇文章的导航链接是保持您的游客与您的内容互动。在此示例中，我将向您展示如何使用实际的帖子标题名称代替一般的“上一个”和“下一个”链接名称作为导航链接。我还将向您展示如何在链接周围添加边框以赋予它们更多效果。

让我们开始。

使用可视化生成器在帖子底部添加具有全宽（1列）布局的标准部分。然后在该行之后添加一个导航模块。

更新发布导航设置，如下所示：

内容选项卡

上一个链接文本：％title（此变量插入文章的标题）
以下链接的文本：％title（此变量插入文章的标题）

设计选项卡

字体链接：PT Sans
链接字体大小：20px
链接文字颜色：＃5e95c1
使用边框：是
边框颜色：＃5e95c1
边框的宽度：1px
自定义装饰：20px顶部，20px右侧，20px底部，20px左侧

就这样！您现在在导航链接上有帖子标题

导航模块的内容选项

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

上一个链接的文本

为上一个链接定义自定义文本。您可以使用％title变量来包含文章标题。保留空白为默认值。

以下链接的文字

为以下链接定义自定义文本。您可以使用％title变量来包含帖子的标题。保留空白为默认值。

在同一类别中

您可以在此处定义之前和之后的文章是否应使用与当前文章相同的分类法术语。

习惯分类法的名称

如果您在项目或文章上使用此模块，请将此选项留空。否则，请为“在同一类别”选项键入分类法名称，以使其正常工作。

隐藏上一个链接

在这里，您可以选择隐藏或显示上一个链接。

隐藏以下链接

您可以在此处选择隐藏或显示以下链接。

管理员标签

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

导航后的设计选项

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

链接字体

您可以通过从下拉菜单中选择所需的字体来更改链接文本的字体。 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子主题或使用Divi主题选项或Divi Builder页面上的设置添加到页面或网站的自定义CSS样式表中。

自定义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教程：如何在文章中使用导航模块

用例示例：将自定义导航链接添加到博客文章的底部