在 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 在移動設備上不包含固定標題。但是添加一個真的很簡單。在我的下一篇文章中，我將向您展示如何在移動設備上添加帶有不同徽標的自定義固定標題。這是一個小偷窺。

我對此很期待。

不要忘記在下面發表您的評論。如果您在設置和編輯子主題文件方面有任何問題，請聯繫我們的支持團隊。

乾杯。