為您的播客創建漂亮的檔案和顯示筆記頁面

昨天，我們使用 Divi 的視覺構建器為您的播客設置了一個主頁，這絕對會給您的聽眾留下深刻印象，但是如果他們想更深入地了解您的節目怎麼辦？

他們將前往美麗的檔案館並展示我今天將教你如何製作的筆記頁。

今天的最終產品：顯示筆記和檔案頁面

頁面本身旨在補充主頁，但不直接反映其元素。

在節目說明頁面上，我想確保任何訪問者都能夠直接在他們的瀏覽器中收聽該劇集，查看該特定劇集的亮點和鏈接，並有機會註冊您的電子郵件列表。

存檔頁面與顯示註釋頁面一樣簡單而實用。 檔案頁面有一個目的：讓您的用戶快速輕鬆地查看您的過往目錄。 這正是這個頁面所做的。 通過對節目的快速摘錄，您的聽眾將能夠瀏覽您的節目以準確找到他們想要收聽的主題。

您需要的資產

就像昨天一樣，你需要一些高分辨率的背景圖片。 我使用的兩個是在 Unsplash 上的這個集合中（其中還包括昨天主頁的背景）。 我在預覽中將它們編輯為灰度，但任何圖像編輯軟件都可以應用黑白/灰度效果或讓您將飽和度滑塊向下移動到 0。

如果您已經建立了主頁，您的生活也會更輕鬆一些，因為您將使用一些相同的樣式。

就是這樣，讓我們開始建造吧！

構建顯示註釋頁面

顯示筆記只是 WordPress 中的“帖子”，因此導航到您的儀表板並轉到帖子 –> 添加新內容。

每次要為節目的單個劇集創建節目備註頁面時，您都需要這樣做。 將其命名為您想要的名稱並將 URL slug 設置為簡單的內容（以便您的聽眾在您的劇集結束後記住它）。

首先，確保您單擊“使用 Divi Builder”。

這應該會打開我們需要的下一組選項。 在頁面的右側，將帖子設置為“全寬”，因為我們不會為我們的節目筆記使用側邊欄。 並將帖子標題設置為“隱藏”，以便帖子本身的作者、評論和日期等元數據不會顯示。

然後你會想要進入 Visual Builder 並看到一個令人愉快的空白網頁。

您要做的第一件事是單擊頁面左上角藍色部分中的齒輪圖標以進入部分設置。

從那裡，上傳您的背景圖片。 進一步向下滾動到設置並打開使用視差效果。 將視差方法保留為默認的“真實視差”。

保存這些設置，您應該會看到如下內容：

上面的最終產品不完全是什麼，是嗎？ 我們將不得不通過向頁面添加內容來擴展它。

單擊綠色 + 並插入單列行（左上角的行）。

接下來，您會很高興您已經完成了昨天的主頁。 一旦你選擇了你的行，你就會看到一個窗口，要求你選擇一個元素。 您將通過單擊“從庫中添加”來選擇我們昨天保存的播客播放器。

我簡單地將我的命名為“Podcast Episode”，但如果你選擇了不同的東西，請確保你選擇它。

Badabing-badaboom，你有一個播客劇集像魔法一樣添加到你的節目筆記頁面。

請記住，您必須為每個新節目備註頁面編輯標題和媒體（以及可能的劇集藝術）。 您剛剛添加的是您保存的內容的精確副本。

您的實際節目註釋將直接放在播客播放器下方，因此將鼠標懸停在播放器上並點擊黑色 +。 向下滾動，直到看到文本模塊。 將其添加到頁面。

在“文本設置”的“內容”選項卡下，將您的筆記輸入到所見即所得的編輯器中，然後轉到“設計”選項卡。

在“設計”選項卡中，更新以下選項：

文字顏色：淺
文本方向：左
文字字體：特殊精英
文字字體大小：20px
文字文字顏色：#ffffff

保存它，您應該會看到一個閃亮的新文本塊和一個與此類似的頁面。

我們即將到達演出筆記頁面的主要部分——只需要兩個元素。 再次點擊黑色+，添加昨天保存的按鈕模板。

不是像昨天那樣將用戶帶到檔案館，而是將他們返回到主頁。 導航到按鈕的設置頁面並將 URL 設置為簡單的反斜杠。

為什麼不把它轉到 /home 或類似的地方？ 好吧，無論如何，僅使用反斜杠會將您的用戶帶到您網站的首頁。 而且由於您在同一站點上，因此即使移動域也不會影響按鈕。 它總會回家的。 這正是你想要它做的！

完成並填寫按鈕的其餘設置。 在同一窗口中打開它，將按鈕文本更改為“返回主頁”（或您喜歡的任何內容），並將按鈕對齊方式更改為“右”（既不妨礙內容，又使其站立反對內容）。 設計選項卡的樣式應該是從 Divi 庫中導入的。

您現在將擁有一個不錯的導航按鈕，我建議將其添加到您的庫中，以便您可以在多個頁面上使用它。

最後，讓我們設置電子郵件註冊，這樣我們就可以獲得那些甜蜜的電子郵件地址，讓用戶了解有關播客的最新消息。

