如何使用 Divi 創建漂亮的播客頁面

你有一個很棒的播客。 但是您的網站可能需要一些工作。 它完成了它的工作，但它並不突出。 永遠不要害怕，播客！ 我有你。

我將教你一種使用 Divi 的簡單方法，不僅可以為你的播客創建一個易於更新的主頁，還可以創建一個時尚的存檔頁面和單個劇集的模板。

今天的最終產品：三段式播客主頁

我想保持設計簡單和盡可能小，同時又不失去一個好的播客必須保持的個性。 此設計適用於名為“你是全明星”的虛構獨立播客，其重點是鞋子和快樂。 我希望設計能夠反映這個主題。

第一部分使用明亮的顏色來吸引用戶的注意力，在左側快速介紹播客的內容，並使用 Divi 音頻模塊呈現播客片段以供立即收聽。

當用戶向下滾動時，美感會略微轉移到 Selected Episodes 部分，該部分再次使用 Divi 音頻模塊來呈現易於訪問的內容，以及訪問節目檔案的選項。 背景是視差以引起對劇集本身的注意。

最後一部分只是電子郵件選擇加入。 每個品牌、播客、博客和公司都需要一個，為了讓它脫穎而出，我將這一部分切換回彩色背景，並使其足夠小，以便第二部分的視差有助於引起對它的更多關注。

下面，我將向您提供有關我如何設計和創建站點的每個模塊、部分和頁面的分步教程。

您需要的資產

這種設計的偉大之處在於它不會佔用 Divi 本身之外的大量資源。 您只需要 5 張用於背景的高分辨率圖像以及用於劇集的任何播客藝術和縮略圖。

我所有的圖片都來自 Unsplash（這個網站的所有圖片都可以在這個集合中找到）。 我使用預覽將其中一些轉換為黑白，但您可以使用任何您想要的圖像編輯軟件。 幾乎所有這些都可以讓您選擇灰度/黑白選項或將飽和度降低到零。

除此之外，您需要的所有資源都在 Divi 中。 那麼，讓我們開始吧！

播客網站主頁：第一部分

首先在您的 WordPress 儀表板中創建一個新頁面並將其設置為您網站的首頁。 （我方便地將我的命名為“家”。）

現在返回編輯您的新頁面。 在右側邊欄的頁面屬性框中，將默認模板更改為空白頁面模板。

首先，我們創建一個三列的行。

在中間的列中，我們要插入一個 Divi 分隔器模塊。

在分隔線設置中，在 Design 選項卡下，將高度設置為 600。這不僅可以保持兩個外部列（該部分的主要內容）分開，而且還將保持該部分足夠高，以便在許多視口分辨率。 （雖然默認情況下在移動設備上保持隱藏狀態。）

現在，在左欄中，我們將添加兩個文本模塊。 我決定對於這個項目，水平標題看起來不合適，所以第一個文本模塊將只是一個標題。

在文本設置的內容選項卡下，將標題添加到內容框。

在“設計”選項卡中，將文本顏色更新為“淺色”並將文本方向更改為“居中”。 然後調整文本字體和大小。 我選擇了字體“Special Elite”，因為它看起來很苦惱，然後將其大小設置為60。同時將文本行高設置為1em。

一旦處理完畢，就該移到第二個文本框了。 我們使用這個作為播客的快速介紹。

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

內容：輸入您的描述文本（我建議您在 iTunes 和其他服務上使用的描述的截斷版本）
背景顏色：rgba(0,0,0,0.4)

在“設計”選項卡中，為文本顏色選擇“Light”，並像在上一個框中一樣選擇“Center”作為文本方向。 還將文本字體設置為 20px 大小的“Special Elite”。

最後，在整個文本框周圍添加 10px 的填充。

之後，前往“高級”選項卡，然後在“自定義 CSS”下，將其輸入到“主要元素”字段中以將文本框的角變圓：

border-radius: 10px;

完成此操作後，您就完成了新站點的前兩列！ 萬歲！ 通過單擊頁面底部的紫色圓圈並點擊綠色保存按鈕來保存您的工作。

優秀作品！

但是，為了使其更具視覺吸引力，我們需要設置該部分的背景，因此進入藍色（部分）框的設置並上傳背景圖像。 我傾向於將我的分辨率保持在 1920×1280 左右。

你現在應該會看到如下所示的內容：

現在，您可能會問自己：“播客怎麼樣？ 這是一個播客網站，我們還沒有對播客做任何事情！” 你是完全正確的。 因此，讓我們通過選擇我們行的第三列中的（您猜對了）音頻模塊來播放一些音頻。

