在 Divi 中的固定标题上切换您的徽标

已发表: 2017-08-31

创建具有不同颜色和大小的徽标的不同版本始终是一个好主意。例如，您可能应该有一个深色和浅色版本的徽标，以便它在不同的背景颜色下看起来很棒。并为您网站的那些狭窄区域提供更小（更少垂直和更多水平）的徽标版本。使用不同版本徽标的最佳位置之一是在固定（或粘性）标题上。

在许多情况下，您的固定标题需要与主标题不同的样式。如果您保留相同的徽标，则在如何设置固定标题的样式方面会受到限制。这是自定义徽标派上用场的地方。使用专门为固定标题定制的单独徽标，您可以随意设置样式。这使您可以更好地控制网站的设计。

在这篇文章中，我将向您展示如何：

当您的固定标题处于活动状态时，将您的徽标切换为不同的徽标。（这可以用一行 CSS 来完成）
在固定标题上反转徽标的颜色。
在固定标题上切换徽标时添加很酷的过渡效果。
切换并将居中的标题徽标移动到固定标题上的默认（左对齐）布局。

让我们开始吧。

抢先看

以下是我们将在本教程中完成的内容的小先睹为快。

这是一个简单的标志开关的样子。

固定标题标志

这是带有过渡效果的徽标开关。

固定标题标志

这是从居中标题样式更改位置的徽标。

固定标题标志

设置

在执行任何其他操作之前，请确保完成以下操作：

安装最新版本的 Divi。
实施一个活跃的 Divi 儿童主题。如果您在设置子主题方面需要帮助，本文将对其进行介绍。如果您需要额外的帮助。请联系我们的支持团队。
制作两个 200×131 的徽标版本，并将它们添加到您的 WordPress 媒体库中。一个标志将用于主标题，一个将用于您的固定标题。如果可以的话，使徽标的固定标题版本更加水平，这样它就不会在较小的固定标题上垂直模糊。这是我正在使用的主标题徽标的示例。这是我的固定标题徽标的示例。请注意，我裁剪了文本以制作一个更简单、更水平的徽标，该徽标非常适合高度较低的标题。无论如何，任何人都不可能阅读该文本，并且该品牌仍在代表中。
使用菜单项设置主菜单。

完成这些步骤后，您就可以开始了。

在 Divi 中的固定标题上切换您的徽标

订阅我们的 YouTube 频道

使用 CSS 切换固定标题上的徽标

在我们开始自定义 CSS 之前，让我们在主题定制器中设置我们的菜单设置。从 WordPress 网站的后端，转到主题定制器 > 标题和导航 > 标题格式，并确保您选择了默认的标题样式。

固定标题标志

然后返回主题定制器中的标题和导航设置。选择主菜单栏并更新以下内容：

菜单高度：105
标志最大高度：80
文字大小：20

固定标题标志

现在回到标题和导航。选择固定导航设置并更新以下内容：

固定菜单高度：60
文字大小：20

固定标题标志

您可以添加其余设置以适合您网站的设计。菜单和徽标高度可能需要根据您的需要进行调整。但是，如果您想添加过渡效果以确保尺寸准确，我建议您保留这些设置。您可以随时回来更改它。

插入 CSS 片段以在固定标题上切换徽标

将徽标图像与固定标题上的另一个图像切换的最简单方法之一是使用 CSS 属性“内容”。如果您熟悉 CSS，这通常是在向 :before 或 :after 伪元素添加内容时使用的。在这种情况下，我们将使用它来插入新内容（您的徽标图像）以替换当前的徽标图像。

为此，请转到 Theme Customizer > Additional CSS 并插入以下 CSS。

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL);
}

固定标题标志

现在用您的实际徽标图像替换“插入新徽标图像”的文本。

要获取 URL，请从 WordPress 仪表板转到您的媒体库，然后单击要添加的图像。您可以在弹出的屏幕右上角找到 URL。

固定标题标志

就是这样。这个简单的解决方案只会在您滚动整个页面时固定标题处于活动状态时，才会用新的徽标替换您的徽标。当您滚动回页面最顶部时，将返回默认徽标。

固定标题标志

反转标志的颜色

如果您只想在固定标题上添加相同徽标的深色或浅色版本，您可能会喜欢此解决方案。

使用 invert CSS 属性，您可以通过几行 CSS 反转徽标的颜色。例如，如果您的徽标是黑色，则反转徽标颜色会将其变成白色。如果徽标为白色，则会反转为黑色。要将此样式添加到您的徽标，请转到主题定制器 > 附加 CSS 并添加以下 CSS（确保删除或注释掉以前添加的 CSS）：

/*********************************
Invert Logo color on fixed header
*********************************/
.et-fixed-header #logo {
-webkit-filter: invert(100%);
filter: invert(100%);
}

