你想在WordPress中顯示之前和之后的照片嗎？之前和之后的照片允許您并排顯示兩個圖像的并排比較，但差異很小。這非常適合展示您的產品和服務的影響，或者只是鼓勵人們與您的內容互動。在本文中，我們將向您展示如何使用幻燈片效果將之前/之后的照片添加到您的 WordPress 網站。

 為什么要在WordPress中顯示之前和之后的照片（帶有幻燈片效果）？

前后圖像是通常顯示某種變化的交互式圖片。

訪問者可以使用滑塊以引人入勝的互動方式在圖像的不同“版本”之間切換。

如果您使用諸如WooCommerce之類的插件運行在線商店，那么之前和之后的照片可以顯示您的產品或服務的效果。

您只需要顯示客戶可以與之相關的“之前”照片，以及理想的“之后”照片。這將使購物者想要購買將他們從“之前”狀態帶到“之后”狀態的東西。

如果您是聯盟營銷人員，那么在您的網站上顯示有說服力的前后照片是推廣您的聯盟鏈接并獲得更多銷售的好方法。

之前和之后的照片還可以鼓勵訪問者與您的內容互動。拖動滑塊以顯示“之后”照片是獲得更多參與度的簡單方法，這可以讓訪問者在您網站上停留更長時間。這也有助于增加您的綜合瀏覽量并降低WordPress中的跳出率。

 方法 1.如何使用免費插件顯示前后照片（簡單）

創建前后照片的最簡單方法是使用Ultimate Before After Image Slider & Gallery（BEA）。

BEA 插件允許您創建水平和垂直滑塊，并使用不同的標簽和顏色自定義圖像。

您需要做的第一件事是安裝并激活Ultimate Before After Image Slider & Gallery（BEA）插件。

激活后，轉到儀表板中的滑塊之前和之后 ? 新增。

首先，鍵入圖像滑塊的名稱。這僅供您參考，因此您可以使用任何有助于您識別它的內容。

完成后，您可以通過滾動到“圖像之前”部分來添加“之前”圖像。

在這里，單擊“添加或上傳圖像”，然后從WordPress媒體庫中選擇圖片或從計算機上傳新文件。

為了幫助搜索引擎理解此圖像并將其展示給合適的人，最好添加一些圖像替代文本。為此，只需在“圖像替代”字段中輸入即可。

完成后，滾動到“圖像后”部分。

現在，您可以按照上述相同過程添加“之后”映像。不要忘記在此圖像中添加一些替代文本，因為它對WordPress SEO很重要。

您還可以通過添加標題和說明在圖像下方顯示一些文本。

例如，您可以鼓勵訪問者與滑塊進行交互。這對于以前可能從未遇到過前后照片的游客尤其重要。

這也是向圖像添加一些上下文的簡單方法。

要添加一些文本，只需在“滑塊標題”或“滑塊描述”字段中輸入即可。

您還可以添加“閱讀更多”URL，該URL可以鏈接到WordPress網站上的任何帖子或頁面，甚至是外部網站。例如，您可以將訪問者引導至一個頁面，他們可以在其中購買滑塊圖像中的產品。

此鏈接將顯示在之前/之后的圖像下方，以及您正在使用的任何滑塊標題或說明下方。

要添加鏈接，請在“閱讀更多鏈接”字段中輸入目標。

然后，您可以決定是在同一標簽頁中打開鏈接，還是使用“閱讀更多鏈接目標”下拉菜單在新標簽頁中打開鏈接。

如果您要鏈接到另一個網站，那么我們建議您選擇“新標簽”，這樣您就不會將訪問者從您的WordPress博客中移開。

完成后，您可以通過單擊“方向樣式”部分中的縮略圖之一來選擇是要創建垂直滑塊還是水平滑塊。

之后，滾動到屏幕頂部，然后單擊“選項”。

在這里，您將看到“默認偏移量”設置為 0.5。這意味著訪問者在頁面首次加載時會看到“之前”圖像的一半。

如果要顯示更多之前的圖像，請鍵入更大的數字，例如 0.6、0.7 或更高。

如果要顯示整個圖像之前的圖像，請輸入 1。這會將滑塊放置在上一個圖像的頂部或右側，如下圖所示。

默認情況下，當訪問者將鼠標懸停在圖像上時，插件會顯示“之前”和“之后”標簽。

您可能希望將這些標簽替換為更具描述性的內容。

為此，只需繼續并輸入“標簽之前”和“標簽后”字段。

默認情況下，訪問者將使用拖放來移動滑塊。有些人可能會覺得這很困難，特別是如果他們有行動不便或正在使用智能手機或平板電腦等較小的設備。

如果您選擇“鼠標懸停時移動滑塊”旁邊的“是”按鈕，則訪問者只需將鼠標懸停在圖像上即可移動滑塊。

如果您選擇“單擊以移動”旁邊的“是”按鈕，則訪問者可以單擊圖像上的任意位置以將滑塊移動到該點。

這些設置可以更輕松地與之前/之后的圖像進行交互，但通常不是滑塊的行為方式。考慮到這一點，我們建議謹慎使用這些設置。

