如何使用 Divi 設計創意產品比較圖表

產品比較圖可以是一種非常有效的方式來推廣新產品及其升級的功能。 圖表的視覺方面比簡單的文本更能吸引用戶。 並排比較的結構使用戶可以輕鬆查看每個產品功能之間的差異。

在本教程中，我將向您展示如何使用 Divi 設計創意產品對比圖。 這種設計佈局可用於比較任何事物。 例如，我可以看到這也是案例研究的完美佈局。

讓我們開始吧。

搶先看

這是我將在本教程中構建的比較圖表的先睹為快。

本教程需要什麼

對於本教程，您需要以下內容：

• Divi 主題（已安裝和活動）
• 兩張圖片（大約 800 像素 x 450 像素）用作比較圖表中的產品圖片。

創建您的標題和產品圖片

首先，創建一個新頁面，部署 Visual Builder，然後選擇從頭開始構建頁面。

接下來將一列佈局添加到您部分的行中。

在我們添加模塊之前，讓我們轉到部分設置並更新以下內容：

背景顏色：#222222
左背景漸變色：rgba(242,90,71,0.14)
背景漸變色右：rgba(255,255,255,0)
漸變類型：徑向
將漸變放在背景圖像上方：是

保存設置。 現在打開您的行設置並為您的行設置 100% 的自定義寬度。

然後使用以下設置將文本模塊添加到您的一列行：

對於內容，輸入此 html：

<h2>Compare</h2>
VS

文字字體：蒙特塞拉特
文字字體粗細：超粗
文字字體樣式：TT（大寫）
文字文字顏色：rgba(255,255,255,0.3)
文字文字大小：3vw
文本行高：1.8em
文字方向：居中

接下來更新 h2 標題設計選項並為您的模塊提供自定義底部邊距以創建重疊效果。

標題 2 字體：蒙特塞拉特
標題 2 文字顏色：rgba(255,255,255,0.3)
標題 2 文字大小：13vw
標題 2 字母間距：1vw
自定義邊距：-13vw 底部

您的部分文本現在將被隱藏，但一旦我們添加其他內容，它就會顯示出來。

兩個創建我們的第二行複制第一行，然後刪除複製行內的文本模塊。 然後將列結構更新為兩列行。

繼續更新您的行設置，如下所示：

自定義天溝寬度：1
第 1 列自定義填充：2vw 右
第 2 列自定義填充：2vw 左

我們將在這裡放置我們希望比較的兩種產品的圖像。 在我們行的左列中，使用圖像模塊添加您的圖像。 在本例中，我使用的是 800 像素 x 459 像素的 png 圖像。 然後按如下方式更新圖像模塊設置：

寬度：70%
模塊對齊：右
自定義填充：底部 40px

然後復制模塊並將其粘貼到右列中。 更改圖像，然後調整模塊向左對齊。

在左欄的圖片模塊下，添加一個文本模塊，文本內容如下：“舊產品”。

然後進入上面第一行的文本模塊並複製文本樣式。

然後將鼠標懸停在帶有文本“舊產品”的新文本模塊上，並使用右鍵單擊將文本樣式粘貼到模塊中。

這將更快地匹配我們需要的文本樣式。 現在我們需要做的就是
更新文本大小和對齊方式：

文字文字大小：16px
文字方向：右

現在轉到高級選項卡並將以下自定義 CSS 放入主元素輸入框中：

text-align:right !important;

這是必要的，因為默認情況下，Divi 會將智能手機上的文本對齊方式調整為左對齊。 這個 CSS 片段將覆蓋它並確保它在智能手機上也保持正確對齊。

保存設置。 然後復製文本模塊並將其粘貼到右列中的圖像下方。 將文本內容更改為“New Product”並將文本方向更新為“Left”。

這是我們到目前為止所擁有的。

創建產品比較圖表

為了創建我們的比較圖表，我們將使用兩列行的序列，每行由一列行分隔。 兩列行將保存我們的彩色條。 一列行將顯示與條形值關聯的特徵的名稱。

創建一個新的兩列行並更新行設置，如下所示：

自定義寬度：100%
天溝寬度：1
自定義填充：0px 底部
第 1 列自定義填充：2vw 右
第 2 列自定義填充：2vw 左

第 1 列和第 2 列自定義填充在我們將添加的條形圖中間創建了我們需要的空間。

