如何使用 Divi 創建自定義推薦標籤（免費下載！）

已發表: 2020-11-04

對於許多企業來說，推薦是獲得新客戶的關鍵論據之一。 這意味著對您網站上的推薦給予額外的關注永遠不會浪費。 在 Divi 中，有許多不同的方式來分享推薦，例如使用 Divi 推薦模塊。 但是，如果您正在尋找一種更具交互性的方法，您會喜歡本教程的。 我們將向您展示如何在 Divi 中創建自定義推薦標籤。 一旦有人將 Blurb 模塊懸停在左側，相應的推薦就會出現在右側。 此設計中的過渡效果也是無縫的，這有助於您為網站提供額外的定制感。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

推薦標籤

移動的

推薦標籤

免費下載自定義推薦標籤佈局

要使用免費的自定義推薦標籤佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件
免費下載

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

讓我們開始重建吧！

添加新部分

背景顏色

首先向您正在處理的頁面添加一個新部分。 打開部分設置並添加背景顏色。

  • 背景顏色：#ffefdb

推薦標籤

間距

轉到該部分的設計選項卡並添加一些自定義邊距和填充值。

  • 最高利潤率：5%
  • 底邊距：5%
  • 左邊距：5%
  • 右邊距：5%
  • 左填充：5%
  • 右填充：5%

推薦標籤

邊界

還包括一些圓角。

  • 所有角落：20px

推薦標籤

添加第 1 行

列結構

繼續使用以下列結構將第一行添加到該部分：

推薦標籤

間距

尚未添加任何模塊，打開行設置並添加一些底部邊距。

  • 底邊距：3%

推薦標籤

將文本模塊添加到列

添加 H2 內容

是時候添加模塊了，從包含一些 H2 內容的文本模塊開始。

推薦標籤

H2 文本設置

轉到模塊的設計選項卡並相應地更改 H2 文本設置：

  • 標題 2 字體：蒙特塞拉特
  • 標題 2 字體粗細：半粗體
  • 標題 2 文字大小：31px
  • 標題 2 字母間距：-1px

推薦標籤

將分隔模塊添加到列

能見度

在文本模塊的正下方，我們添加了一個分隔線模塊。 確保啟用了“顯示分隔線”選項。

  • 顯示分隔線：是

推薦標籤

線

移至模塊的設計選項卡並將線條顏色更改為白色。

  • 線條顏色：#ffffff

推薦標籤

漿紗

也修改大小設置。

  • 分隔線重量：10px
  • 寬度：14%
  • 高度：10px

推薦標籤

邊界

並通過在邊框設置中添加一些圓角來完成模塊設置。

  • 所有角：10px

推薦標籤

添加第 2 行

列結構

進入下一行。 使用以下列結構：

推薦標籤

漿紗

在不添加任何模塊的情況下，打開行設置並在大小設置中均衡列高。

  • 均衡柱高：是

推薦標籤

第 2 列設置

背景顏色

然後，打開第 2 列設置並應用背景顏色。

  • 背景顏色：#fffbf9

推薦標籤

推薦標籤

間距

轉到列的設計選項卡並在較小的屏幕尺寸上應用一些頂部和底部填充。

  • 頂部填充：
    • 桌面：無
    • 平板電腦和手機：300px
  • 底部填充
    • 桌面：無
    • 平板電腦和手機：300px

推薦標籤

邊界

也包括一些圓角。

  • 所有角：10px

推薦標籤

將 Blurb 模塊 #1 添加到第 1 列

添加內容

是時候添加模塊了，從第 1 列中的第一個 Blurb 模塊開始。添加一些您選擇的內容。

推薦標籤

上傳 1:1 比例圖片

接下來上傳比例為 1:1 的圖片。

推薦標籤

背景顏色

然後，應用以下背景顏色：

  • 背景顏色：#d5d6ea

推薦標籤

圖像設置

也要更改圖像設置。

  • 圖像/圖標放置：左
  • 圖像圓角：100px

推薦標籤

標題文字設置

然後，相應地修改標題文本設置：

  • 標題字體：蒙特塞拉特
  • 標題字體粗細：半粗體
  • 標題字母間距：-1px

推薦標籤

正文設置

我們也在更改正文設置。

  • 正文字體：Lato
  • 正文文字大小：13px

推薦標籤

間距

接下來，我們將通過應用以下填充值在模塊內容周圍添加一些空間：

  • 頂部填充：5%
  • 底部填充：5%
  • 左填充：5%
  • 右填充：5%

推薦標籤

邊界

也添加一些圓角。

  • 所有角：10px

推薦標籤

動畫片

默認情況下，有一個動畫效果應用於 Blurb 模塊的圖像。 我們正在動畫設置中刪除此動畫。

  • 圖像/圖標動畫：無動畫

推薦標籤

CSS ID