默認的音頻模塊並不完全適合我們為這個網站使用的主題，所以讓我們從這個開始：

對此：

打開音頻模塊的設置。 在音頻字段中，您可以將自己的文件上傳到您使用的任何主機，也可以直接鏈接到您使用的任何播客服務的媒體文件。 我使用 Libsyn，所以我只是獲取了媒體 URL 並將其粘貼進去。

（有趣的事實：通過此模塊在您的網站上點擊播放的任何人也會在您的 Libsyn 儀表板中被計為下載。得分！）

然後，您需要將鏈接到的劇集的標題放在“標題”下，將您的名字放在“藝術家姓名”下（或者您在節目中使用的任何內容。對於我們關於鞋子的虛構播客，除了查克·泰勒之外，我還能選擇其他什麼？ ）。 專輯標題將是您播客的名稱。

接下來讓我們將青綠色更改為完全透明的背景。 顏色無所謂。 只需將透明條一直滑動到底部，或者直到 RGBA 的最後一位數字為 0。

對於封面圖片，最好使用此特定劇集的縮略圖或您在 iTunes 和其他地方使用的播客圖片。

對播客詳細信息進行排序後，進入“設計”選項卡，這樣您就可以真正讓這個播放器成為您的了。

為文本顏色選項選擇“淺色”。 將字體設置為“Special Elite”，標題大小設置為 50px，標題大小設置為 20px。

我還將此特定播放器的頂部邊距設置為 50 像素，因為此邊距使播放器在該部分保持水平居中，並且當您切換到移動設備時，它允許元素之間有良好的間距。 （該設置適用於所有視口尺寸，只要您不單擊智能手機圖標即可。）

因為背景是透明的，所以不需要圓角以匹配第一列中的文本框，所以點擊保存。

因為這個播客播放器是節目的明星，我們不想每次都重新創建它，所以我們要把這個模塊保存到 Divi 庫中，這將使我們能夠輕鬆地在站點周圍複製它，根據我們的需要進行編輯。

輸入您想要的任何模板名稱，不要選中“將此作為全局項目”。 我們將在本系列的第 2 部分中使用該選項，但不是現在。

好的！ 再多一個元素，第一部分就完成了。 （不過別擔心。這是其中最複雜的。）

大多數播客都會保留博客或展示筆記，供聽眾回顧並重溫該集中討論的內容。 你的播客也不例外，我敢肯定。 將鏈接添加到您的播客的展示內容是完全無痛的。

在第三列中創建一個新的文本塊，打開設置，然後鍵入您想要的任何鏈接文本。 對於這個例子，它是不言自明的“閱讀節目筆記”。

單擊工具欄中的圖標以添加鏈接，然後鍵入/粘貼顯示註釋的 URL。 （同樣，在第 2 部分中，我將向您展示如何為節目筆記創建和样式化博客帖子。）因為我將 WordPress 永久鏈接結構設置為“帖子名稱”，所以我所要做的就是輸入我為這一集寫的帖子。

（旁注：通過不輸入域信息而只輸入 slug，您告訴 WordPress 將用戶定向到該頁面，而不管域信息如何。這在您更改域的情況下非常有用，並且有助於防止斷開的鏈接！）

只需保存該鏈接，您就可以開始使用了！

您還應該以與您的播客播放器相同的方式將此模塊保存到您的庫中。

瞧！ 你自己的……等等。 哦哦。 你的節目筆記鏈接是……是……醜！

不過不用擔心。 醜陋的鏈接很容易解決！ 即使您使用文本模塊中的設置更改文本顏色，也不會影響這些單詞，因為它們是鏈接。

前往 Divi –> Theme Options 中的 Custom CSS 字段，然後在底部輸入。

a:link, a:visited, a:active {
    color: #ffffff;
}
 
a:hover {
 color: #ffffff;
 font-weight: bold;
 text-decoration: underline;
}

這將做的是保持文本白色（與網站的其余文本一致，確保它像大多數其他鏈接一樣帶有下劃線，並在您用鼠標懸停在它上面時將其變為粗體。）

確保保存它，現在您的播客播放器已完成！

對於第一部分中的最後一點調整，單擊進入行設置（綠色框）。

選擇“使用自定義寬度”。 確保單位設置為百分比並將滑塊移動到 80。這樣做將使該行佔據用戶擁有的任何大小視口的 80%，從而防止所有內容聚集在一起。

您的播客新網站的頂部也是如此！ 現在它應該看起來像這樣。

保存它，就這樣，大部分工作就完成了！ 多虧了 Divi 的圖書館功能，接下來的幾個部分會飛過去！ 只是看。