為此，我們需要一個全新的單列行。 因此，單擊綠色 + 並將其放置到位。 然後從下拉列表中添加一個 Email Optin 模塊。 就像昨天一樣，導航到模塊設置並在 WYSIWYG 編輯器中輸入您想要顯示的任何標題以及您想要的任何號召性用語文本。

此外，為按鈕本身添加您想要的任何文本。 我選擇了完​​全獨特的“訂閱”。

選擇您的電子郵件服務提供商並列出（請記住從昨天開始，如果您不選擇列表，完整模塊將不會在頁面上顯示）。

將背景 RGBA 更改為透明。

在“設計”選項卡下，將標題字體設置為“Special Elite”，將大小設置為 36px。

您還將正文字體設置為“Special Elite”並將大小設置為 16px。

與該站點的幾乎所有其他內容不同，我們確實希望為 Email Optin 模塊使用邊框。 因此，將“用戶邊框”移至是，並將顏色設置為 #ffffff，並將自定義填充在所有邊上設置為 15px。

完成後，進入 Advanced 選項卡並將其添加到 Custom CSS 下的 Main Element 以環繞模塊的角：

border-radius:10px;

保存您的工作，您將收到一封電子郵件選擇！

您的節目筆記頁面唯一需要的是保存此模塊以在其他頁面上使用。 由於您希望您的電子郵件選擇在整個站點中保持一致，我們將把它保存為一個全局項目。 將鼠標懸停在模塊上時，單擊“添加到庫按鈕”，並確保選中“使其成為全局項目”框。

現在您有了一個可以跨多個頁面使用的元素。 如果您對其進行任何更改，它們將反映在所有實例中，這與上面的播客播放器和按鈕不同，每個模塊都可以單獨更改。

我的朋友們，這裡是您的 Show Notes 頁面模板！ 我還建議將整個頁面保存到您的庫中，這樣您就可以導入它並更改每集所需的元素。

現在……前往檔案館！ 終點線就在眼前！

建立您的檔案頁面

前往您的 WordPress 儀表板並導航到添加新頁面，將其命名（我的是“檔案”），然後打開 Divi Visual Builder。 十分簡單。

到達那里後，添加一個帶有文本模塊的新單列行。

導航到設置並在 WYSIWYG 編輯器中輸入您的頁面標題。

在 Design 選項卡中，將 Text Color 設置為 Light，將 Orientation 設置為 Center。 將字體設置為“Special Elite”，將字體大小設置為 50px。

為了使文本在移動設備上看起來不錯，請務必將頂部和底部邊距更改為 40px。

保存您的工作，並準備好為檔案添加背景！ 打開藍色 + 框中的設置，然後選擇您的背景圖像並設置視差，就像您為 Show Notes 所做的那樣。 再次，我使用預覽製作了這個灰度。

在“設計”選項卡下，將頂部和底部填充分別設置為 55 像素和 176 像素，這樣無論您的檔案中有多少帖子，整個頁面都可以看到視差效果。

為什麼是 176px 而不是 175？ 因為我是一個叛逆者，這就是為什麼。

當你保存你的工作時，你會看到這個：

接下來，添加一個新的單列行，只是這一次，插入一個博客模塊。 這將顯示您設置的任何 WordPress 循環，我們只希望它是摘錄和標題，以便您的聽眾知道會發生什麼。

前往設置並更新“內容”選項卡中的選項，如下所示：

帖子編號：10（或您認為最適合您網站的任何內容 - 在顯示此數字後會分頁）
內容：顯示摘錄（因為我們希望用戶點擊並收聽播放器中的劇集）
顯示特色圖片：是
網格瓷磚背景顏色：rgba(73,73,73,0.72)

在“設計”選項卡中，更新以下選項：

佈局：網格
標題字體：特殊精英
標題文字顏色：#ffffff
正文字體：特殊精英
正文顏色：#ffffff
元字體：特殊精英
元文本顏色：#ffffff
使用邊框：是
邊框顏色：#ffffff
邊框寬度：1px
邊框樣式：純色

一切就緒後，您還有最後一點樣式要做。 網格本身在每個框中都有尖銳的方角，我們希望獲得 10 像素的邊框半徑，以便與網站的其餘部分相匹配。

導航到您的 WordPress 儀表板 –> Divi –> 主題選項，然後一直向下滾動到自定義 CSS。 將此代碼添加到框中以將各個摘錄框的角變圓：

.et_pb_post {
 border-radius: 10px;
}

請記住，“.et_pb_post”是 Divi 用來整體調整這些框的 CSS 類。

之後，保存您的所有工作。

剩下要做的唯一一件事就是從您的庫中添加“返回主頁”按鈕，您就完成了。 單擊黑色 + 將其添加到與您的博客模塊相同的行。

Hot diggity dog，您剛剛完成了檔案頁面的設置。

恭喜！ 您剛剛完成了檔案頁面的設置。 通過單擊屏幕底部的紫色 + 將您的檔案頁面保存為模板，您可以從您的遺願清單中檢查另一個項目——因為在昨天和今天之間，您剛剛創建了一個功能齊全的播客播放器、主頁、檔案、和個人展示的模板。

綜上所述

就是這樣！ 感謝您關注我的兩個播客頁面教程。 您可以在此鏈接中找到第一個如何使用 Divi 創建漂亮的播客頁面。 如果您有任何問題或意見，請隨時將它們留在下面，我會盡力回答它們！