要創建推薦標籤設計，我們需要在本教程的末尾添加一些代碼。 為此，我們將在 Blurb 模塊的高級選項卡中添加一個 CSS ID。

  • CSS ID：testimonial-person-1

推薦標籤

模糊圖像和標題 CSS

我們也在高級選項卡中使用了兩行 CSS 代碼。 一個用於簡介圖像，另一個用於簡介標題。 

width: 25% !important;
margin-top: 25px;

推薦標籤

克隆 Blurb 模塊三次

完成第一個 Blurb 模塊後，您可以將其克隆 3 次。

推薦標籤

更改內容和圖像

確保為每個重複的 Blurb 模塊更改內容和圖像。

推薦標籤

更改背景顏色

與背景顏色一起。

  • 重複 1：#fffed6
  • 重複 2：#d7ecd9
  • 重複 3：#f5d5cb

推薦標籤

更改 CSS ID

當然，還有 CSS ID。 使用連續編號。

  • 重複 1：推薦人 2
  • 重複 2：推薦人 3
  • 副本 3：testimonial-person-4

推薦標籤

將報價文本模塊添加到第 2 列

將引用添加到內容框

進入第二列。 在那裡，我們需要的第一個模塊是帶有引號字符的文本模塊。

推薦標籤

文字設置

轉到模塊的設計選項卡並按如下方式更改文本設置：

  • 文字字體：Playfair Display
  • 文字顏色：#ffefdb
  • 文字大小：200px
  • 文本行高：1em

推薦標籤

位置

也重新定位模塊。

  • 位置：絕對
  • 位置：左上角
  • 水平偏移：5%

推薦標籤

將推薦文本模塊添加到第 2 列

添加推薦內容

進入下一個文本模塊。 這個將用於我們的第一個推薦。 您放置在內容框中的推薦必須與第 1 列中的第一個 Blurb 模塊相匹配。

推薦標籤

文字設置

相應地更改模塊的文本設置：

  • 文字字體：Lato
  • 文字顏色：#000000
  • 文字大小：20px
  • 文本行高：2.1em
  • 文本對齊：居中

推薦標籤

漿紗

確保寬度也設置為“100%”。

  • 寬度：100%

推薦標籤

間距

然後，在間距設置中添加一些自定義邊距和填充值。

  • 最高利潤率：30%
  • 左填充：10%
  • 右填充：10%

推薦標籤

CSS ID

並將 CSS ID 添加到高級選項卡。 此 CSS ID 末尾的數字需要與相應 Blurb 模塊的 CSS ID 末尾的數字匹配。

  • CSS ID：testimonial-copy-1

推薦標籤

克隆文本模塊三次

完成第一個推薦文本模塊後，您可以將其複制 3 次。

推薦標籤

更改推薦內容

確保更改重複模塊中的推薦內容。

推薦標籤

更改 CSS ID

連同 CSS ID。 確保您遵循連續的順序。

  • 副本 1：推薦副本 2
  • 副本 2：testimonial-copy-3
  • 副本 3：testimonial-copy-4

推薦標籤

將 CSS 類添加到第一個推薦文本模塊

並且我們需要將一個 CSS 類添加到我們希望在開始時啟用的推薦中。 在這種情況下，這是第一個。

  • CSS 類：show-testimonial

推薦標籤

在分隔線模塊下方添加代碼模塊（第 1 行）

現在我們已經準備好所有元素，是時候讓魔法發生了。 在該部分第一行的分隔模塊正下方添加一個新的代碼模塊。

推薦標籤

添加 CSS 代碼

在樣式標籤之間插入以下 CSS 代碼行，如下面的打印屏幕所示。 

.show-testimonial {
visibility: visible !important;
opacity: 1 !important;
top: 0 !important;
}

.testimonial-active {
transform: translateX(-10%);
}

[id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;

cursor: context-menu;
}

[id*="testimonial-copy"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;

position: absolute!important;
top: -100px;
bottom: auto;
left: 0;
right: auto;

visibility: hidden;
opacity: 0;
}

推薦標籤

添加 JQuery 代碼

接下來，將以下幾行 JQuery 代碼放在腳本標記之間，如下面的打印屏幕所示，您就完成了！ 

jQuery(function($){
$(document).ready(function(){

$('#testimonial-person-1').addClass('testimonial-active');

$('[id*="testimonial-person"]').hover(function() {

var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector);

$('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial');

$('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active');

});

});
});

推薦標籤

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

推薦標籤

移動的

推薦標籤

最後的想法

在這篇文章中，我們向您展示瞭如何為您構建的任何類型的網站創建交互式推薦設計。 更具體地說，我們已經向您展示瞭如何創建自定義推薦選項卡，一旦有人將鼠標懸停在左側的 Blurb 模塊之一時就會觸發這些選項卡。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。