播客網站主頁：第二部分

本節將展示我們播客的選定劇集，並允許用戶訪問檔案（與第 2 部分中的節目註釋頁面一樣）。

我們要做的第一件事實際上是通過單擊該部分底部的藍色 + 並添加一個常規部分來創建一個新部分。 這樣做將在可視化構建器中創建另一個藍色框。 添加單列行。

當我們準備好之後，讓我們以與上面相同的方式添加背景，只是這一次，我們要在部分設置中選擇“使用視差選項”。 保持下拉菜單為“True Parallax”而不是“CSS”。

這是我們將在主頁上使用視差的唯一部分。 我認為謹慎使用效果會引起對您想要突出顯示的內容的更多關注。

保存，然後在行中插入一個新的文本框。 輸入“Selected Episodes”，在所見即所得編輯器中將其居中，然後前往設置，將文本字體設為“Special Elite”，文本大小為 50px。 你現在應該看到這樣的東西：

在其下方，通過單擊綠色 + 創建一個新的三列行，然後在第一列中輸入“從庫選項卡添加”。 （你現在不會有所有這些庫選項，但你以後會有！）

選擇“播客集”或您在上面為播放器命名的任何內容。 然後在它下面添加另一個模塊，再次導航到庫，然後添加您保存的“顯示註釋鏈接”模塊。 對所有三列執行此操作，直到您看到：

繼續這樣做，直到您添加了您想要的所有劇集。 編輯每集的標題、專輯封面和顯示註釋鏈接。 我剛剛添加了第二行，只填充了第二列，以使設計適合我選擇的背景。

本節唯一剩下的就是添加一個“瀏覽檔案”按鈕。 通過單擊綠色 + 在最底部創建一個新行並使用單列佈局。 插入一個“按鈕”模塊。 這將創建一個非常難以閱讀的按鈕（當然取決於您的背景），它需要一些簡單的樣式。

打開 Button 模塊的設置並輸入將作為您的檔案的頁面的 URL slug。 我使用明顯的“/archives”，使用文本“Browse the Archives”，然後將按鈕本身居中。

在設置選項卡中，我們單擊“為按鈕使用自定義樣式”，並將背景顏色設置為“#ffffff”，將文本顏色設置為“#000000”（分別為白色和黑色）。

然後我們需要通過將邊框半徑設置為 10 像素來圓化按鈕的角，將字體設置為“特殊精英”，並將添加按鈕圖標從“默認”更改為“否”。

最後，將 Button Hover Border Radius 更改為 10px，以便當鼠標懸停在按鈕上時它會變圓。

我將其保存到我的庫中，以便我可以在進行時在其他按鈕中使用樣式。

這樣，您的第二部分就完成了。 你快完成了，播客！ 你四捨五入第三 - 字面意思！

播客網站主頁：第三部分

這只是靜態背景上的單個模塊。
首先，像我們在第二部分所做的那樣，創建一個帶有雙倍寬度列的新藍色框，然後從菜單中選擇“電子郵件選項”模塊。

您會看到它亮起，這根本不符合我們的設計。 不過，這是一個超級簡單的修復。

導航到模塊的設置並更新以下選項：

標題：我故意將標題留空
內容：添加您的號召性用語簡介並將其居中。
服務提供商：我使用 Mailchimp，所以這就是我在這裡使用的。
背景顏色：透明； 這也使按鈕本身透明。

您剩下要做的唯一一件事就是確保提供您的電子郵件服務，否則在您保存並退出構建器後表單將不會顯示。 如果您使用 Mailchimp，在他們的支持文檔中有關於如何找到您的 API 密鑰的很棒的文檔。

獲得密鑰後，轉到 WordPress 儀表板，再次轉到 Divi –> 主題選項，然後在恰當命名的“Mailchimp API 密鑰”字段中輸入您的 Mailchimp API 密鑰。

保存後，在您擁有一個漂亮的完成頁面之前，您剩下的唯一一步就是為第三部分設置背景。 最終產品應如下所示：

你做到了！ 萬歲！ 您現在擁有一個功能齊全的播客主頁。 是時候打破紀錄並告訴全世界了，對吧？

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

由於您現在擁有一個很棒的主頁，您可以展示您擁有的最棒的內容。 但是，如果您的粉絲成為真正的狂熱分子，他們會想要深入了解您的節目。

明天，我將向您展示如何為您的整個播客劇集檔案整理一些簡單而美麗的頁面，以及每集的單獨頁面，告訴讀者您在每一集中討論的內容並讓他們有機會註冊為您的超級驚人的電子郵件列表。

明天見！

顯示筆記頁面：

檔案頁面：