如何使用 Divi 创建导航主页

您可以在主页上应用大量方法，但如果您想为您的网站添加一点额外的触感，选择导航页面作为您的主页可能是您要走的路。 您不会经常看到它，它让您的访问者清楚地了解他们对您的网站的期望。 此外，它还可以帮助您的访问者直观地浏览包含您提供的精彩内容的不同页面。

为了向您展示如何使用 Divi 以时尚优雅的方式完成它，我们创建了一个设计，我们将在这篇文章中向您展示如何重新创建。 会有两个版本； 桌面版和适用于平板电脑和手机的版本。 在我们深入学习本教程之前，让我们先看看最终结果。

桌面上的结果

我们要重新创建的结果在桌面上看起来像这样：

手机上的结果

移动端的结果略有不同，如下所示：

如何使用 Divi 创建导航主页

订阅我们的 YouTube 频道

重新创建桌面版本

我们将创建两个版本的导航页面； 一个桌面版本和一个平板电脑和手机版本。 这样，我们将确保导航页面在所有设备上看起来都不错。 像往常一样，我们将从创建桌面版本开始。

添加新部分

首先创建一个新页面并向其添加常规部分。 在本教程中，我们将只使用一个部分，其中包含我们需要的所有行（桌面版和移动版）。 但是，您也可以选择将桌面版和移动版分为两个部分。

重新创建第一个导航行

正如您在上面的结果预览中所注意到的，每个导航项都有或多或少相同的设计，但有一些不同的细节。 您要创建的每个导航项的大多数设置都是相同的。 这就是为什么我们将向您展示如何详细创建第一行，然后向您展示如何对要添加到页面的其他导航项进行修改。

列结构

首先，为您刚刚添加的行选择一个全角列。 在向其中添加任何模块之前，我们将确保行设置到位，因此请继续打开行设置。

背景图片

在内容选项卡上，我们要做的第一件事是向您的行添加背景图像。 我们建议使用宽度为“1400px”和高度为“934px”的图像，因为这样会产生最佳效果。 另外，请确保将图像放在“不重复”上。

结盟

然后，转到“设计”选项卡并为您的行添加右对齐。 通过这样做，您将在屏幕左侧创建足够的空间来添加描述和链接。

浆纱

接下来，打开 Sizing 子类别，启用“使用自定义宽度”选项并使用“100%”的百分比宽度。

间距

继续，我们想在每个导航项之间添加一点空白，这就是为什么我们要向行添加“5px”的顶部和底部边距。

能见度

最后但并非最不重要的一点是，我们希望在手机和平​​板电脑上禁用此行，因为我们将在本文稍后创建另一行以匹配平板电脑和手机。

页面描述的文本模块

文字设置

行设置完成后，您可以将第一个文本模块添加到行的列，并在“设计”选项卡中为“文本”子类别使用以下设置：

• 文字字体：安迪卡
• 文字字体粗细：常规
• 文字大小：13px
• 文字颜色：#000000
• 文本行高：1.1em
• 文本方向：左

浆纱

向下滚动，打开 Sizing 子类别并添加“18%”的宽度。 一旦我们向它添加负左边距，这个宽度将确保我们的文本模块不会穿过我们行的背景图像。

间距

如上一步所述，我们希望文本模块位于行的左侧，而不与行背景重叠。 我们还希望在行图像的顶部和文本模块的开头之间留出一些空间，这就是我们也使用一些顶部边距的原因。

• 上边距：150px
• 左边距：-20px
• 顶部填充：10px
• 底部填充：10px

分频器模块

能见度

接下来，继续在文本模块正下方添加一个分隔线模块。 在可见性子类别中，启用“显示分隔线”选项。

颜色

然后，转到“设计”选项卡并添加“#FFFFFF”作为分隔线颜色。

样式

继续，选择“实心”作为分隔线样式，选择“顶部”作为分隔线位置。

浆纱

最后，将以下设置应用于 Sizing 子类别：

• 分隔线重量：5px
• 高度：23px
• 宽度：47%
• 模块对齐：左

菜单项的文本模块

内容框中的链接文本

完成分隔线模块后，继续并在其下方添加另一个文本模块。 这个文本模块将是我们的导航项目。 打开设置，输入文本并添加链接。

渐变背景色

仍在“内容”选项卡上时，使用以下渐变背景设置：

• 第一种颜色：#FFFFFF
• 第二种颜色：rgba(12,113,195,0.62)
• 渐变类型：线性
• 梯度方向：108deg
• 起始位置：31%
• 结束位置：21%

链接文字设置

然后，转到“设计”选项卡并将以下设置应用于“文本子类别”的链接选项卡：

• 链接字体：Andika
• 链接字体粗细：粗体
• 链接字体样式：大写和下划线
• 链接下划线样式：纯色
• 链接文字大小：100px
• 链接文字颜色：#000000
• 链接线高：1em

