使用 Extra 構建產品評論網站 - 第 3 部分

歡迎閱讀有關如何使用 Extra 開發產品評論網站的 4 部分系列的第 3 部分。 如果您正在絞盡腦汁思考如何開始開發產品評論網站，那麼本系列適合您。 憑藉其內置的評論功能和智能帖子分類，Extra 專門用於在幾分鐘內創建漂亮的評論、產品帖子模板、大型菜單和類別佈局。 和我一起探索 Extra 的力量。

在本系列的第 2 部分中，我們使用 Extra 的內置設置和 Visual Builder 創建了我們的產品評論帖子模板。 使用新的帖子模板，您可以添加其他帖子並將它們分配到相應的類別。

今天我們將使用 Extra 的類別構建器構建兩個類別佈局。 第一個佈局將在您的主頁上顯示帖子/產品評論，突出顯示最新和最受歡迎的評論。 第二個佈局將使用輪播滑塊模塊在一個頁面上展示所有類別。 完成本教程後，您將為設計良好的產品評論網站奠定良好的基礎。

這是我們將要構建的內容的先睹為快

準備設計元素

由於類別佈局在很大程度上取決於帖子內容，因此請確保添加了足夠的帖子，以便您可以了解添加自己的內容後網站的外觀。 正如本系列的第 2 部分所討論的，我的類別佈局填充了 4 個類別，每個類別中有 3 個產品。 我正在使用來自 shutterstock 的庫存圖片作為我帖子的特色圖片。

為了設計類別佈局，我們將使用 Extra 的 Category Builder 和一些自定義 CSS。

讓我們開始吧。

使用 Extra 構建產品評論網站 - 第 3 部分

訂閱我們的 YouTube 頻道

為主頁構建類別佈局

默認情況下， extra 使用主頁的類別佈局。 要創建自定義佈局，請從 WordPress 儀表板側邊欄轉到Extra > Category Building 。 找到名為“主頁”的類別佈局，然後將鼠標懸停在它上面並選擇編輯。

接下來，單擊紫色構建器菜單上的“清除佈局”以擦除當前的默認佈局。

現在我們可以開始構建我們的自定義佈局。 首先在標準部分的行中添加三分之二的三分之一列。

在左側（三分之二）列中，添加一個精選帖子滑塊。

更新特色帖子滑塊模塊設置如下：

在內容選項卡下...

分類： 全部
僅顯示精選帖子：[在您決定要展示哪些帖子之前，我會保持關閉。 您可以在帖子編輯器頁面的“額外設置”框中將某個帖子指定為特色帖子。]
顯示作者：OFF
演出日期：關閉

在設計選項卡下...

導航箭頭顏色：#ffffff
導航箭頭背景：#000000
字幕背景：rgba(255,255,255,0.4)
標題字體大小：24px
標題文字顏色：#000000
元字體大小：16px
元文本顏色：#000000
自定義邊距：底部 0px

在高級選項卡下...

在 Main Element 文本框中輸入以下自定義 CSS：

border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
margin-bottom: 0px !important;

保存設置

現在將文本模塊添加到右側（三分之一）列並更新文本模塊設置，如下所示：

在內容選項卡下，將以下 html 添加到內容框的文本選項卡：

<h1>Get the Latest Reviews on Popular Products</h1>

<a class="join-cta" href="/reviews" target="_blank">Click to Join</a>

此處的鏈接旨在用作模擬 CTA 按鈕。 您可以選擇隨意使用它。 只需更新 URL 和鏈接文本。

提示：單擊此 CTA 時，您可以使用 Bloom 觸發電子郵件選擇彈出框。 這樣，訪問者今天就可以通過您的電子郵件營銷活動了解產品。 為此，您需要安裝 Bloom、添加彈出表單並集成您的電子郵件提供商。 然後選擇在點擊CSS選擇器“a.join-cta”時顯示彈出窗口，該選擇器對應於上面html代碼中的鏈接類。

