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

已發表: 2017-09-13

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

在本系列的第 1 部分中，我們通過設置主題選項和主題定制器設置開始了構建產品評論站點的旅程。

今天，我們將通過添加我們的第一個產品評論作為新帖子並使用 Divi Builder 和額外主題設置自定義該帖子的帖子佈局來開始運行。完成本教程後，您將擁有一個已保存的帖子模板，您可以從庫中提取以輕鬆創建其餘帖子。

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

產品審核

準備設計元素

由於我們將在本系列的這一部分添加我們的產品，因此您將需要您的產品圖片。在本教程中，我將有 4 個類別，每個類別中有 3 個產品，因此我將使用總共 12 張圖像。我正在使用來自帶有白色背景的快門股票的股票圖像，使其看起來更乾淨。

為了設計帖子佈局，我們將使用 Visual Builder 和一些自定義 CSS。

讓我們開始吧。

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

訂閱我們的 YouTube 頻道

添加您的第一個產品評論作為新帖子

從 WordPress 儀表板，轉到帖子 > 添加新內容。

每個帖子都將是您的產品評論，因此您的帖子名稱應該是您的產品名稱。由於我的產品將成為健身追踪器，因此我將輸入“健身追踪器”作為我的帖子標題。

注意：如果您還沒有，現在是將您的永久鏈接設置設置為“帖子名稱”選項的好時機，這樣您的 URL 將只包含產品名稱（當然是您的偏好）。

接下來，單擊“使用 Divi Builder”按鈕，然後單擊“使用 Visual Builder”按鈕部署 Visual Builder。

產品審核

在 Visual Builder 中，插入一個單列行並向該列添加一個文本模塊。

產品審核

在文本模塊設置的內容選項卡中，在內容框中輸入以下 html（確保您在“文本”選項卡而不是“視覺”選項卡中工作）：

<h2 class="subtitle fancy"><span>Product Description</span></h2>

這將作為我們不同部分的“花哨”字幕。稍後我們將使用自定義 CSS 對其進行樣式設置。

在 h2 標籤下方，您可以添加產品描述文本。我現在正在使用一些“lorem ipsum”。

產品審核

在當前行下方添加另一個單列行，並在其中添加另一個文本模塊。在文本模塊設置中，通過在內容部分的文本選項卡中插入以下“優點和缺點”h2 標籤來添加另一個 html 副標題。

<h2 class="subtitle fancy"><span>Pros & Cons</span></h2>

產品審核

這將開始您的產品評論的優缺點部分。

接下來在前一行下添加一個二分之一（兩列）行。在左欄中添加一個文本模塊並放置一個帶有文本“Pros”的 h3 標題。

產品審核

現在復制該文本模塊並將復制的模塊拖到右列。將新文本模塊中的 h3 標題更改為“Cons”。

提示：在 Visual Builder 中，您只需單擊文本框並鍵入新標題，而無需打開設置。

產品審核

接下來我們將使用 blurb 模塊在 Pros 和 Cons 標題下添加一些子項。

在左欄中，在“Pros”文本模塊下，添加一個 Blurb 模塊。在 Blurb 設置的內容選項卡中，在內容框中添加一行文本（我現在使用的是虛擬文本）。

產品審核

然後向下滾動並選擇“使用圖標”。在出現的圖標框中，選擇加號。

產品審核

單擊“設計”選項卡並更新以下內容：

圖標顏色：#ffffff

圓圈圖標：是

圓圈顏色： #5bd999

圖像/圖標放置：左

產品審核

保存設置

複製（或複制）該模糊模塊並將其拖（或粘貼）到“缺點”文本模塊下。然後使用以下圓圈顏色更新 Blurb Settings Design 選項卡： #e6567a

產品審核

保存設置

現在復制每列中的模糊模塊幾次，因為我們不知道某個產品可能需要多少個。

產品審核

現在轉到包含您的優缺點的行設置。在內容選項卡下，更新以下內容：

第 1 列背景：#f8f8f8

第 2 列背景：#f8f8f8

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

使用自定義裝訂線寬度：是

天溝寬度：1

均衡柱高：是

第 1 列填充：20px（上）、20px（右）、20px（下）、20px（左）

第 2 列填充：20px（上）、20px（右）、20px（下）、20px（左）

產品審核

在Advanced 選項卡下，將以下自定義 CSS 添加到Column 1 Main Element文本框：

 border-top: 10px solid #5bd999;

將以下 CSS 添加到Column 2 Main Element文本框：

 border-top: 10px solid #e6567a;

產品審核

提示：如果您有 Extra 的更新版本，您應該能夠將新動畫應用到您的網站。通過轉到“設計”選項卡下的“行設置”並選擇所需的動畫樣式，將動畫添加到“優缺點”行。這將使您的優點和缺點部分在用戶向下滾動頁面時彈出。

保存設置

複製（或複制）包含副標題“優點與缺點”的第二行，並將其拖（或粘貼）到我們剛剛完成的行下。然後將 h2 標題更改為“規格”。

產品審核

複製包含優缺點列表項的兩列行，並將其放在標題為“Specifications”的新文本模塊下。從列中刪除包含標題“Pros”和“Cons”的兩個文本模塊。

產品審核

現在單擊左欄中第一個模糊模塊的模糊設置。

在內容選項卡下，將圖標更改為複選標記。

在設計選項卡下，將圓形顏色更改為 #222222。

保存設置

現在刪除其他模糊模塊，並通過複製並將它們拖到正確的位置，將它們替換為剛剛更新的模塊。

產品審核

