南开制作网页：如何用Divi设计一个新颖的导航头

今天的帖子是关于南开制作网页合并两个非常重要的元素在您的网站：标题和导航。这个独特的设计将标题中的多个按钮组织起来，作为一个功能和吸引力的导航菜单。

这个设计灵感来自于私人教练网站通过野生侧设计公司对于那些希望保持简单的网站和需要以一种新的方式展示类别的博客来说，这将起到很好的作用。

如果有的话，我希望这将激励你建立另一个伟大的设计与迪维。

偷窥

你只需要迪维

在本教程中，我将使用Divi可视化构建器来设计这个导航头。我想你会喜欢Divi让你创造出完全独特的东西的简单而有力的方式。

我将为您提供一个可供选择的设计，包括添加图像背景到您的按钮，所以您将希望使用大小为100 px到150 px的图像，如果你走这条路。

标题部分的设计

让我们通过创建一个新页面并部署可视化构建器来让事情顺利进行。默认情况下，会有一个区段等待您在页面顶部编辑。转到区段设置，通过更新以下内容添加背景图像和渐变覆盖：

背景图像：[插入1920 px乘1080 px图像]
背景梯度左颜色：RGBA(127，23，60，0.61)
背景梯度右色：RGBA(127，23，60，0.59)

背景图像上方的位置梯度：是

然后添加一些顶部和底部填充，给我们未来的内容一些喘息的空间。

定制填充：10 vw顶部，10 vw底部

我喜欢用大众汽车长度单位在这里，因为它做了一个很好的工作，保持以上的内容折叠在不同的屏幕大小。

创建行

现在，将行中的列布局设置为1/3、1/5和1/3。

然后编辑行设置，将列2的背景色设置为#ffffff。

并按以下方式更新设计设置：

全宽行：是的
使用自定义水槽宽度：是
排水沟宽度：1
等分柱高：是

这为我们未来的导航按钮在左边和右边创造了更多的空间。设置为1的沟槽宽度消除了列之间的边距，这样我们的按钮就可以很容易地放置在中间列内容的每一边。

设计标题部分

在中间标题部分，我们将堆叠一个文本模块和一个社交媒体跟踪模块。

添加标题

首先向中间列添加一个文本模块，并更新以下内容：

内容：

因为这是一个页面标题，所以我使用了h1标记。我还将字幕文本符号(&)封装在一个具有自定义颜色和字体大小的span标记中，为文本设计添加了一点天赋。

现在转到“设计”选项卡并更新以下内容：

文本字体：Lato
文本颜色：#333333
文本大小：2 vw(桌面)，30 px(平板电脑)，22 px(智能手机)
文本定位：中心

标题字体：蒙特塞拉特
标题字体重量：粗体
标题字体样式：TT
标题文本颜色：#333333
标题文本大小：3 vw(桌面)、40 px(平板电脑)、32 px(智能手机)

定制填充：5vw顶部，2vw底部

添加“社会跟踪图标”

若要添加社交图标，请在文本模块下添加社交媒体跟踪模块。

在模块中添加四个社交网络，每个网络具有相同的背景色：

背景色：#7f173c

然后将项目对齐设置为中心。

设计左列导航头按钮

为了设计左边列上的导航按钮，我们将从设计一个按钮开始，然后复制该按钮，以帮助我们创建其余的按钮。

要创建第一个按钮，向左列添加一个按钮模块，并更新以下内容：

按钮短信：见克里斯蒂娜

在“设计”选项卡…下

按钮对齐：右
为按钮使用自定义样式：是
按钮文本大小：1.5vw(桌面)，16 px(平板电脑)
按钮文本颜色：#333333
按钮背景颜色：#ffffff
按钮边框宽度：4px
按钮边框颜色：#ffff
按钮边框半径：0px
按钮图标：你的选择
按钮图标颜色：#7f173c
按钮图标放置：左
只显示图标上的按钮：不
海关保证金：4PX权利

保存设置。

然后复制该按钮，更新内容(按钮文本、图标、链接url等)。并添加一个自定义的最高边距为5 px。

保存设置。

南开制作网页现在再重复该模块三次，并更新每个模块的按钮内容。在中间列旁边总共应该有五个按钮。

注意，由于我们的行设置为相同的列高，带有按钮的左列的高度也向下拉下中间列以匹配高度。

设计右列导航头按钮

若要在右侧列中创建按钮，请先复制左列中的顶部按钮，然后将其粘贴到第三列中。

然后更新按钮内容(按钮文本、图标、链接url等)并更新下列设置。

按钮对齐：左
按钮图标放置：右
自定义页边距：左4px，右0px

现在，复制您刚刚创建的按钮，并更新间距，使其具有4PX的自定义上限。

保存设置。

然后再复制该模块三次，并更新每个模块的按钮内容。在中间列旁边总共应该有五个按钮。

看看最后的设计。

将图像添加到按钮中

作为另一个设计选项，您可以切换图像按钮图标。为此，您需要使用大小为100 px×150 px的图像。

例如，若要向左列按钮添加图像，请按以下方式编辑按钮模块设置：

背景图像：[输入100×150图像]
背景图像大小：FIT
背景图像位置：中左
显示按钮图标：不
自定义填充物：左2.2em

若要向右列按钮添加图像，请按以下方式编辑每个按钮模块设置：

背景图像：[输入100×150图像]
背景图像大小：FIT
背景图像位置：中右
显示按钮图标：不
自定义填充物：2.2em右

一旦你把图片添加到你的所有按钮，下面是设计的样子。

导航标头的响应选项

现在，该设计将在移动设备上工作，如下所示：

但这可能不是你想要的。您可能需要考虑其他几个选项。

移动隐藏按钮

在移动平台上，这种设计的一个简单而实用的解决方案是将按钮隐藏在平板电脑和智能手机上，只需使用实际的主移动导航菜单就可以了。

要隐藏按钮，只需转到按钮模块高级设置，并检查禁用该模块的平板电脑和智能手机。

结果在平板电脑和智能手机上会是这样的。

高级解决方案：在移动上更改列顺序

如果您想在Mobile上更改列顺序，以便标题部分(当前位于第二列或第二列中)显示在顶部(或首先按顺序排列)，则可以添加几行自定义CSS。

打开可视化生成器底部的主设置菜单，然后单击页面设置按钮。然后在自定义CSS输入框中输入以下内容：

此CSS重新排序列并更改按钮，使其跨越以文本为中心的列的全部宽度。这种方法更改列堆叠顺序在手机上确实派上了用场。

现在转到您的行设置，在“高级”选项卡下，并将类“更改列顺序”添加到css Class输入框中。然后在第2列CSS类输入框中添加“1”，在第1列CSS类输入框中添加“2”，并在第3列CSS类输入框中添加“3”。

您可能需要在平板电脑和智能手机的右上列按钮上添加4PX边距，这样分离才是一致的。

这是最后的结果。

最后思想

南开制作网页这种自定义导航头设计可以是传统导航菜单的唯一替代。它并不意味着替代您的主要导航。事实上，这将非常好地作为博客类别或类似的子导航。

我希望回应的后遗症不会太成问题，所提供的解决方案将是有帮助的。

我期待着听到你在评论关于如何使用这个设计和任何其他想法或问题，你可能有其他想法。