WordPress divi主题

如何在 Divi 中创建从下到上的粘性导航栏

| 4月 26, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

在今天的 Divi 教程中,我们将逐步向您展示如何在 Divi 中从底部到顶部创建一个粘性导航栏。 这将允许导航栏最初停留在页面底部,以获得独特的首屏布局。 然后,一旦您滚动过页面的首屏部分,导航栏将粘在页面顶部,并在页面的其余部分保持不变。 您可以说该页面将“拾取”屏幕底部的菜单,并为您的主菜单和您的网站带来良好的交互效果。

google广告开户

让我们开始吧!

抢先看

为了帮助您可视化我们试图达到的结果,让我们看一下最终结果:

免费下载布局

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

要将部分布局导入 Divi 库,请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中,选择导入选项卡并从您的计算机中选择下载文件。

然后单击导入按钮。

迪维通知框

完成后,部分布局将在 Divi Builder 中可用。

WordPress divi主题

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

之后,您将有一个空白画布开始在 Divi 中进行设计。

在 Divi 中创建从下到上的粘性导航栏

第 1 部分:创建首屏部分和标题

对于本教程的第一部分,我们将创建首屏部分和标题,作为我们页面的主要标题部分。 该部分将在桌面上全屏显示,以确保该部分占据整个视口。

添加行

首先,将一列行添加到默认部分。

divi粘性导航栏从下到上

部分设置

在添加模块之前,打开该部分的设置并添加背景,如下所示:

  • 背景颜色:#e9f9ff
  • 背景图片: [add image]

divi粘性导航栏从下到上

在设计选项卡下,更新最小高度和填充。

fiverr建站WordPress程序员
  • 最小高度:100vh(桌面),自动(平板电脑和手机)
  • 填充:20vh 顶部,20vh 底部

divi粘性导航栏从下到上

标题文字

要创建标题文本,请将新文本模块添加到该行。

divi粘性导航栏从下到上

然后使用以下 H1 标题更新内容:

<h1>Above the Fold</h1>

divi粘性导航栏从下到上

独立站选品工具

文字设置

在文本设置的设计选项卡下,更新标题字体样式如下:

  • 标题字体:魔方
  • 标题字体粗细:半粗体
  • 标题字体样式 TT
  • 标题文本对齐:居中
  • 标题文字颜色:#302ea7
  • 标题文字大小:130px(桌面)、70px(平板电脑)、40px(手机)
  • 标题字母间距:2px
  • 标题行高度:1.3em

divi粘性导航栏从下到上

第 2 部分:创建首屏部分

为了演示粘性导航栏的功能,我们需要添加一个折叠部分,以便我们有一些滚动空间。

要创建该部分,请复制我们刚刚创建的首屏部分。

divi粘性导航栏从下到上

高质量外链购买

更新重复的部分背景。

  • 背景颜色:#f4def1

divi粘性导航栏从下到上

然后给该部分一个较大的最小高度,以便我们有空间向下滚动页面。 这只是代替页面实际内容的填充部分。

divi粘性导航栏从下到上

然后通过将单词“Below”替换为“Above”来更新文本模块内容。

JasperAI 10000字免费额度试用

divi粘性导航栏从下到上

第 3 部分:创建粘性导航栏

要从下到上创建粘性导航栏,我们的第一步是创建一个具有单列行的新部分。

添加新的部分和行

在首屏部分的正下方添加一个新的常规部分。

divi粘性导航栏从下到上

然后向该部分添加一列行。

WordPress备份工具updrafplus

divi粘性导航栏从下到上

部分背景和填充

打开部分设置并更新背景颜色。

  • 背景颜色:#302ea7

divi粘性导航栏从下到上

然后取出顶部和底部填充,使导航栏的高度更小。

  • 内边距:0px 顶部,0px 底部

divi粘性导航栏从下到上

添加可见溢出

为了确保下拉菜单保持可见,更新可见性选项如下:

  • 水平溢出:可见
  • 垂直溢出:可见

divi粘性导航栏从下到上

在手机上给版块一个绝对位置

默认情况下,移动下拉菜单将在汉堡图标下方打开。 如果我们将导航栏保持在底部,如果用户在底部位置单击它,这将隐藏下拉菜单。 为了获得更好的用户体验,我们希望导航栏从平板电脑和手机显示页面的最顶部开始。

为此,请给该部分在平板电脑和手机上的绝对位置。

  • 位置:相对(桌面)、绝对(平板电脑和手机)

divi粘性导航栏从下到上

为桌面和移动设备添加粘性位置

要将粘性位置添加到导航栏部分,请更新以下内容:

  • 粘性位置:粘在顶部和底部(桌面),粘在顶部(平板电脑和手机)

divi粘性导航栏从下到上

更新行填充

粘性部分完成后,打开该部分内行的设置并更新填充,如下所示:

  • 内边距:顶部 10 像素,底部 10 像素

divi粘性导航栏从下到上

创建导航菜单

有了部分和行,我们就可以创建导航菜单了。

首先将菜单模块添加到单列行。

divi粘性导航栏从下到上

菜单内容

更新菜单内容如下:

  • 从下拉列表中选择菜单
  • 添加徽标图像(我使用的是 122 像素 x 52 像素的图像)
  • 取出默认背景色

divi粘性导航栏从下到上

在设计选项卡下,更新以下菜单文本和图标设置:

  • 活动链接颜色:#fff
  • 菜单字体:魔方
  • 菜单字体样式:TT
  • 菜单文字颜色:#fff
  • 菜单文字大小:16px
  • 文本对齐:右
  • 下拉菜单行颜色:#e19dff
  • 移动菜单文本颜色:#302ea7
  • 购物车图标颜色:#fff
  • 搜索图标颜色:#fff
  • 汉堡菜单图标颜色:#fff

divi粘性导航栏从下到上

使用边框偏移移动导航栏的绝对位置

因为导航栏部分在移动设备上具有绝对位置,所以导航栏将位于页面顶部的上方(并切断)。 为了解决这个问题,我们需要使用与导航栏/部分高度相同的顶部边框来偏移顶部。

在移动设备上检查导航栏部分的高度

要确定移动设备上导航栏的高度,请在新的浏览器窗口中打开页面的实时版本。 然后您可以将浏览器宽度缩小到 980px 以下以查看移动菜单。 右键单击包含菜单的部分,然后从浏览器的右键菜单中选择检查元素选项。 您应该在该部分下方看到一个工具箱,显示该部分的尺寸(包括高度)。 对于此示例,导航栏部分的高度为 72px。

divi粘性导航栏从下到上

将顶部边框偏移添加到首屏部分

现在我们已经确定了部分的高度,打开顶部(首屏)部分的设置。

在设计选项卡下,在平板电脑和手机上添加以下顶部边框:

  • 顶部边框宽度:72px(平板电脑和手机)
  • 顶部边框颜色:#302ea7

由于边框与具有绝对位置的部分高度相同,因此您将看不到边框,因为它仅用于将部分向下推以使其不会被切断。

divi粘性导航栏从下到上

最后结果

看看最终结果!

最后的想法

通过使用 Divi 的内置位置和粘性选项,可以轻松地从下到上创建粘性导航栏。 关键是让首屏部分的高度为 100vh,然后添加下面的导航栏部分,该部分粘贴在浏览器的底部和顶部。 希望这将有助于为您的网站添加更加独特和引人入胜的首屏。

这个粘性导航栏最适合单页设计,而不是全局模板。 也就是说,您可以轻松地选择将其用作主页设计,并使用 Divi Theme 构建器为其余页面使用全局标题。

我期待在评论中收到您的来信。

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题