現在轉到“行設置”並將“第 1 列主元素”文本框和“第 2 列主元素”文本框中的自定義 CSS 替換為以下內容：

border-top: 10px solid #222222;

保存設置

現在我們需要添加到這個帖子佈局的最後一件事是“購買”按鈕。繼續創建一個新的單列行並添加一個Button Module 。然後更新按鈕模塊設置如下：

在內容選項卡下...

按鈕文字：立即購買

按鈕 URL：[輸入 URL]（這很可能最終會成為第三方網站的附屬鏈接）

網址打開：在新標籤中

在設計選項卡下...

按鈕對齊：居中

文字顏色：深色

為按鈕使用自定義樣式：是

按鈕文字大小：30px

按鈕文字顏色：#222222

按鈕懸停文本顏色：#5bd999

按鈕懸停背景顏色：#ffffff

按鈕懸停邊框顏色：#5bd999

產品審核

這就是您的產品帖子佈局的內容部分。確保保存頁面。保存頁面後，退出可視化構建器以從 wordpress 儀表板編輯帖子。

為您的帖子添加評論

向下滾動到帖子編輯器頁面的底部，找到標題為“查看框內容”的框。

產品審核

這個對 Extra 的智能添加允許您為您的帖子添加產品評級。評級系統被設計成有一個或多個故障。細分是構成整體評級的一個組成部分。例如，如果您要對相機進行評級，則細分示例包括設計、性能、電池壽命等……這些是相機的組成部分，您可以向其中添加單獨的評級百分比。 Extra 將根據這些組件計算總體評分百分比，並將其顯示在 Review 框中。審閱框還具有用於審閱框標題、摘要和摘要標題的有用輸入區域。

要添加評論，請使用以下內容更新評論框內容：

評論框標題：[為評論框輸入標題]（我建議“產品評論”或“編輯評論”）

摘要：[輸入摘要]

摘要標題：[輸入摘要的標題]（我只是使用“摘要”來保持簡單）

接下來添加四個帶有標題和評級百分比的細分，如下所示：

故障 #0

標題：設計

評分：85%

故障 #1

標題：性能

評分：90%

故障 #2

標題：電池壽命

評分：70%

故障 #3

標題：特點

評分：85%

產品審核

既然您的評級已經到位，讓我們在發布之前對我們的帖子進行一些最後的潤色。

為您的帖子分配一個類別

通過單擊類別旁邊的複選框，確保為您的帖子/產品分配正確的類別。在這種情況下，由於這篇文章是針對健身追踪器的，我將選擇“健康與健身”類別。此外，取消選中“未分類”框。

產品審核

以下是我正在使用的產品及其類別的細分：

衣服
- 鞋
- 手錶
- 酷襪子
廚房
- 菜刀
- 混合器
- 砧板
健康與健身
- 健身追踪器
- 重量
- 跑步機
電子產品
- 相機
- 耳機
- 筆記本電腦

在頁面下方不遠處，您會找到“額外設置”框。這些控件允許您覆蓋此特定帖子的默認主題設置。您當然可以根據需要對其進行自定義，但對於此示例，我選中以下框：

精選帖子（這允許將產品作為某些類別模塊上的精選帖子進行拉取。）

隱藏作者框

產品審核

最後，添加您的特色圖片。確保它的寬度至少為 1280 像素，因為我們將為特色圖像使用全寬 0ne 列佈局。

產品審核

發布您的帖子。

繼續並保存此模板，以便您可以為所有產品/帖子復制此過程。要保存模板，請單擊頁面底部可視化構建器菜單中的“保存到庫”圖標，輸入模板名稱並單擊“保存到庫”。

產品審核

現在，當您添加其餘帖子時，您可以從庫中加載此模板並填寫新產品評論的內容。然後這個過程會變得更快。

添加自定義 CSS

我們快完成了。我們需要向我們的主題添加一些自定義 CSS 來設置帖子的某些元素的樣式。為此，請從 WordPress 儀表板轉到 Theme Customizer > Additional CSS 並輸入以下內容：

/****************************
comment box background
*****************************/
#comment-wrap {
    padding: 75px 40px;
	background: #fff;
	border-radius: 3px;
	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);
}
@media (min-width: 980px) {
/***************************
Post Header Size
****************************/
h1.entry-title {
    font-size: 48px;
}

/***************************
Fancy Subtitle
****************************/
.subtitle {
  margin: 1em 0 !important;
font-size: 48px;
}
.fancy {
  text-align: center;
  padding-bottom: 0px;
}
.fancy span {
  display: inline-block;
  position: relative; 
  line-height: 1.3em; 
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 4px solid #333;
  border-top: 4px solid #333;
  top: 40%;
  width: 100%;
  max-width: 200px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

/***************************
Star Rating and Social Icons Style
****************************/
.post-footer .rating-stars .rating-star {
width: 50px;
height: 50px;
}

.et_extra_layout .et_pb_column .module-head h1, .module-head .module-filter {
font-size: 28px;
}

.post-footer .rating-stars #rate-title, .post-footer .social-icons .share-title  {   
	display: block;
    font-size: 20px;
}

.post-footer .rating-stars, .post-footer .social-icons {
width: 100%;
margin: 0 auto;
padding: 30px 0;
}

.post-footer .social-icons {
border-bottom: 4px solid #dddddd;
}
}

/***************************
Mobile Adjustments
****************************/
@media (max-width: 980px) {
.subtitle {
font-size: 30px;
text-align: center;
}
}

保存並發布

現在讓我們看看我們的結果。

產品審核