阳泉公司网站设计：如何使用Divi创建导航主页

阳泉公司网站设计有很多方法你可以在你的主页上应用，但是如果你想在你的网站上添加一些额外的触摸，选择一个导航页面作为你的主页也许是可行的。你不会经常看到它，它让你的访问者清楚地看到他们可以从你的网站期待什么。此外，它还将帮助您的访问者浏览不同的网页充满了令人敬畏的内容，你提供视觉导航。

为了向您展示如何用Divi完成它，以一种时尚和优雅的方式，我们已经创建了一个设计，我们将向您展示如何在这篇文章。将会有两个版本：桌面版本和适合平板电脑和手机的版本。

如何使用Divi创建导航主页

重新创建桌面版本

我们将创建导航页面的两个版本：桌面版本和平板和电话版本。这样，我们就可以确保导航页面在所有设备上看起来都很好。和往常一样，我们将从创建桌面版本开始。 

增加新科

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

重新创建第一导航行

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

柱结构

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

背景图像

在Content选项卡上，我们要做的第一件事是向您的行添加一个背景图像。我们建议使用宽度为‘1400 px’和高度‘934 px’的图像，因为它将导致最好的结果。另外，一定要把图像放在“不重复”上。 

对齐

然后，继续到“设计”选项卡，并向您的行添加一个正确的对齐方式。通过这样做，您将在屏幕左侧创建足够的空间来添加描述和链接。

上浆

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

间距

接下来，我们希望在每个导航项之间添加一点空白，这就是为什么我们要在行中添加一个‘5px’的顶部和底部边距。 

能见度

最后，但同样重要的是，我们希望在电话和平板电脑上禁用这一行，因为我们将创建另一行，它将在稍后的文章中与Tablet和Phone相匹配。 

页面描述的文本模块

文本设置

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

· 文本字体：Andika

· 文本字体权重：普通字体

· 文本大小：13 px

· 文本颜色：#000000

· 文本线高度：1.1em

· 文本方向：左 

上浆

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

间距

正如上一步中提到的，我们希望文本模块出现在行的左侧，而不重叠行背景。我们还希望在行图像的顶部和文本模块的开头之间有一些空间，这就是为什么我们也使用一些上边距。

· 最高保证金：150便士

· 左缘：-20 px

· 顶部填充物：10便士

· 底垫：10 px 

分频器模块

能见度

接下来，继续添加一个除法器模块，就在文本模块下面。在可见性子类别中，启用“ShowDivider”选项。 

颜色

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

风格

继续前进，选择“实心”作为分区风格，选择“顶部”作为分区位置。

上浆

最后，将下列设置应用于SING子类别：

· 隔板重量：5 px

· 高度：23 px

· 宽度：47%

· 模块对齐：左 

菜单项文本模块

内容框中的链接文本

一旦您完成了分区模块，继续并添加另一个文本模块就在它下面。这个文本模块将是我们的导航项目。打开设置，输入文本并向其添加链接。

梯度背景色

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

· 第一颜色：#FFFFFF

· 第二颜色：RGBA(12，113，195，0.62)

· 梯度型：线性

· 梯度方向：108德克

· 起始位置：31%

· 期末职位：21%

链接文本设置

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

· 链接字体：Andika

· 链接字体重量：粗体

· 链接字体样式：大写和下划线

· 链接下划线样式：坚实

· 链接文本大小：100 px

· 链接文本颜色：#000000

· 链接线高度：1em  

间距

这个文本模块也需要显示在屏幕的左边，这就是为什么我们要增加左边的页边距。我们还希望分隔模块和这个文本模块之间的空间更小，这是负的上边距进入的地方。为了创建中心水平对齐，我们还将增加一个底部边距。最后，我们希望梯度背景更大，这就是为什么我们使用顶部和底部填充。

· 最高保证金：-33便士

· 底差：250 PX

· 左缘：-20 px

· 顶部填充物：80 px

· 底部填充物：80 px 

克隆第一导航行尽可能多次需要

导航页上的不同导航项将或多或少具有相同的设置。这就是为什么我们建议尽可能多地克隆行，然后进行详细的修改。有三件事你需要改变，让我们看看。

变更行背景

您需要做的第一件事是更改行副本的背景图像。同样，请确保使用宽度为‘1400 px’和高度‘943 px’的图像来获得最佳效果。 

更改菜单项的文本模块

变更链接

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

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

最后，您还需要更改这个文本模块的梯度背景。将第二个渐变颜色更改为“RGBA(224，43，32，0.62)”，并根据新导航项的长度更改起始位置值。如果您有一个相当长的导航项，则需要将开始位置百分比更改为更高的值，直到您看到它到位为止。 

重新创建移动版本

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

重新创建第一导航行

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

柱结构

与桌面版本一样，本专栏也只需要一个列。

上浆

此行的调整大小如下：

· 全宽行：是的

· 使用自定义水槽宽度：是

· 排水沟宽度：1

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

能见度

最后，禁用桌面上的此行，因为我们阳泉公司网站设计将在桌面上显示其他行。 

页面描述的文本模块

文本设置

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

· 文本字体：Andika

· 文本字体权重：普通字体

· 文本大小：13 px

· 文本颜色：#000000

· 文本线高度：1.1em

· 文本定位：中心 

上浆

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

间距

最后，这个文本模块需要一个‘10 px’的顶部和底部填充。正如您所注意到的，在平板和移动版本中不需要保证金值，因为我们选择的是中心对齐。 

菜单项文本模块

内容框中的链接文本

对于移动版本，我们不需要一个分区模块，所以我们将跳过这一步。相反，我们将立即将导航项文本模块添加到前面创建的文本模块下面。这样做之后，在Content选项卡中添加带有链接到ContentBox的文本。 

梯度背景色

我们将为这个文本模块使用的梯度背景与桌面版本一相同：

· 第一颜色：#FFFFFF

· 第二颜色：RGBA(12，113，195，0.62)

· 梯度型：线性

· 梯度方向：108德克

· 起始位置：31%

· 期末职位：21%

链接文本设置

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

· 链接字体：Andika

· 链接字体重量：粗体

· 文本大小：65 px

· 文本颜色：#000000

· 文本行高：1em

· 文本方向：左 

间距

像桌面版本一样，这个导航项目文本模块需要一个顶部和底部填充‘80px’，以使梯度背景更大。 

图像模块

上传图像

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

克隆第一导航行尽可能多次需要

对于移动版本来说，同样的事情也很重要；您可以克隆刚才创建的行，只要需要，还可以添加其他导航项。在每次添加新的导航项时，您需要修改三件事，下面让我们看一看。

更改菜单项的文本模块

变更链接

您需要更改的第一件事是导航项文本模块的ContentBox中的文本和链接。

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

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

变化图像模块

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

结果

一旦您创建了桌面和移动版本，您将拥有一个漂亮的导航页面，它在桌面、平板电脑和手机上都很好看。让我们来看最后的结果。 

最后思想

阳泉公司网站设计创建一个导航页面作为你的主页肯定会给你的访问者留下一个印记。它不仅可以帮助访问者更直观地导航，而且还可以让他们看到一个更详细的偷窥你的网站所提供的东西。如果您有任何问题或建议，请确保您在下面的评论部分留下评论！