如何创建与 Divi 网站重叠的透明垂直导航

已发表: 2017-07-26

在今天的 Divi 教程中，我们将主要关注在您网站上的垂直导航上做一些特别的事情。 垂直导航是 Divi 主题提供的一个经常被遗忘的选项。 虽然不经常使用，但它可以改变您网站的完整外观并使其达到您想要的水平。 为了帮助您使垂直导航变得更加特别，我们将使其变得透明。 除此之外，我们还将确保透明菜单与您网站的其余部分重叠。

目前，我们没有看到很多带有垂直导航的网站。 但在某些情况下，它可以提供惊人的结果。 在我们之前的一篇文章中，我们向您展示了 12 个 Divi 网站示例，这些网站使用垂直导航来增强其网页设计。

当您使垂直导航与您的网站重叠时，使用透明背景颜色很重要。 如果您没有使用透明背景色，则垂直导航可能会与您网站上的某些内容重叠。 您不想摆脱对网站内容的主要关注，也绝对不想重叠它。

为了演示我们的确切含义，我们制作了一个优雅而简单的示例，我们将向您展示如何制作。 我们将逐步指导您完成实现以下结果所需的不同步骤。

今天的最终结果：一个简单而优雅的垂直菜单

透明垂直导航

在上图中，您可以注意到透明垂直导航可以为您的网站带来的简单性。 除了向您展示如何创建透明垂直菜单外，我们还将提供一些通用设计技巧，您可以在重新创建它以匹配您自己的网站时使用这些技巧。

在 Divi 中创建设计

订阅我们的 YouTube 频道

通用设置

在深入研究我们制作的示例之前，我们将向您提供一些一般信息（和 CSS 代码行），帮助您以简单的方式集成透明导航（无需我们在示例中所做的所有其他修改） .

激活垂直导航

首先，您需要在您的网站上启用垂直导航。 为此，请转到您的WordPress 仪表板 > 外观 > 自定义 > 标题和导航 > 标题格式 > 并启用垂直导航。

在主题定制器中选择您的设计设置

现在您仍在 Theme Customizer 中，您可以像更改顶部导航一样调整垂直导航的所有设置。 返回标题和导航 > 主菜单 > 并进行您希望对主菜单进行的所有修改。

在这部分中，为菜单提供不透明度小于 1 的背景颜色很重要。最好甚至小于 0.5。 确保这应用了背景颜色。 如果您希望将相同的颜色应用于下拉菜单背景颜色，请在那里选择相同的颜色。

添加 CSS 代码

对垂直导航的设计部分进行所有所需的更改后，您可以移至 CSS 部分。 由于我们已经在 Theme Customizer 中，我们将在那里添加自定义 CSS 代码。 当然，您也可以将 CSS 代码添加到特定页面或通过您的主题选项。

我们将为您提供的 CSS 代码有两件事。 首先，它确保您的透明垂直导航和网站重叠。 其次，它可以帮助您调整垂直导航的宽度。 如果您根本不想更改宽度，则可以将那段代码从您的网站中删除，只需使透明的垂直导航和您的网站重叠即可。

这些更改仅适用于您网站的桌面版本。 在宽度小于 981px 的屏幕上，修改将不适用。

在主题定制器中添加 CSS 代码

首先，我们有确保您的网站填满浏览器整个宽度的代码。 将以下代码复制并粘贴到主题定制器的附加 CSS 选项卡中： 

@media (min-width: 981px) { 
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important; 
}
}

此外，如果您还想调整垂直导航的宽度，请复制并粘贴以下 CSS 代码行： 

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important;
}
.et_vertical_nav #page-container #main-header
{
width: 120px;
}
}

重新创建简单的垂直导航

现在我们已经处理了创建与您的网站重叠的透明垂直导航的必要步骤，我们将重新创建示例。 该示例再次如下所示：

透明垂直导航

整体设计技巧

在开始之前，我们将分享一些您应该牢记的一般设计技巧和想法。 这些提示将帮助您充分利用您正在创建的优雅而简单的网站。 让我们来看看我们绝对要强调的两个技巧。

集中一切

首先，确保您将网站上的内容集中起来。 这是不言而喻的，但值得一提。 如果您使用的是与网站重叠的透明垂直导航，那么将您的内容集中起来最适合。 相反，如果您将所有内容都与网站的左侧对齐，则透明垂直导航和内容很可能会混淆。 这可能不是您想要达到的结果。 您希望优先考虑网站的对称性和可读性。

如果您确实选择了不同对齐的内容，请确保检查内容的填充和边距。 如果您相应地修改边距和填充，结果仍然看起来很棒。 但是，您可能需要进行大量手动修改。

到处都是同色背景