在左欄中添加一個分隔模塊並更新設置如下：

左背景漸變色：rgba(81,91,214,0.25)
背景漸變色右：rgba(255,255,255,0.15)
梯度方向：90度
起始位置：35%
顏色：#515bd6
分隔線權重：23px（該值應等於分隔線高度值，默認情況下為 23px，以便分隔線與模塊背景的寬度相同）
自定義填充：左 70%（這會將分隔線向右推 75%，導致條形圖值從右側 25%）

保存設置。

現在將分隔模塊複製到同一行的右列。 然後更新以下設置：

左背景漸變色：rgba(255,255,255,0.15)
背景漸變色右：rgba(242,90,71,0.25)
起始位置：70%
顏色：#f25a47
自定義填充：右 30%（這會將分隔線向左推 30%，導致條形圖值從左側開始 70%。）

現在您的第一行條形已經就位，我們需要在其下方添加一個單列行來放置我們的產品特徵標籤。

在頂部創建一個帶有 0px 自定義填充的單列行。 然後添加一個新的blurb模塊並更新blurb模塊設置如下：

內容：“功能”
使用圖標：是
圖標：見截圖

圖標顏色：rgba(255,255,255,0.3)
使用圖標字體大小：是
圖標字體大小：30px
文字方向：居中
正文字體：蒙特塞拉特
正文字體粗細：超粗體
正文顏色：rgba(255,255,255,0.3)
正文字母間距：2px
自定義邊距：-20px

在高級選項卡下，您可以通過在模糊圖像 CSS 框中添加以下自定義 CSS 來去除模糊圖標下方的默認邊距：

margin-bottom: 0px;

現在您有了產品比較功能的第一個工作示例，您需要做的就是複制構成比較功能的兩行（帶有兩個條形/分隔線的行和帶有模糊模塊的行）。 我發現最簡單的方法是使用 ctrl + c（或 command + c）複製每一行，然後使用 ctrl + v（或 command + v）將它們粘貼到另一個下方。 然後只需更新重複分隔線的自定義填充以顯示不同的條形圖值。

您還可以根據您選擇的自定義填充值調整漸變的開始和結束位置。 例如，如果您為左列分隔符提供 60% Left 的填充，您可以將漸變的起始位置調整為 30%（正好是填充距離的一半）。

最後，您可能需要為您的部分添加分隔線背景。 對於此示例，我將添加以下內容：

頂部分隔線：見截圖
分隔線顏色：rgba(255,255,255,0.05)
分頻器高度：19vw

這是最終結果。

當我將部分背景顏色更改為 #000314 時，我也喜歡設計的外觀。

使設計具有響應性

在 Divi 中，任何兩列行將在移動設備上自動堆疊在一起。 這當然會破壞移動設備上的設計。 為了解決這個問題，我們需要做兩件事。 首先，我們需要在主題定制器中添加一小段自定義 CSS。

@media (max-width: 980px){
.disable-break .et_pb_column {
    width: 50%!important;
    margin-bottom: 30px;
}
}

此代碼將使用 CSS 類“disable-break”將任何行的列寬調整為 50%。 這將確保我們在移動設備上保持我們的兩列結構，這樣設計就不會中斷。 不要忘記發布您的更改。

一旦 CSS 就位，我們需要將 CSS 類添加到具有兩列結構的任何行。

首先，讓我們將 CSS 類添加到包含兩個產品圖像的兩列行中。 打開行設置並轉到高級選項卡。 然後在 CSS Class 輸入框中輸入“disable-break”。

然後右鍵單擊“CSS 類”選項並單擊“複製 CSS 類”。

現在您需要做的就是右鍵單擊具有兩列結構的每一行（所有帶有分隔線/條的行），然後單擊“粘貼 CSS 類”。

現在，您的列將在移動設備上保持兩列結構並保持設計一致。

最後的想法

一旦您學習了一些設計技術，在 Divi 中創建產品比較圖表就很簡單了。 訣竅是將兩列行設置為 100% 寬度和 1 裝訂線寬度。之後，您可以使用分隔模塊來構建一些獨特的條形圖設計。 如果您想在移動設備上保留兩列佈局，您只需要一小段自定義 CSS。 我希望這個比較圖表佈局可以以多種不同的方式使用。 隨時與 Divi Nation 分享一些想法。

我期待在評論中收到您的來信。

乾杯!