您還可以閱讀有關如何在單擊按鈕時彈出bloom optin 表單的更多信息。

現在回到文本模塊設置。

在設計選項卡下...

文本字體大小：40px（桌面）、24px（平板電腦和智能手機）
頁眉字體大小：42 像素（桌面）、38 像素（平板電腦）、28 像素（智能手機）
自定義填充：40px（上）、15px（右）、15px（下）、15px（左）

保存設置

現在轉到行設置，以便我們可以設置行的背景樣式。

然後更新以下內容：

在內容選項卡下...

背景：#ffffff

在設計選項卡下...

使這一行全寬：是
均衡柱高：是

在Advanced Tab 下，將以下自定義 CSS 添加到 Main Element 輸入框：

border-top: 10px solid #121212;
border-radius: 3px;
-webkit-box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
-moz-box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);

保存設置

立即查看您的自定義特色滑塊部分。

到目前為止看起來不錯。

讓我們繼續。 返回類別生成器並在當前部分下方添加一個標準部分，並添加一個帶有文本模塊的單列行。

然後更新文本模塊設置如下：

在內容選項卡下，在內容框的文本選項卡中添加此 html 標題：

<h1 class="subtitle fancy"><span>Product Reviews</span></h1>

在設計選項卡下...

文字方向：居中
標題字體：B（粗體）
頁眉字體大小：48 像素（桌面）、42 像素（平板電腦）、36 像素（智能手機）

保存設置

這將作為下面部分的標題，顯示您的產品評論。

接下來添加具有以下四分之三四分之一列結構的專業部分：

在左側（四分之三）部分，添加兩列行。

在該行的左列中，添加一個帖子模塊

然後通過為模塊分配類別來更新“內容”選項卡下的“帖子模塊設置”。 這樣，帖子模塊將只顯示該類別。 為此，我將選擇“服裝”作為我的類別。

然後更新以下內容：

顯示作者：NO
演出日期：否

保存設置

複製此帖子模塊，以便在左側列堆疊兩個帖子模塊，在右側堆疊兩個帖子模塊。

然後使用不同的類別更新每個模塊中的設置。 我擁有的類別是服裝、電子產品、廚房和健康與健身。

如果要添加顯示視頻評論的帖子模塊，可以在此處添加。 首先，您需要添加一個名為 Video 的新帖子類別，為該類別指定顏色 #222222。 然後創建一個新帖子，為格式選擇“視頻”並將視頻 URL 添加到 Extra 的內置視頻格式選項框。

然後您可以添加您的評論框內容以顯示在視頻下方。

上傳了幾個視頻後，請確保將它們添加到視頻類別。 然後返回主頁的類別生成器，並在包含四個帖子模塊的行下添加一個單列行。 然後從前一行複制一個帖子模塊並添加到新行。 在內容選項卡下的帖子模塊設置中，選擇類別“視頻”。 現在您有一個將顯示視頻的帖子模塊。

在專業部分的右側（側邊欄）區域，我們將添加另外兩個堆疊在一起的帖子模塊。

對於第一個，更新帖子模塊設置以包含“所有”類別。 然後選擇排序方法“最高評分”。

複製該帖子模塊，以便在其下堆疊另一個。 然後將該排序方法更新為“最受歡迎”。

繼續更新帖子以保存您的設置。 到目前為止，佈局應該是這樣的。

接下來複製（或複制）包含標題為“產品評論”的文本模塊的第二個主要部分。

然後在專業部分下拖動（或粘貼）複製的部分。 在新部分中，使用以下 html 更新文本模塊設置內容：

<h2 class="subtitle fancy"><span>Latest Reviews</span></h2>

保存設置

接下來，我們將添加一個博客提要，顯示從最新開始的所有產品評論。