如果您为垂直导航使用完全透明的背景色，就像我们在本示例中使用的那样，保持一定的一致性很重要。 您希望垂直导航中的颜色可读且引人注目，因为人们应该能够顺利浏览您的网站。

如果您在透明垂直导航中选择浅色字体颜色，请确保您的背景图像或颜色包含深色。 同样，如果您使用深色字体颜色，请确保您使用的背景图像或颜色具有浅色。

开始创建示例

不用多说，让我们开始重新创建我们向您展示的示例。 首先，创建一个新页面并向其添加一个全角部分。 我们只会向您展示如何重新创建页面的一个部分。 当然，您可以继续并根据需要添加任意数量的部分。 滚动时菜单将保持完全相同。

创建全角标题

在全角部分中，添加一个全角标题。 然后，转到“设计”选项卡，将“文本和徽标方向”设置为“居中”并启用全角标题的全屏模式。

标题设置

此外，向下滚动相同的选项卡并对 Title Text 子类别进行以下更改：

  • 标题字体：Lato Light
  • 标题字体样式：大写
  • 标题字体样式：60（桌面）、50（平板）、40（手机）
  • 标题文字颜色：#FFFFFF

副标题设置

此外，继续滚动并确保副标题文本子类别的设置如下：

  • 副标题字体：Lato Light
  • 副标题字体大小：22px（桌面和平板电脑），19（手机）
  • 副标题文字颜色：#c4c4c4

按钮设置

最后，对 Design 选项卡的 Button 子类别进行以下更改：

  • 为按钮一使用自定义样式：是
  • 按钮一文本大小：15（台式机和平板电脑），12（手机）
  • 按钮一文本颜色：#000000
  • 按钮一背景颜色：#FFFFFF
  • 按钮一字体：Lato Light
  • 按钮一字体样式：粗体和大写

渐变背景设置

接下来，打开全宽部分的设置，在内容选项卡的背景子类别中添加带有渐变叠加的背景图像。 根据您使用的背景类型和颜色，添加匹配的颜色。

在我们的示例中，我们使用深色背景。 因此，我们将从渐变中的黑色开始。 我们与背景图像匹配的另一种颜色是'rgba(0,49,109,0.43)'。

此外，我们用于渐变颜色的设置如下：

  • 渐变类型：线性
  • 梯度方向：87度
  • 起始位置：0%
  • 结束位置：62%

继续，添加背景图像并应用以下设置：

  • 背景图片尺寸：封面
  • 背景图片位置：中心
  • 背景图像重复：不重复
  • 背景图像混合：叠加

主题定制器的变化

对于下一步，我们需要在 Theme Customizer 中进行一些其他修改。 如果您在 WordPress 仪表板上，请转到外观 > 自定义 > 标题和导航 > 主菜单栏 > 并进行以下更改：

  • 标志最大高度：83
  • 文字大小：14
  • 字母间距：0
  • 字体: Lato Light
  • 字体样式：大写
  • 文字颜色：#FFFFFF
  • 活动链接颜色：#FFFFFF
  • 背景颜色：#FFFFFF
  • 下拉菜单背景颜色：rgba(221,153,51,0)
  • 下拉菜单行颜色：#1E73BE
  • 下拉菜单文本颜色：#FFFFFF

在主题定制器中添加自定义 CSS 代码

当您仍在 Theme Customizer 中时，我们将添加所需的 CSS 代码行，以使布局看起来像它的样子。

代码的第一部分在使用垂直导航时删除了网站的左边距。 第二部分使菜单更靠近左侧。 第三部分为菜单中的每个页面放置了一个上边距和一个下边距。 第四部分为标志添加顶部边距并删除标志后的边距。 最后，我们通过移除顶部填充来确保菜单在徽标和菜单项之间保持相同的距离。 这些更改也适用于滚动时的菜单。 因此，整个网站的菜单看起来都是一样的。 

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
#top-menu li {
margin-top: 15px;
border-bottom: 1px solid #FFFFFF;
}
.et_vertical_nav #main-header #logo {
margin-top: 80% !important;
margin-bottom: 0px !important;
}
.et_vertical_nav.et_vertical_fixed.et_header_style_left .et-fixed-header #et-top-navigation, .et_vertical_nav.et_vertical_fixed.et_header_style_split .et-fixed-header #et-top-navigation {
padding-top: 0px !important;
}}

最后结果

由于您在整篇文章中遵循的所有步骤，您应该在您正在处理的网站上获得以下结果：

透明垂直导航

包起来

在这篇文章中，我们向您展示了如何制作与您的网站重叠的透明垂直导航。 此外，我们还分享了一个优雅而简单的设计，如果您一步一步地遵循这篇文章，您可以将其用于您自己的网站。 如果您有任何问题或要求，请务必在下面的评论部分发表评论，以便我们与您取得联系！

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