如何在 Divi 中創建粘性音頻內容欄

添加粘性音頻內容欄是一種很好的方式來展示音頻剪輯，以便在用戶滾動頁面內容時輕鬆訪問。 例如，播客可以將他們的精選音頻“粘貼”在劇集頁面的頂部，這樣用戶在收聽和參與頁面內容的其餘部分時始終可以訪問這些音頻控件。

在本教程中，我們將利用 Divi 的內置粘性位置選項來獲得一些創意，以在 Divi 中構建粘性音頻內容欄。 我們將向您展示如何將頁面上的現有音頻內容（如帶有音頻模塊的一行）轉換為粘性音頻內容欄，一旦用戶在滾動時向上傳遞音頻內容，該內容欄就會停留在窗口頂部。 此外，我們還將向您展示如何在進入粘性狀態（或卡在窗口頂部）後更改欄的內容、樣式和佈局。 這種設計的平滑過渡和功能為在任何 Divi 網站上展示音頻內容提供了獨特的解決方案。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

下面是音頻內容到粘性音頻內容欄的過渡。

這是在滾動頁面時如何與音頻欄互動的情況。

免費下載佈局

要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

第 1 部分：從 Divi Builder 上傳播客預製佈局包

為了在 Divi 中快速啟動我們的粘性音頻欄的設計，我們將使用預製的播客登錄頁面佈局。 從設置菜單中，選擇“從庫加載”加號圖標。 然後找到播客登陸頁面佈局並將其加載到頁面中。

第 2 部分：創建粘性行以保存音頻內容

在預製佈局的最頂部，找到該頂部內的行。 然後在現有行下方添加一個新的單列行。

行設置

在添加任何模塊之前，打開新行的設置並更新以下內容：

• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%
• 填充（桌面）：頂部 10 像素，底部 10 像素，左 10%，右 10%
• 填充（平板電腦和手機）：頂部 10 像素，底部 10 像素，左側 10 像素，右側 10 像素

要使行具有粘性，請轉到高級選項卡並更新以下內容：

• 粘滯位置：粘在頂部

當向下滾動頁面時，這將導致該行（很快將成為我們的音頻內容欄）粘在瀏覽器窗口的頂部。

第 3 部分：添加音頻內容

將音頻模塊添加到行

接下來，將現有（預先設計的）音頻模塊從頂部的第一行移動/拖動到您剛剛創建的新行中。 這將作為我們將包含在粘性音頻播放器中的特色音頻

使用 Blurb 模塊添加 CTA

接下來，我們將創建一個 CTA，它將顯示在我們的粘性音頻內容欄的右側。

要創建 CTA，請複制帶有佈局頂部的播放圖標的模糊模塊。

然後，將復制的模糊模塊粘貼到頂部第二行的音頻模塊下。

第 4 部分：設計音頻內容的樣式

設計音頻模塊

一旦該行繼承了粘性位置，我們就希望我們的音頻模塊具有不同的樣式。 為此，請打開音頻模塊的設置並更新以下粘滯狀態選項：

• 標題文字大小（粘性）：14px
• 標題行高度（粘性）：1.3em
• 標題行高度（粘性）：1.3em

所有這些都是縮小文本和間距，以便音頻內容不會在我們的粘性欄中佔用太多垂直空間。

接下來，我們要更改粘性狀態下音頻模塊的寬度，如下所示：

• 寬度（桌面）：80%
• 寬度（粘性）：100%
• 最大寬度（粘性）：100%

接下來，我們需要調整音頻模塊的間距如下：

• 邊距：0px 頂部，0px 底部
• 填充：頂部 0px，底部 0px，左側 0px，右側 20px

最後，我們需要在高級設置下添加一些自定義 CSS 片段，以便左對齊我們的文本並為我們的音頻播放器按鈕和滑塊添加獨特的顏色。

僅在粘性選項卡下將以下 CSS 添加到音頻標題：

text-align:left;

僅在粘性選項卡下將以下 CSS 添加到Audio Meta 中：

text-align:left !important;

僅在粘性選項卡下將以下 CSS 添加到播放器按鈕：

color: #fe4943;

僅在粘性選項卡下將以下 CSS 添加到播放器滑塊當前：

background: #2c4ca3;

設計 Blurb CTA

接下來，我們將設計我們的簡介模塊，該模塊將用作模擬 CTA 以查看所有劇集。

首先，將文本“All Episodes”添加到簡介的正文內容中。

在設計選項卡下，更新以下內容：

• 正文字體：Lato
• 正文字體粗細：粗體
• 正文字體樣式：TT
• 正文文字大小：10px
• 正文字母間距：2px
• 車身線高：1.3em

然後調整模糊圖標的大小：

• 圖標字體大小：50px

然後調整模塊的大小如下：

• 內容寬度：100%
• 寬度：20%

現在返回內容選項卡並為模糊添加背景，如下所示：

• 背景顏色：#1a1844
• 背景圖片：[添加圖片]
• 背景圖像混合：亮度

我們希望這個模塊最初從視圖中隱藏，直到行達到粘滯狀態並且音頻控制欄卡在窗口頂部。 為此，我們可以添加一些 css 片段，將模塊隱藏在桌面上並在粘性狀態下顯示模塊。

在高級選項卡下，更新以下自定義 CSS：

主要元素 CSS（桌面）：

display:none;

主要元素 CSS（粘性）：

display:block;

模糊圖像 CSS：

margin-bottom: 10px

第 5 部分：在粘性狀態下更改音頻欄內容的對齊方式

現在粘性行只有一列，兩個模塊相互堆疊。 因此，粘滯條會在音頻模塊下方顯示 CTA 簡介。 這將佔用過多的垂直空間，用於粘性條，並且看起來不太好。

為了確保列內的所有內容都水平和垂直對齊，我們。 可以使用 CSS flex 屬性來調整我們模塊在粘性狀態下的佈局。

為此，請打開包含兩個模塊的列的設置。

在高級選項卡下，將以下自定義 CSS 添加到主元素

主要元素（桌面）：

display:flex;
flex-direction:column;

主要元素（粘性）：

display:flex;
flex-direction: row;
align-items:center;
justify-content:center;

就是這樣！ 讓我們回顧一下結果。

最後結果

一旦行處於粘性狀態，這是桌面上的設計。

這是移動設備上的設計。

這裡有一些關於音頻內容粘性欄魔術如何在實時頁面上工作的視頻剪輯。

最後的想法

Divi 的粘性位置選項可以成為網頁設計師的強大工具。 在本教程中，我們向您展示瞭如何使用 Divi 的粘性樣式選項以高級和創造性的方式創建粘性音頻內容欄。 本教程中的一項獨特技術是如何使用 flex 屬性對齊粘性行的內容。 值得慶幸的是，Divi's 有一種方便的方法可以使用高級自定義 CSS 塊將自定義代碼片段添加到粘性狀態，從而為我們提供所需的設計靈活性。 希望這會給你一些靈感，讓你在下一個項目中創建一個。

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

乾杯!