將之前和之後滑塊添加到您的網站的最簡單方法

已發表: 2022-04-10

前後圖像在非常廣泛的行業中廣泛用於營銷目的。沒有什麼詞能比一張准確地顯示某人或某物在該過程之前和之後的樣子的圖像更好地描述某個過程所產生的效果。即使在不涉及效果可見的產品的企業中，也可以以幽默的方式使用此功能。

假設您正在經營一家餐廳——您可以展示一個人在您的宮殿用餐之前的樣子，以及他們在品嚐您的美食後的高興程度。 在描述您的產品/服務的好處和優勢方面，滑塊提供之前和之後的可能性是無限的。這完全取決於您的想像。

就像在我們的頁面中添加視差效果使您的網站看起來很現代一樣，前後滑塊讓人難以忘記，因為圖像可以告訴 1000 多個單詞。

此外，您可以完全免費將此功能添加到您的網站，並且全部由您自己完成。在本文中，我們將向您展示如何使用流行的免費插件Qi Addons for Elementor創建前後滑塊。

請繼續關注以了解更多信息：

使用 Qi 插件為 Elementor 添加之前和之後的滑塊

適用於 Elementor 的 Qi Addons 是一款直觀的免費工具，可讓您毫不費力地為您的網站添加各種華麗的元素。它帶有一個非常實用、用戶友好的界面，新手和高級用戶都會發現它易於使用。 Qi 的特別棒之處在於，除了許多有用的功能外，它還為您提供了一絲現代優雅。

為 Elementor安裝 QI 插件的過程與任何其他插件安裝沒有什麼不同。如果您對此有任何疑問，請務必查看我們上面提供的鏈接，您也可以在評論部分寫信給我們。

由於這是一個 Elementor 插件，因此請確保在創建新帖子時切換到 Elementor 編輯器。所有 Qi Addons 小部件都將整齊地顯示在左側元素菜單中。只需向下滾動菜單即可找到它們。

Before and After Slider 小部件提供了一種在同一幀中顯示兩個圖像的簡單有效的方法。通過在搜索字段中輸入小部件名稱或瀏覽菜單中的小部件，在左側的側邊欄菜單中找到它。

要添加之前/之後比較滑塊，請將 Elementor 元素拖放到所需位置。 添加小部件後，所有設置都將位於左側，並且在 Content 和 Style 選項卡中是與滑塊相關的所有選項。

現在，您需要將前後圖像添加到滑塊。首先，我們添加之前的圖像——將鼠標懸停在圖像字段上，將顯示“選擇圖像”選項，或者只需單擊該字段中間的小加號圖標。

如果需要，您可以從媒體庫中選擇圖像或將圖像上傳到您的媒體庫。只需將選定的圖片拖放到媒體庫中，如果它還沒有，然後選擇它並選擇。

插入所需的圖像後，您可以通過更改將在滑塊中間的圓圈中顯示的文本來繼續自定義之前/之後的滑塊。你可以在這裡寫一條說明，或者一條更吸引人的信息，這取決於你和你的網站風格。您還可以選擇是否希望文本垂直或水平對齊。

如果您想調整前後圖像之間的邊界將出現在滑塊上的位置，您可以在字段中輸入所需的偏移值。默認值為 50%，這意味著默認邊框正好在圖像的中間。如果您調整偏移量，這就是滑塊的樣子：

現在，是時候對前後滑塊進行更多微調了。讓我們看看您還可以自定義哪些內容以使滑塊看起來符合您的需要。 單擊樣式選項卡以探索更多選項。

如果要從圖片中心移動圓形手柄，只需使用滑塊調整 Handle Top Offset 值。您將立即看到實時更改，因此您可以輕鬆決定最適合您的方式。您還將以相同的方式調整圓圈大小，以及圖片前後版本之間的邊框。

您還可以單擊 Nabdle 文本顏色為圓圈中的文本創建顏色陰影，也可以以相同的方式選擇文本字體。最後，您還可以以相同的方式自定義圓圈顏色。

在“高級”選項卡中，您會發現更多選項可以使滑塊更具吸引力和吸引力。這些選項不僅限於此小部件，它們是默認的 Elementor 選項，您也可以使用它們來編輯頁面上的其他小部件。

讓我們來說明一些最有趣的。隨意測試所有選項，因為您將看到您所做的所有更改，因此您可以立即了解每個選項對滑塊的作用以及它是否適合您。

如果您打開 Advanced 菜單，您將看到設置 margin 和 padding 的選項。您會注意到每個選項旁邊都有一個小型筆記本電腦圖標，它允許您在不同設備（筆記本電腦、平板電腦或移動設備）上設置不同的邊距和填充值。

運動效果特別有趣，您可以從超過 35 種運動效果中進行選擇。您還可以設置不同的動畫在不同的設備上顯示。選擇動畫類型後，您還可以根據需要調整其持續時間和延遲。

現在單擊“變換”選項卡以發現您可以使用的更多效果。從旋轉到傾斜以及水平和垂直翻轉，您可以做很多事情來更改滑塊的顯示。

在邊框選項卡中，您將找到允許您通過在您選擇的顏色中添加陰影圖片邊框來裝飾邊的選項。您還可以選擇在滑動框周圍添加陰影效果並設置陰影效果輸出。

蒙版選項卡中的選項非常方便。您可以在此處設置滑塊以不同的形狀顯示- 圓形、花朵、草圖、三角形、斑點、六邊形，甚至添加自定義形狀。也可以調整所選形狀的大小和位置。

請特別注意響應選項卡，因為您可以選擇不顯示在選定設備上的滑塊。

這是我們根據需要調整滑塊後在頁面上的樣子：

如您所見，在頁面上添加前後滑塊並不是火箭科學。現在，您可以盡情發揮想像力，為您的工作、產品或服務可能產生的效果創造一些令人印象深刻的視覺表現。如果您有任何問題、評論或詢問，請隨時與我們聯繫。

我們希望這篇文章對您有所幫助。如果您喜歡它，請隨時查看其中的一些文章！