[ad_1]
让我们开始吧！
概观
为了帮助您可视化我们试图实现的结果，让我们看一下最终结果：
免费下载版面
要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用以下方式订阅我们的 Divi Daily 邮件列表 形式 以下。 作为新订阅者，您将在每周一获得更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下方输入您的电子邮件地址并单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
要将部分的布局导入您的 Divi 库，请转到 Divi 库。
单击“导入”按钮。
在可移植性弹出窗口中，选择导入选项卡并选择要从计算机下载的文件。
然后点击导入按钮。
完成后，分区的布局将在 Divi Builder 中可用。
进入教程，好吗？
你需要什么才能开始
首先，您需要执行以下操作：
- 如果您还没有，请安装并激活 Divi主题.
- 在WordPress中新建一个页面，在前端（visual builder）使用Divi Builder编辑页面。
- 选择“从头开始构建”选项。
之后，您将有一块空白画布可以开始在Divi中进行设计。
在 Divi 中创建一个粘性的自下而上的导航栏
第 1 部分：创建水线上方的部分和标题
对于本教程的第一部分，我们将在水线上方创建部分和标题，作为页面的主要标题部分。 该部分将在桌面上全屏显示，以确保该部分占据整个窗口。
添加一行
首先，在默认部分的列中添加一行。
栏目设置
添加模块前，打开版块设置，添加背景如下：
- 背景颜色：# e9f9ff
- 背景图片：[添加图片]
在“设计”选项卡上，更新最小高度和填充。
- 最小高度：100 vh（台式电脑），自动（平板电脑和手机）
- 填充：顶部 20vh，底部 20vh
标题文本
要创建标题文本，请向该行添加一个新的文本模块。
然后使用以下 H1 标头更新内容：
<h1>Above the Fold</h1>
文字设定
在文本设置的设计选项卡上，更新标题字体样式如下：
- 标题字体：魔方
- 标题字体粗细：半粗体
- TT 标题字体样式
- 标题文本对齐方式：居中
- 标题文字颜色：#302ea7
- 标题文字大小：130px（桌面）、70px（平板）、40px（手机）
- 标题字母间距：2px
- 标题线高度：1,3 em
第 2 部分：创建折叠下的部分
为了演示粘性导航栏的功能，我们需要在折叠下方添加一个部分，以便我们有空间滚动。
要创建该部分，请复制我们刚刚创建的水线上方的部分。
更新重复部分的背景。
- 背景颜色：# f4def1
然后给该部分一个大的最小高度，以便我们有空间滚动页面。 这只是一个要填写的部分，而不是页面上的实际内容。
然后通过将单词“Below”替换为“Above”来更新文本模块的内容。
第 3 部分：创建粘性导航栏
要创建从底部到顶部的粘性导航栏，我们的第一步是创建一个一行到一列的新部分。
添加一个新部分和一个新行
在吃水线上方部分的正下方添加一个新的常规部分。
然后在该部分的列中添加一行。
部分背景和填充
打开部分设置并更新背景颜色。
- 背景颜色：#302ea7
然后移除顶部和底部填充，使导航栏的高度更小。
- 填充：0px 顶部，0px 底部
添加可见溢出
为确保下拉菜单保持可见，请按如下方式更新可见性选项：
- 水平溢出：可见
- 垂直溢出：可见
在移动设备上为该部分提供绝对位置
默认情况下，移动下拉菜单将在汉堡包图标下方打开。 如果我们将导航栏保持在底部，如果用户在向下位置点击它，它将隐藏下拉菜单。 为了获得更好的用户体验，我们希望导航栏从平板电脑和手机屏幕上的页面最顶部开始。
为此，请在平板电脑和手机上为该部分指定绝对位置。
- 位置：相对（台式机）、绝对（平板电脑和手机）
为桌面和移动设备添加粘性位置
要将粘性位置添加到导航栏部分，请更新以下内容：
- 粘贴位置：贴在顶部和底部（桌面），贴在顶部（平板电脑和手机）
更新行填充
粘性部分完成后，打开该部分内的行设置并按如下方式更新填充：
- 填充：顶部 10 像素，底部 10 像素
创建导航菜单
部分和行就位后，我们就可以创建导航菜单了。
首先将菜单模块添加到行到列。
菜单内容
更新菜单内容如下：
- 从下拉列表中选择菜单
- 添加徽标图像（我使用的是 122 像素 x 52 像素的图像）
- 移除默认背景色
在“设计”选项卡上，更新以下菜单文本和图标设置：
- 活动链接颜色：#fff
- 菜单字体：魔方
- 菜单字体样式：TT
- 菜单文字颜色：#fff
- 菜单文字大小：16px
- 文本对齐：右
- 下拉菜单行颜色：# e19dff
- 移动菜单文字颜色：#302ea7
- 购物车图标颜色：#fff
- 搜索图标颜色：#fff
- 汉堡菜单图标颜色：#fff
使用边框偏移移动端导航栏的绝对位置
由于导航栏部分在移动设备上具有绝对位置，因此该栏将位于（并切断）页面顶部的上方。 为了解决这个问题，我们需要使用与导航栏/部分相同高度的顶部边框来偏移顶部部分。
在手机上检查导航栏部分的高度
要确定移动设备上导航栏的高度，请在新的浏览器窗口中打开页面的实时版本。 然后你可以将浏览器的宽度减小到 980px 以下以查看移动菜单。 右键单击包含菜单的部分，然后从浏览器上下文菜单中选择“检查项目”选项。 您应该会在显示该部分尺寸（包括高度）的部分下方看到一个工具箱。 在这个例子中，导航栏部分的高度是 72px。
将顶部边框偏移添加到折叠上方的部分
现在我们已经确定了部分的高度，打开顶部（折叠上方）的设置。
在“设计”选项卡下，在平板电脑和手机上添加以下顶部边框：
- 上边框宽度：72px（平板和手机）
- 顶部边框颜色：# 302ea7
由于边框与具有绝对位置的部分高度相同，因此您将看不到边框，因为它只是将部分向下推，以免被切割。
最终结果
发现最终结果！
最后的想法
使用 Divi 的内置位置和粘性选项可以轻松创建从下到上的粘性导航栏。 关键是让折叠上方的部分高度为 100vh，然后添加下面的导航栏部分，该部分粘贴到导航器的底部和顶部。 希望这将有助于在水线上方为您的 网站Web.
这个粘性导航栏最适合单页设计，而不是整体模板。 也就是说，您可以轻松地选择将其用作您的主页设计，并使用构建器为其余页面使用全局标题。 Divi主题.
我期待着您的评论。
为了您的健康！
[ad_2]