在您剛剛更新的文本模塊下，向列中添加博客提要砌體模塊。 在“博客 Feed Masonry 模塊設置”中的“內容”選項卡下，選擇要在 Feed 中顯示的所有類別。

保存設置

最後，在 Blog Feed Masonry Module 下，添加 Posts Carousel Module。 更新“內容”選項卡下的“帖子輪播模塊設置”以包含所有類別，並選擇“是”以僅顯示精選帖子。

此輪播旨在僅顯示您在創建產品評論帖子時選擇為特色項目的帖子。

現在讓我們看看最終的佈局是什麼樣的。

添加幾行自定義 CSS

為了將設計整合在一起，我們需要添加幾行自定義 CSS。 轉到 Theme Customizer > Additional CSS 並在現有 CSS 代碼的頂部添加以下內容：

.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
border-top: 10px solid;
}

然後，在設置為最小寬度 980px 的媒體查詢括號內，添加以下內容：

.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}

第一個 CSS 片段為模塊添加了一個稍微深一點的陰影和一個更高的頂部邊框。 第二個自定義頂部的“立即加入”按鈕。

嗯，這就是主頁類別佈局。 這是最終結果的樣子：

除了主頁類別佈局，讓我們添加一個更簡單的佈局，以在一頁上顯示我們所有的類別。

構建“所有類別”佈局

由於您已加載所有帖子、設置類別和主題樣式，因此創建此佈局非常簡單。 此佈局的目的是創建一個頁面，在一個頁面上顯示所有類別和產品。 這可以通過多種不同的方式完成，但是使用 Extra，我想利用帖子輪播模塊以類似於您在 Hulu 和 Netflix 等視頻流網站上看到的佈局來顯示類別和帖子。

要添加佈局，請滾動到當前類別佈局的頂部，然後選擇“添加新”。 使用類別構建器將一列行添加到標準部分。 然後在行中添加一個文本模塊。 更新“內容”選項卡下的“文本模塊設置”以在內容框中包含以下 h1 標籤：

<h1 class="subtitle fancy"><span>All Categories</span></h1>

保存設置

然後在文本模塊下添加一個帖子輪播模塊。 在帖子輪播模塊設置中，選擇服裝作為類別。

保存設置

然後在服裝類別帖子輪播下添加一個文本模塊。 在文本模塊設置中，將以下鏈接添加到內容選項卡下的內容框中：

<a href="/category/clothing">view all clothing reviews</a>

URL 和/或鏈接文本可能需要根據您的站點進行更改，但其想法是鏈接到該特定類別的類別頁面，以顯示該類別的所有產品評論。

在設計選項卡下，將文本方向更改為“右”。

保存設置

要以相同的方式顯示接下來的三個類別，請重複添加分配給特定類別的帖子輪播模塊的過程，然後是包含指向相應類別頁面的鏈接的文本模塊。

在構建器右側的類別框中，添加一個名為“所有類別”的新類別，並為此佈局選擇它。 這樣，每當我們鏈接到“所有類別”類別頁面時，都會顯示此模板。

完成後，最終佈局應如下所示。

這是網站上的類別佈局。

您現在可以判斷，因為我們還沒有添加很多產品，但這最終將成為使用帖子輪播滑塊模塊隨機瀏覽每個類別的產品的便捷方式。

這就是今天的帖子。 我希望您喜歡這個關於使用 Extra 構建產品評論網站的 4 部分系列的第 3 部分。

我希望你還沒有感到疲倦，我們的系列還有最後一篇文章。

接下來

在我們系列的最後一篇文章中，我們將自定義產品評論網站的標題和導航元素。 除了創建您的菜單之外，我還將向您展示一種很酷的方式來為您的菜單鏈接分配顏色，這些顏色與整個站點的類別顏色相對應。 我還將向您展示如何通過單擊幾下來構建大型菜單。

我期待著共同構建我們網站的最後一部分。

與往常一樣，請隨時在下面提交評論。