间距

这个文本模块也需要出现在屏幕的左侧，这就是我们添加左边距的原因。 我们还希望分隔器模块和此文本模块之间的空间更小，这就是负上边距的进入位置。 为了创建中央水平对齐，我们还将添加一个底部边距。 最后，我们希望渐变背景更大，这就是我们使用顶部和底部填充的原因。

• 上边距：-33px
• 下边距：250px
• 左边距：-20px
• 顶部填充：80px
• 底部填充：80px

根据需要多次克隆第一个导航行

导航页面上的不同导航项或多或少将具有相同的设置。 这就是为什么我们建议您根据需要多次克隆该行，然后再进行细节修改。 你需要改变三件事，让我们来看看。

更改行背景

您需要做的第一件事是更改行重复项的背景图像。 同样，请确保使用宽度为“1400px”和高度为“943px”的图像以获得最佳效果。

更改菜单项的文本模块

更改链接

然后，打开导航项文本模块并随链接更改文本。

根据文本长度更改渐变背景

最后，您还需要更改此文本模块的渐变背景。 将第二个渐变颜色更改为 'rgba(224,43,32,0.62)' 并根据新导航项的长度更改起始位置值。 如果您有一个很长的导航项，您需要将起始位置百分比更改为更高的值，直到您看到它落到位。

重新创建移动版本

现在我们已经创建了桌面版本，我们还将创建平板电脑和移动版本。 不同模块的样式与桌面版本几乎相同，但在幕后，我们的行的结构完全不同。 由于如果您要克隆每个模块，您必须对它们进行许多修改，因此我将向您展示如何从头开始创建它，而无需从桌面版本克隆任何模块。

重新创建第一个导航行

首先向我们在本文开头创建的部分添加另一行。

列结构

与桌面版本一样，此栏也只需要一栏。

浆纱

该行的大小如下：

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

这些设置将确保我们的行占据屏幕的整个宽度。

能见度

最后，在桌面上禁用这一行，因为我们还有其他行将显示在桌面上。

页面描述的文本模块

文字设置

继续将第一个文本模块添加到行中。 将以下设置应用于文本子类别：

• 文字字体：安迪卡
• 文字字体粗细：常规
• 文字大小：13px
• 文字颜色：#000000
• 文本行高：1.1em
• 文字方向：居中

浆纱

然后，打开 Sizing 子类别，并使用“71%”的宽度和中心模块对齐。

间距

最后，此文本模块需要“10px”的顶部和底部填充。 正如您所注意到的，平板电脑和移动版本中不需要边距值，因为我们选择了居中对齐。

菜单项的文本模块

内容框中的链接文本

对于移动版本，我们不需要分隔器模块，因此我们将跳过该步骤。 相反，我们将立即在我们创建的前一个文本模块的正下方添加导航项文本模块。 完成此操作后，将带有链接的文本添加到“内容”选项卡中的“内容框”。

渐变背景色

我们将用于此文本模块的渐变背景与桌面版本一相同：

• 第一种颜色：#FFFFFF
• 第二种颜色：rgba(12,113,195,0.62)
• 渐变类型：线性
• 梯度方向：108deg
• 起始位置：31%
• 结束位置：21%

链接文字设置

对文本子类别使用以下设置：

• 链接字体：Andika
• 链接字体粗细：粗体
• 文字大小：65px
• 文字颜色：#000000
• 文本行高：1em
• 文本方向：左

间距

与桌面版本一样，此导航项文本模块需要“80px”的顶部和底部填充以使渐变背景更大。

图像模块

上传图片

最后，添加一个图像模块作为您行中的最后一个模块并上传选择的图像。

根据需要多次克隆第一个导航行

移动版也同样重要； 您可以根据需要多次复制刚刚创建的行以添加其他导航项。 每次添加新的导航项时，您需要修改三件事，让我们来看看。

更改菜单项的文本模块

更改链接

您需要更改的第一件事是导航项文本模块的内容选项卡的内容框中的文本和链接。

根据文本长度更改渐变背景

然后，您还可以将第二个渐变颜色更改为 'rgba(224,43,32,0.62)' 并根据文本的长度更改起始位置值。

更改图像模块

最后，您还可以更改该行中图像模块的图像。

结果

创建桌面版和移动版后，您将拥有一个精美的导航页面，在桌面、平板电脑和手机上看起来都不错。 让我们最后看看结果。

桌面上的结果

手机上的结果

最后的想法

创建一个导航页面作为您的主页肯定会在您的访问者身上留下痕迹。 它不仅可以帮助您的访问者更直观地导航，而且还可以让他们看到您网站所提供的内容的更详细的先睹为快。 如果您有任何问题或建议，请务必在下方评论区留言！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！

LanKogal/shutterstock.com 的特色图片