Divi 插件亮點：Divi Sensei Before After Slider

前後滑塊是讓訪問者比較兩個圖像的好方法。 顧名思義，它們可以是改變前後的圖像，例如減肥、修飾的圖像、裝飾的房間、噴漆的汽車等。當然，它們比以前有用得多和照片後。 它們可用於比較圖形、產品、度假目的地等。

在本文中，我們將看看 Divi Sensei Before and After Slider，一個用於 Divi Builder 的前後滑塊模塊，看看它可以做什麼，並幫助您決定是否在您的 Divi 中需要這個第三方插件工具箱。

Divi Sensei 前後滑塊模塊

像往常一樣上傳並安裝 Divi Sensei Before 和 After 插件。 三是無需設置。 上傳並激活插件後，您會看到一個新模塊添加到 Divi Builder，名為 Sensei Before and After Slider。

該模塊在左側顯示前圖像，在右側顯示後圖像。 它在中心顯示一個滑塊，用戶可以抓住它並從一側滑動到另一側。 將鼠標懸停在圖像上會顯示之前和之後的標籤並添加疊加層。 您可以對這些元素中的每一個進行設計控制。

讓我們來看看滑塊的功能和選項。 對於這些示例，我使用來自 Unsplash.com 的圖像。

內容標籤

內容選項卡可讓您添加前圖像、後圖像和標籤。 在此示例中，我添加了同一圖像的兩個不同版本來創建前後圖像。 這對於顯示經過修飾的照片的結果很有用。 這些選項還包括標準鏈接、背景和管理標籤設置。

它還提供了可以更改前後標籤文本的字段。 我將鼠標懸停在圖像上以顯示標籤。 默認情況下，它們僅在懸停時顯示，但您可以更改此設置。

設計選項卡

“設計”選項卡包括滑塊、標籤和疊加的設置。 它還包括大小、間距、邊框、框陰影、過濾器、變換​​和動畫的標准設置。

滑塊

滑塊設置允許您在水平和垂直之間選擇滑塊方向，設置起始偏移以確定滑塊在圖像上的起始位置，以及更改滑塊、手柄、手柄背景和手柄圖標的顏色。 我已經在上面的示例中調整了這些設置中的每一個。

標籤

對於標籤，您可以讓它們始終顯示或僅在懸停時顯示，並調整背景和字體。 背景顏色包括純色和不透明度調整。 您可以單獨調整背景，但它不允許您單獨調整文本顏色。 您還可以選擇字體、更改它們的大小、樣式、對齊方式、行高、添加陰影等。行高設置背景的大小。

在上面的例子中，我已經指定了背景和字體顏色，改變了字體的大小，以及行高的大小。 我還將它們設置為始終顯示，以便用戶無需將鼠標懸停在圖像上即可看到它們。

覆蓋

默認情況下啟用覆蓋。 您可以禁用它、調整顏色和調整不透明度。 默認顏色為黑色，不透明度為 50%。

我在本例中選擇了藍色，並將不透明度設為 50%。 在您懸停時讓圖像顯示出來似乎效果最好。 您使用淺色還是深色以及您設置的不透明度量將取決於圖像中的顏色以及您希望如何使用疊加層。

對於此示例，我使用了黑白配色方案。 疊加和標籤文本為白色，滑塊元素為黑色。 我降低了標籤背景的不透明度，使它們變暗。 我將它們保留為默認尺寸。

Divi Sensei 之前和之後的滑塊示例

讓我們看幾個使用滑塊的方法示例，以及它們在 Divi 佈局中的外觀。 我正在使用來自 Unsplash 的圖像和那些在內置於 Divi 的免費 Divi 佈局中可用的圖像。 我會在使用時確定我正在使用的 Divi 佈局。

圖形比較

對於這個，我使用了 Divi Video Game 佈局包中的設計元素。 我禁用了疊加層，將滑塊元素更改為綠色，並使標籤始終顯示。 標籤的背景為純藍色。 我增加了字體大小，更改了顏色，使用了 Rubik 字體系列，使字體粗細中等，並將它們全部大寫。 如果您擁有或玩過這些遊戲系統，並且您知道為什麼這種虛構的圖形比較不存在，那就太好了。

這是它在佈局中的外觀。 它非常適合進行像兩個不同遊戲機圖形的模型這樣的比較。

組合前後的服務

這個例子模仿了裝修前後房間的想法。 當兩張圖片的尺寸不同時，它會使用較大的圖片的尺寸，較小的圖片會顯示一個間隙。 它將平等地放置它們的高度或寬度，並將其餘部分填充為空白空間。 在此示例中，右側的圖像比左側的圖像短。 雖然具有相同尺寸的圖像效果更好，但它仍然適用於接近相同尺寸的圖像。

我添加了 Home Improvement 佈局包中的顏色和字體。 這是它在佈局的一部分中的外觀。

這是疊加層的外觀。 我已將滑塊移到一側以顯示更多之前的圖像。

作為參考，這是移動手柄以顯示更多後圖像的圖像。

產品對比

在本示例中，我將 Tea Shop 佈局中的三個茶圖像替換為 3 個 DS B&A 滑塊。 我正在為按鈕和滑塊控件使用佈局中的顏色。 中間滑塊設置為垂直只是為了不同。 覆蓋層使用佈局中不透明度降低的顏色。

以下是它們在佈局中的外觀。 這非常適合比較多個產品、多個位置、多種顏色的視覺細節，對於具有多個選項的產品，可以顯示和不顯示選項等。

比較位置

在本例中，我使用滑塊來比較兩個位置。 它們不必相似，只需出於某種原因進行比較即可。 我已經從滑塊和標籤的佈局中添加了顏色，以及標籤的字體。 我還添加了一個框陰影以幫助它從其餘圖像中脫穎而出。

這是使用佈局中的顏色在 Siteseeing 佈局包中的外觀。 這是一個很好的例子，說明兩個圖像不必是同一事物甚至相似事物的前後。 這是展示婚禮場地、度假勝地等的好方法，可以幫助買家在它們之間進行選擇（或者使選擇更加困難，但我不建議將其作為目標）。

購買

您可以在 Divi Marketplace 中購買 Divi Sensei Before 和 After Slider。 無限網站使用和 1 年支持和更新的費用為 5 美元。 此價格包括 30 天退款保證。

結束的想法

Divi Sensei 前後滑塊是一個簡單的模塊。 例如，滑塊沒有寬度控件，標籤不包括邊框、框陰影、漸變等，但它的設置使它很容易適應我添加到的每個佈局的樣式。 對於價格和它的功能，設置級別很有意義，我能夠輕鬆獲得我想要的設計。

所有控件都很直觀，我從沒想過需要說明。 您甚至可以為圖像使用不同的 alt 標籤來幫助改進 SEO。 如果您對用於 Divi 網站的前後滑塊感興趣，Divi Sensei Before and After Slider 值得考慮。

我們希望聽到您的意見。 您是否在 Slider 前後嘗試過 Divi Sensei？ 請在下面的評論中告訴我們您對此的看法。

精選圖片來自 Elvetica/shutterstock.com