检查结果。这是一个黑色标志被倒置为白色版本。

固定标题标志

在固定标题上切换徽标时添加过渡效果

您可能想知道为什么我要介绍另一种（更强大的）在固定标题上切换徽标的方法。主要原因是我们可以在徽标“过渡”到固定标题时为其添加很酷的过渡效果。为此，我们需要将两个徽标图像并排放置以进行样式设置。

将您的新徽标添加到 Header.php 文件

要将另一个徽标图像添加到您的标题中，我们需要将其添加到 header.php 文件中。使用 FTP 客户端（如 FileZilla），转到 Divi 主题文件的根目录并复制 header.php 文件。

固定标题标志

将 header.php 文件的副本粘贴到子主题文件夹的根目录中。

固定标题标志

接下来，使用您喜欢的文本编辑器，打开 header.php 文件。找到包含包含在类“logo_container”的 div 中的徽标图像的链接的 html 代码。

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

我们将添加一个类似的代码片段以在您的标题中显示另一个图像。将以下代码直接复制并粘贴到其下方。

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="INSERT NEW LOGO IMAGE URL" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" class="second-logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

请注意，这是上面原始代码的更新副本，有两个不同之处。首先，它有一个您需要添加的新图像源 URL。其次，它是一个名为“second-logo”的类。

固定标题标志

从您的 WordPress 仪表板，转到您的媒体库并获取要添加的新徽标图像的 URL。

固定标题标志

然后返回到您的 header.php 文件。找到您刚刚创建的代码片段，并将“在此处插入新徽标图像 URL”的文本替换为实际图像 URL。

固定标题标志

保存您的 header.php 文件。

现在您有两个徽标将在您的网站上并排显示。很可能你不想让它那样做，所以让我们添加必要的自定义 CSS 来制作我们的过渡效果。

当徽标在固定标题上切换时添加很酷的过渡

转到 Theme Customizer > Additional CSS 并删除（或注释掉）本文上一部分中的代码（如果适用）。然后添加以下自定义 CSS：

@media all and (min-width: 980px){
/*********************************
show, hide, and transition logos for primary and fixed nav;
must have second logo in header.php file for this to work
**********************************/
#logo {
opacity:1;
display:inherit;
margin: 0 0 0 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#logo.second-logo {
opacity:0;
margin: 0 0 -200px -130px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo {
opacity: 0;
margin: -200px 0px 0 0px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;

}
.et-fixed-header #logo.second-logo {
opacity:1;
margin: 0 0 0 -90px !important;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

/*********************************
hides overflow on header container so logo doesn't show outsite header on transition
*********************************/
#main-header {
overflow: hidden;
}
}

我已经对 CSS 代码进行了注释，以便让您知道代码在做什么。简而言之，CSS 正在减少和增加每个徽标的不透明度，同时将它们移到标题之外。因此，当转到固定标题时，您的徽标具有非常酷的过渡效果。

将中心标题徽标的位置更改为固定标题的左侧

如果您喜欢显示标题的居中标题样式，您可能需要检查该徽标在固定标题上的位置。对我来说，我更喜欢在固定标题上使用默认标题样式（徽标左对齐）。主要原因是因为在我的导航顶部放置徽标往往会使滚动查看页面时固定标题有点太高。

要从居中徽标切换到左对齐徽标，您可以在主题定制器的附加 CSS 框中添加以下自定义 CSS。首先添加代码以快速简便的方式切换徽标：

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL HERE);
}

不要忘记添加您的徽标图像 URL。

然后添加以下内容以调整徽标的位置：

@media all and (min-width: 980px){
/*********************************
change centered logo on centered header style to default layout when fixed header is active
*********************************/
.et_header_style_centered header#main-header.et-fixed-header .logo_container {
float: left;
width: 20%;
}

.et_header_style_centered #main-header.et-fixed-header div#et-top-navigation {
width: 80%;
float: right;
height: 70px;
line-height: 70px;
text-align: right;
}
.et-fixed-header #top-menu-nav {
float: none!important;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
}

注意：请确保您从这篇文章中删除了任何以前的 CSS，这些 CSS 会发生冲突。

就是这样。检查结果。

固定标题标志

在结束

很难不为一个好的标志感到自豪。所以，不要满足于一个小的不符合条件的版本，或者更糟糕的是，将你的标志隐藏在你的固定标题上。将其切换为自定义版本，并实现您的客户会喜欢的平稳过渡。

接下来

默认情况下，Divi 在移动设备上不包含固定标题。但是添加一个真的很简单。在我的下一篇文章中，我将向您展示如何在移动设备上添加带有不同徽标的自定义固定标题。这是一个小偷窥。

我对此很期待。

不要忘记在下面发表您的评论。如果您在设置和编辑子主题文件方面有任何问题，请联系我们的支持团队。

干杯。