接下來，單擊“樣式”選項卡。

在這里，您可以更改用于不同標簽、背景、標題、描述和閱讀更多按鈕的顏色。這可以幫助之前/之后的圖像與您的 WordPress 主題融合，甚至從您網站設計的其他部分脫穎而出。

您還可以更改字體大小和文本對齊方式。

如果您對滑塊的設置方式感到滿意，請單擊“發布”按鈕。

這將創建一個簡碼，允許您將之前/之后的圖像和滑塊添加到任何頁面、帖子或小部件就緒區域。

將簡碼添加到您的網站后，只需單擊“發布”或“更新”按鈕即可使之前/之后的圖像和滑塊效果生效。

 方法 2.如何使用顯示前后照片種子產品（高級）

如果您只想在頁面或帖子中添加前后圖像，那么 BEA 插件可能是一個不錯的選擇。但是，如果您使用圖像來推廣產品、服務或業務，那么我們建議您使用 SeedProd。

SeedProd 是最好的拖放式 WordPress 頁面構建器。它帶有 180 多個現成的模板，您可以使用它們來創建高轉化率的登錄頁面、銷售設計等。

它還有一個現成的“之前之后切換”塊，您可以使用它來創建用戶可以與之交互的漂亮的前后圖像。

只需從左側菜單中拖動塊，然后將其放到您可能碰巧正在處理的任何頁面設計上，包括銷售頁面。

如果您使用WooCommerce來銷售您的產品，那么SeedProd與WooCommerce集成，甚至帶有特殊的電子商務塊。如果您打算使用前后圖像來推廣您的WooCommerce產品，這是完美的。

注意：有一個免費版本的SeedProd，無論您的預算如何，都可以創建自定義頁面。但是，我們將使用高級版本，因為它帶有“之前之后”切換塊。它還與您網站上可能已經在使用的許多最佳電子郵件營銷服務集成。

創建頁面后，可以輕松地將前后圖像添加到設計中。在 SeedProd 頁面編輯器中，只需找到“之前之后切換”塊。

然后，您可以將此塊拖放到設計上的任何位置，以將其添加到頁面布局中。

完成后，只需單擊以選擇“切換之前”塊。左側菜單現在將更新，以顯示可用于創建前后圖像的所有設置。

首先，您需要添加要用作之前圖像的圖片。在“圖片之前”下，單擊“使用您自己的圖片”或“使用庫存圖片”，然后選擇要使用的圖片。

默認情況下，SeedProd 在此圖像上方顯示“之前”標簽。但是，您可以通過在“標簽之前”字段中鍵入將其更改為更具描述性的內容。

完成后，滾動到“圖像后”部分。

您現在可以按照上述相同的過程添加圖像并自定義默認的“After”標簽。

種子生產可以添加垂直或水平滑動效果。

要在這兩種樣式之間切換，請滾動到“滑塊方向”部分，然后單擊“垂直”或“水平”。

默認情況下，訪問者將通過拖動滑塊在之前和之后的圖像之間移動。但是，某些用戶可能會發現通過將鼠標懸停在圖像上來移動滑塊更容易。

對于較大的圖像尤其如此，訪問者需要將滑塊拖動到更遠的距離。

要嘗試此設置，請在左側菜單中啟用“懸停時移動”。

接下來，您可能希望為之前和之后的圖像添加彩色疊加層。這可以幫助圖像與配色方案的其余部分融合，或從背景中脫穎而出。

您甚至可以使彩色疊加層半透明，以創建更微妙的效果。

要嘗試不同的顏色，請單擊“疊加顏色”部分，然后在出現的彈出窗口中進行更改。

完成后，您可以通過單擊以展開“比較手柄”部分來自定義滑塊手柄。

默認情況下，SeedProd 顯示“之前”圖像的一半和“之后”圖像的一半。要更改此設置，只需拖動“處理初始偏移”滑塊。

要顯示較少的前面的圖像，請將滑塊向左拖動，使其顯示較小的數字。若要顯示之前圖像的更多內容，請將滑塊向右拖動，這將增加數字。

接下來，您可以使用“手柄顏色”設置更改滑塊的顏色。

您還可以使用“手柄厚度”滑塊使手柄變厚或變細。

通過這種方式，您可以使手柄脫穎而出，或創造更微妙的效果。

當您對手柄感到滿意時，您可能需要更改圓圈。您可以使用“圓寬度”設置使圓變大或變小，并更改“圓半徑”以創建尖角或彎曲的角。

當您進行更改時，實時預覽將自動更新，因此您可以嘗試不同的設置以查看最佳外觀。

當您對圓感到滿意時，您可能需要更改該圓圈內三角形的大小。例如，如果您使圓更大，則可能還希望增加三角形的大小。

要進行此更改，請拖動“三角形大小”滑塊，直到您對它的外觀感到滿意為止。

完成此操作后，您可以繼續添加新塊并自定義 SeedProd 頁面上的內容。

如果您對頁面的外觀感到滿意，只需單擊“保存”按鈕旁邊的箭頭，然后選擇“發布”。

現在，如果您訪問您的網站，您將看到您的頁面設計以及前圖像和后圖像。