您想在 Divi 中的帖子之间创建一个粘性导航栏吗？
粘性帖子导航栏是增强任何用户体验的有效方式 网站Web 博客的。 除了网站的主导航之外，帖子导航链接还允许用户轻松跳转到上一篇文章或下一篇文章 您的博客。 而且，如果您将这些后导航链接添加到粘性栏，这些链接将保持可见且更易于访问。
在本教程中，我们将在 poststicky 之间创建一个导航栏 Divi。 为此，我们将使用 Divi 的内置选项将行转换为粘性栏。 接下来，我们将使用文章导航模块来设计“上一篇文章”和“下一篇文章”链接。
此外，我们将在栏中间添加一个帖子标题作为动态内容，提醒用户他们当前正在查看的帖子，为导航栏提供一个很好的“过去、现在和未来”元素。.
让我们开始吧！
概观
下面是我们将在本教程中创建的设计的快速浏览。
你需要什么才能开始
虽然您可以将此粘性文章导航栏添加到 Divi 中的任何博客文章布局或模板中，但我们将使用预制的博客文章模板来加快流程并快速开始设计。
将“Meal Kit”博客文章模板导入 Divi Theme Builder
要开始使用，请下载 Divi's Meal Kit Layout Pack 的免费博客文章模板 . 为此，请访问 博客文章 .
然后输入您的电子邮件以下载 zip 文件。
之后，解压缩文件，以便导入。
要将文件导入主题编辑器，请执行以下步骤：
- 转到 Divi > 主题生成器。
- 单击可移植性图标。
- 在 Portability 弹出窗口中，选择导入选项卡。
- 选择之前下载的解压文件进行导入。
- 点击 « 导入 Divi 主题生成器 模板 ».
- 单击编辑图标以编辑导入的模板。
在 Divi 中创建一个粘性导航栏
第 1 部分：创建粘滞线
为了创建粘性导航栏，我们将使用三列行作为帖子和帖子标题之间导航链接的粘性容器。
在模板布局的第二部分，在包含帖子内容的行下方添加一个新行。
线路设置
打开线路设置。
首先，我们需要将粘性位置添加到该行中，以便我们可以在粘性状态下更新其他设计选项。
在标签下 高级，更新以下内容：
- 粘性位置：粘在顶部和底部
- 顶部粘性限制：部分
- 底部粘性限制：身体区域
为确保列不会在移动设备上堆叠，请将以下自定义 CSS 添加到 主要元素 :
display:flex;
flex-wrap:nowrap;
align-items:center;
在标签下 内容，给处于粘性状态的行添加白色背景色如下：
- 背景：无
- Bakground：#ffffff（粘性）
在设置下 设计，更新以下内容：
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
- 填充：0px（顶部和底部）
在平板电脑和手机上隐藏中间列
要在移动设备上隐藏该列，请打开第 2 列（中间列）的设置并更新可见性选项，如下所示：
- 禁用：手机、平板电脑
第 2 部分：创建文章导航链接
为了为帖子导航提供更多设计灵活性，我们将使用两个独立的帖子导航模块。 在左侧栏中，我们将添加一个帖子导航模块，该模块仅显示上一篇文章的链接。 在右栏中，我们将添加一个仅显示下一个帖子链接的帖子导航模块。
链接到以前的帖子
在第 1 列中，添加一个新的帖子导航模块。
打开模块设置，更新选项卡 内容 如下：
- 上一个链接（文本）：上一个帖子
- 显示以前的帖子链接：是
- 显示下一篇文章链接：否
- 背景：#000000
在标签下 设计，更新以下内容：
- 链接字体：Kumbh Sans
- 链接字体粗细：粗体
- 字体样式：TT
- 链接文本颜色：#ffffff
- 链接文字大小：26px（桌面）、16px（平板电脑和手机）
- 线高：1,3 em
- 内边距：0,9em（上）、0,7em（下）、2em（左右）
由于我们在移动设备上隐藏了中间列，剩下的两个包含导航链接的列现在可以分别占据平板电脑和手机上浏览器宽度的 50%。
也可以看看： Divi：如何在悬停或单击后更改多个元素的样式
为确保导航链接跨越 50% 的视口，请将以下自定义 CSS 添加到 Links CSS 框中以供平板电脑查看：
display:block;
width:50vw;
text-align:center;
float:none;
创建下一篇文章链接
要为下一篇文章创建链接，请复制我们刚刚设计的文章导航模块（带有上一篇文章链接）并将其粘贴到第 3 列（右列）。
接下来，在右栏中打开复制模块的帖子导航设置，并更新以下内容选项卡选项：
- 下一个链接：下一篇文章
- 显示以前的帖子链接：否
- 显示下一篇文章链接：是
- 背景：#ffb100
在标签下 设计，更新链接文本颜色：
- 链接文本颜色：#000000
第 3 部分：创建动态帖子标题
有了两个导航链接，我们就可以在中间列中添加帖子标题作为动态内容了。
这个想法是让用户很好地提醒他们正在阅读的消息，并能够导航到上一条消息和下一条消息。
在中间列中，添加一个新的文本模块。
在标签下 内容，点击图标 “使用动态内容” 在正文区域，然后选择 帖子/档案标题.
添加动态帖子标题后，打开设置 帖子/档案标题 并更新之前的内容：
- 读之前
然后保存更改。
在标签下 设计，更新以下内容：
- 文字字体：Kumbh Sans
- 文字字体粗细：粗体
- 字体样式：TT
- 文字文字颜色：透明（桌面），#000000（粘性）
- 文字大小：16px
- 字母间距：1px
- 线高：1,3 em
- 文字对齐方式：居中
- 最大宽度：96%
- 对齐模块：中心
- 填充：0,5em（顶部和底部）
最终结果
立即下载DIVI！！！
结论
在本教程中，我们展示了在 Divi 中为博客文章模板创建粘性文章导航栏是多么容易。
条形/线条粘性功能也可以通过 Divi 的内置选项轻松调整。 例如，您可以将粘性状态限制为某个部分，或者选择使其仅在浏览器视口的顶部或底部保持粘性。
希望这对您的下一个博客站点有用。 如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
您也可以咨询 我们的资源，如果您需要更多元素来执行创建Internet网站的项目。
不要犹豫，也请咨询我们的指南 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
