如何在 Divi 中創建浮動橫幅（無需插件）

已發表: 2024-10-08

浮動橫幅有效地吸引用戶注意力並呈現關鍵或重要訊息，而不會破壞整體用戶體驗。當與滾動觸發器結合使用時，這些橫幅會在訪客瀏覽頁面時動態顯示，透過在正確的時刻提供及時的資訊來增強用戶參與度。

本文將指導您在 Divi 中製作具有視覺吸引力且有效的浮動橫幅，而無需任何其他第三方插件的協助。從自訂其外觀到根據滾動行為觸發其顯示，您可以在滾動期間策略性地計時浮動橫幅的出現時間。同時，您也可以順利有效地推廣優惠、公告或號召性用語。

如何在 Divi 中創建基於滾動行為的浮動橫幅（無需插件）

第 1 步：建立或編輯自訂正文模板

在 WordPress 儀表板上，導覽至Divi -> Theme Builder 。在「主題產生器」頁面上，建立一個新的正文模板，或透過點擊「新增全域」或「自訂正文」按鈕或選擇要修改的模板來編輯現有正文模板。

對於此範例，我們將在單一貼文範本中顯示浮動橫幅，因此我們選擇「所有貼文」範本來編輯它。

新增部分

進入自訂正文模板編輯器後，為您的頁面建立一個新部分。為了使浮動橫幅元素在頁面上看起來成比例且不會太大，我們將部分的大小設為25%寬度。

步驟2：新增浮動橫幅內容

新增模組

接下來，我們將新增浮動橫幅內容。點擊該部分內的“ + ”按鈕以新增模組。然後，選擇您想要顯示為浮動橫幅內容的任何模組，例如文字、按鈕、號召性用語模組等。

客製化模組

在添加要用作顯示浮動橫幅內容的方式的模組後，我們接下來要做的就是調整該模組並設定其樣式。您可以根據自己的喜好自訂模組，對於本例（行動呼叫模組），我們應用了一些更改，例如替換文字標題和正文，添加按鈕和連結 URL，更改背景模組的顏色，添加邊距，添加邊框半徑等

新增 CSS 類

接下來，在模組的進階標籤中新增一個名為「 floating-banner-content 」的自訂 CSS 類別。

完成浮動橫幅內容的設計後，不要忘記儲存所有變更。

步驟 3：新增自訂 CSS 和 JavaScript 程式碼片段

接下來，我們將自訂 CSS 和 JavaScript 片段新增到 Divi 主題選項中。

新增自訂 CSS

前往 Divi 主題選項並選擇自訂 CSS（WordPress 儀表板 -> Divi -> Divi 主題選項->常規->自訂 CSS ）。然後，複製下面的 CSS 片段並將其貼上到可用欄位中。

 @media only 畫面和 ( min-width: 768px ) { .floating-banner-content {
  位置：固定；
  頂部：130 像素；
  左：80%；
  變換：translateX(-50%)；
  盒子陰影：0 2px 4px rgba(0, 0, 0, 0.2);
  z 索引：9999；
  不透明度：0；
  可見性：隱藏；
  過渡：不透明度 0.3s 緩入出，可見性 0.3s 緩入出；
}
}

@media only 螢幕和 ( min-width: 768px ) { .floating-banner-content.active {
  不透明度：1；
  可見性：可見；
}
}

新增 JavaScript 程式碼

在 Divi Them 選項頁面上，導覽至整合標籤。接下來，將下面的 JavaScript 程式碼片段貼到將程式碼新增至部落格欄位的 < head > 。

 <腳本>
jQuery(文檔).ready(函數($) {
    var 橫幅 = $('.floating-banner-content');

    $(視窗).scroll(函數() {
        varscrollTop = $(this).scrollTop();
        如果（滾動頂部> = 400）{
            橫幅.addClass('活動');
        } 別的 {
            橫幅.removeClass('活動');
        }
    });
});
</腳本>

新增自訂 CSS 和 JavaScript 片段後，點擊「儲存變更」按鈕以套用變更。

要查看結果，您可以預覽您的貼文或頁面之一（取決於您放置浮動橫幅元素的位置）。

CSS 和 JavaScript 程式碼做了什麼？

CSS 程式碼分解

@media only screen and ( min-width: 768px ) ：
- 此媒體查詢專門針對最小螢幕寬度為 768 像素的裝置（即平板電腦及更大裝置）。它確保浮動橫幅適合可以舒適地顯示它的設備。
.floating-banner-content ：
- 此選擇器以「floating-banner-content」類別為目標元素，該類別應用於包含橫幅內容的模組。
.floating-banner-content的樣式：
- position: fixed; ：即使使用者捲動頁面，它也會保持在原位。
- top: 130px; ：將橫幅的頂部位置設定為距視窗頂部 130 像素。
- left: 80%; ：將橫幅放置在距離左邊緣 80% 的視口寬度處。
- transform: translateX(-50%); ：將橫幅向左平移 50%，使其水平居中。
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); ：為橫幅添加微妙的陰影以獲得深度。
- z-index: 9999; ：確保橫幅顯示在頁面上其他元素的頂部。
- opacity: 0; ：最初透過將其不透明度設為 0 來隱藏橫幅。
- visibility: hidden; ：隱藏橫幅內容，直至其可見。
- transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; ：當橫幅的不透明度和可見性發生變化時應用平滑過渡效果。
.floating-banner-content.active ：
- 該選擇器的目標元素具有“ floating-banner-content ”類，該類也具有“ active ”類。當該類別應該可見時，它會被添加到橫幅中。
.floating-banner-content.active元素的樣式：
- opacity: 1; ：透過將橫幅的不透明度設為 1 使橫幅可見。
- visibility: visible; ：顯示橫幅的內容。

JavaScript 程式碼摘要

此 JavaScript 程式碼根據使用者滾動的位置有效控制浮動橫幅的可見性。

當使用者向下捲動超過特定閾值（在本例中為400 像素）時，橫幅將變得可見。

當使用者向上捲動到閾值以上時，橫幅就會消失。這種行為提供了動態且引人入勝的使用者體驗。

底線

在本文中，我們了解如何在 Divi 中製作動態且引人入勝的浮動橫幅，而無需額外的插件。透過遵循逐步指南，您已經了解如何創建具有視覺吸引力的橫幅、自訂其外觀以及根據滾動行為控制其可見性。

浮動橫幅使您能夠傳遞重要訊息、突出顯示關鍵優惠或增強網站的整體用戶體驗。只需一點創意和定制，您就可以創建一個浮動橫幅，無縫集成到您的網站設計中並吸引訪客。