如何使用 Divi 為移動設備添加自定義固定標題

已發表: 2017-09-01

如果操作正確，在移動設備上使用固定標題（或導航）可以提高網站的可用性。一般而言，固定導航似乎比標準標題快 22%。在這個高速發展的科技世界裡，即使只有一半，這也是一個相當可觀的數據。

並且，使用 Divi，只需幾行 CSS 即可為您的網站添加固定標題。 Divi 已經允許您使用 Theme Customizer 自定義移動標題，但目前沒有用於為移動部署固定標題的內置設置。在本教程中，我將向您展示如何在移動設備上添加包含以下內容的自定義固定標頭：

與桌面版本不同（更適合移動設備）的徽標。
較短的標題以允許更多可用的查看空間。
一個更大的可點擊漢堡包導航圖標，可以更輕鬆地部署移動導航。
半透明背景，使查看站點時的標題更具侵入性。

這是標題的外觀的小先睹為快。

固定標題

設置

此設置類似於我之前關於在固定標題上切換徽標的帖子。在開始之前，請確保您完成以下操作：

確保您安裝了最新版本的 Divi。
為您的站點創建一個活動的主菜單。
從 WordPress 網站的後端，轉到主題定制器 > 標題和導航 > 標題格式，並確保您選擇了默認的標題樣式。
製作兩個 200×131 的徽標版本，並將它們添加到您的 WordPress 媒體庫中。一個標誌將用於主標題，一個將用於您的固定標題。如果可以，使徽標的固定標題版本更加水平，這樣它就不會在較小的固定標題上垂直模糊。這是我正在使用的主標題徽標的示例。這是我的固定標題徽標的示例。請注意，我裁剪了文本以製作一個更簡單、更水平的徽標，該徽標非常適合高度較低的標題。無論如何，任何人都不可能閱讀該文本，並且該品牌仍在代表中。
使用菜單項設置主菜單。
由於我們將添加自定義 CSS 來完成固定標題，因此我們不需要在主題定制器中自定義標準標題或固定標題選項。但是，如果您想在我的示例中復制菜單和徽標大小的設置，請完成以下操作（這完全是可選的）：

轉到主題定制器中的標題和導航設置。選擇主菜單欄並更新以下內容：
菜單高度：105
標誌最大高度：80
文字大小：20
現在回到標題和導航。選擇固定導航設置並更新以下內容：
固定菜單高度：60
文字大小：20

完成這些步驟後，您就可以開始了。

如何使用 Divi 為移動設備添加自定義固定標題

訂閱我們的 YouTube 頻道

入門

我們將在 Divi 主題定制器的附加 CSS 部分下輸入自定義 CSS 來實現此設計。因為我們將僅針對移動設備，所以我們將所有 CSS 包裝在媒體查詢中，將樣式限制為小於 980 像素的瀏覽器寬度。繼續並開始在附加 CSS 框中輸入以下內容：

@media (max-width: 980px) {



}

固定標題

使用 CSS 創建您的移動固定標題

由於當用戶向下滾動頁面時，Divi 已經添加了一個名為“et-fixed-header”的類，我們可以在自定義 CSS 中使用該選擇器來創建和設置移動固定標題的樣式。

下面的第一組 CSS 使頁眉固定（或粘貼）在頁面頂部，然後將固定頁眉的高度調整為 55px。它還添加了半透明的白色背景色。在媒體查詢括號內的主題定制器中將以下內容添加到您的附加 CSS 中。

/*********************************
style mobile fixed header
*********************************/

.et_fixed_nav #main-header.et-fixed-header  {
position: fixed;
background: rgba(255,255,255,0.8); /*change header background color here*/
height: 55px;
}

.et-fixed-header .logo_container {
height: 55px;
}

.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}

Apple 建議其應用程序的所有可點擊 UI 元素至少為 44×44 像素，以便我們的拇指和手指可以輕鬆點擊它們。這對於移動固定標題中的元素將是一個很好的指南。以下 CSS 使導航圖標為 45px。

/*********************************
make mobile fixed header navigation icon larger
*********************************/

.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}

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

最後，讓我們在固定標題上為徽標添加更多高度，以便我們可以更好地看到它。輸入以下 CSS：

/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}

就是這樣！我們都完成了。
這是用於創建移動固定標題的最終 CSS 集合：

@media (max-width: 980px) {

/*********************************
style mobile fixed header
*********************************/

.et_fixed_nav #main-header.et-fixed-header  {
position: fixed;
background: rgba(255,255,255,0.8);
height: 55px;
}

.et-fixed-header .logo_container {
height: 55px;
}

.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}

/*********************************
make mobile fixed header navigation icon larger
*********************************/

.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}

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

/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}

}

保存您的設置。現在你有一個工作的移動固定標題。

固定標題

在移動固定標題上切換徽標

如果你想為你的移動固定標題使用不同的標誌，你可以用一些 jQuery 很容易地做到這一點。您所需要的只是您將要使用的兩個徽標的 URL。第一個徽標圖像 URL 應該是您已用於站點的默認徽標。第二個徽標圖像 URL 應該是您要用於移動固定標題的徽標。確保將兩個徽標都上傳到媒體庫並檢索 URL。

獲得兩個 URL 後，轉到 WordPress 儀表板並導航到 Divi > 主題選項 > 集成。找到“Add code to the head of your blog”輸入框，輸入以下jQuery腳本：

<script>
    var imageUrl = [
  'ENTER DESKTOP LOGO IMAGE URL',
  'ENTER MOBILE LOGO IMAGE URL',
    ];

    jQuery(window).on('scroll', function() {
        var $header = jQuery('header');
        var $logo = jQuery('#logo');

        if ((jQuery(window).width() < 981) &&
        ($header.hasClass('et-fixed-header'))) {
            return $logo.attr('src', imageUrl[1]);
        };

        return $logo.attr('src', imageUrl[0])
    });
</script>

固定標題

現在將文本“ENTER DESKTOP LOGO IMAGE URL”替換為您當前用於站點的徽標的 URL。

然後將文本“ENTER MOBILE LOGO IMAGE URL”替換為您只想用於移動設備的徽標的 URL。

保存設置並查看結果。

固定標題

瀏覽器支持

在這篇文章中，我僅使用 CSS 創建了固定標題，嚴重依賴 CSS 屬性“position:fixed”。此 CSS 屬性可能與舊版本的移動瀏覽器不一致，尤其是在 iOS Safari 和 Android 上。但是現在“位置：固定”在較新版本的移動瀏覽器上得到了很好的支持（Opera Mini 除外）。

還有其他更強大的插件和 JavaScript 解決方案，但我認為最好為您提供簡單的 CSS 版本。如果此解決方案不適合您，請考慮探索這些選項。

最後的想法

值得一提的是，移動固定標頭可能不利於可用性。因為它們始終會繼續阻止您瀏覽器的頂部，如果您不小心，您可能會無緣無故地浪費寶貴的空間。請記住，並非每個人都有這樣的平板手機。

固定標題

這就是為什麼為移動設備定制固定標題很重要的原因，它為移動設備提供更短的高度、不同的徽標和更大的導航按鈕。通過向您的 Divi 網站添加幾行 CSS，您可以在移動設備上擁有固定標題，而無需使用第三方插件。因此，如果將一個添加到您的下一個項目中是有意義的，那就去做吧。擁有這種功能可以改善您網站的用戶界面。

我期待在評論中收到您的來信。

乾杯!