如何將固定的“最新劇集”音頻欄添加到您的 Divi 標題
已發表: 2020-05-28如果您使用 Divi 託管播客網站，則很有可能您已經在使用內置音頻模塊。 現在，如果您正在尋找一種特殊的方式來讓您的最新劇集成為焦點，那麼您會喜歡這個教程的。 今天，我們將向您展示如何在 Divi 標題中包含固定的最新劇集音頻欄。 我們將包含一個文本模塊循環動畫來吸引對音頻欄的注意，您還可以下載全局標題模板，包括音頻欄！
讓我們開始吧。
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
桌面
移動的
免費下載音頻欄標題模板
要使用免費的音頻欄標題模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
轉到 Divi Theme Builder 並開始構建全局標題
轉到 Divi 主題生成器
首先轉到 WordPress 網站後端的 Divi Theme Builder。
開始構建全局標題
然後，開始構建全局標頭。
使用最新劇集音頻欄創建全局標題
部分設置
背景顏色
進入模板編輯器後，您會注意到一個部分。 打開該部分並更改背景顏色。 我們正在將此全局標題與 Podcast Layout Pack 匹配，但您可以隨意使用您選擇的任何其他類型的設計風格。
- 背景顏色：#1a1844
間距
然後，轉到設計選項卡並在不同的屏幕尺寸中添加一些自定義填充值。
- 頂部填充：50px（桌面），80px（平板電腦和手機）
- 底部填充：0px
盒子陰影
為了將標題與頁面/帖子內容分開，我們還將向我們的部分添加一個框陰影。
- 框陰影模糊強度：80px
- 陰影顏色：rgba(0,0,0,0.3)
添加第 1 行
列結構
繼續使用以下列結構向您的部分添加第一行：
背景顏色
這一整行將專門用於我們最新的劇集音頻欄。 但在我們開始之前，打開行設置並更改背景顏色。
- 背景顏色：#fe4943
漿紗
移至行的設計選項卡，然後更改大小設置。
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 寬度：90%
- 最大寬度：100%
間距
我們也添加了一些自定義的頂部和底部填充。
- 頂部填充：10px
- 底部填充：10px
邊界
然後，我們將轉到邊框設置，我們將添加一些圓角。
- 左下角：10px
- 右下角：10px
盒子陰影
我們還包括一個盒子陰影。
- 框陰影模糊強度：50px
- 陰影顏色：rgba(0,0,0,0.3)
位置
接下來，我們將轉到高級選項卡並修復整行。 我們也將增加行的 z 索引以確保它與我們將添加到我們部分的第二行重疊。
- 位置：固定
- 位置：頂部中心
- Z指數：11
第 1 列可見性
通過將第 1 列溢出設置為隱藏來完成行設置。 這將有助於您在這篇文章的預覽中註意到的文本動畫。 通過將溢出設置為隱藏，我們將確保動畫隱藏在列容器之外。
- 水平溢出：隱藏
- 垂直溢出：隱藏
將文本模塊添加到第 1 列
添加內容
是時候添加模塊了，從第 1 列中的文本模塊開始。添加一些您選擇的副本。
文字設置
轉到模塊的設計選項卡並相應地更改文本設置：
- 文字字體：Open Sans
- 文本字體樣式：大寫
- 文字顏色：#ffffff
- 文本大小：15px
- 文字字母間距：3px
間距
我們還將為我們的模塊添加一些負的左邊距。 這將有助於我們的循環動畫。
- 左邊距：-190%
動畫片
最後但並非最不重要的是，將以下循環動畫添加到您的文本模塊：
- 動畫風格：幻燈片
- 動畫方向：左
- 動畫持續時間：9000ms
- 動畫強度：30%
- 動畫開始不透明度：100%
- 動畫速度曲線：線性
- 動畫重複：循環
將音頻模塊添加到第 2 列
刪除所有內容
在第 2 列中，我們唯一需要的模塊是音頻模塊。 確保刪除內容。
上傳音頻文件
然後，上傳包含您最新劇集的音頻文件。
刪除背景顏色
接下來刪除模塊的背景顏色。
間距
然後，轉到設計選項卡並通過向它們添加“0px”來刪除一些默認填充值。
- 頂部填充：0px
- 底部填充：0px
- 左填充：0px
添加第 2 行
列結構
進入下一行。 此行將包含我們的徽標、菜單和社交媒體圖標。 選擇以下列結構：
漿紗
在不添加模塊的情況下，打開行設置並相應地修改大小設置：
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 最大寬度：100%
間距
接下來刪除所有默認的頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
將菜單模塊添加到第 1 列
選擇菜單
然後，將菜單模塊添加到第 1 列並選擇您選擇的菜單。
上傳標誌
接下來上傳徽標。
刪除背景顏色
然後，刪除默認的白色背景色。
菜單文字設置
移至設計選項卡並按如下方式更改菜單文本設置：
- 菜單字體：Open Sans
- 菜單文本顏色：#ffffff（桌面）、#1a1844（平板電腦和手機）
- 菜單文字大小：15px
- 文本對齊：右
下拉菜單文本設置
我們也在下拉菜單設置中更改下拉菜單行顏色。
- 下拉菜單行顏色：#ffffff
圖標設置
以及圖標設置中的漢堡菜單圖標顏色。
- 漢堡菜單圖標顏色：#fe4943
漿紗
我們將通過在大小設置中分配徽標最大寬度來完成模塊設置。
- 徽標最大寬度：65%
將社交媒體關注模塊添加到第 2 列
添加社交網絡
在第二行的第二列中，我們需要一個社交媒體關注模塊。 添加您選擇的社交網絡。
結盟
轉到模塊的設計選項卡並更改模塊對齊方式。
- 模塊對齊：居中
間距
接下來添加一些自定義邊距值。
- 上邊距：20px
- 底邊距：-4%（僅限平板電腦和手機）
邊界
並通過向模塊的邊框設置添加一些圓角來完成標題。 完成全局標題後，請確保保存所有 Divi Theme Builder 更改並在您的網站上查看結果！
- 所有角落：50vw
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何使用 Divi 的內置音頻模塊發揮創意。 更具體地說，我們已經向您展示瞭如何在自定義的全局標題中包含一個固定的音頻欄。 這是強調播客最新一集的好方法。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。