您要在網站上顯示前後照片嗎？ 前後照片可用於並排比較兩個具有微小差異的相同圖像。 在本文中，我們將分享如何在WordPress中輕鬆顯示照片前後的信息。
照片效果前後如何工作？
通常，人們使用Photoshop來創建前後圖像。 這是一張顯示效果前後的照片，您可以將其作為靜態圖像添加到WordPress網站上。
功能性的照片滑塊是一種交互式方式，可以全尺寸顯示相似圖像的2個不同版本。 您可以移動滑塊以同時比較兩個圖像。
讓我們來看看如何在WordPress中輕鬆顯示照片前後。
影片教學
如果您不想觀看視頻教程，則可以繼續閱讀以下文本版本：
在WordPress中顯示前後照片
您需要做的第一件事是安裝並激活Twenty20 Image After-After插件。 有關更多詳細信息，請參閱有關如何安裝WordPress插件的分步指南。
激活後，您需要在WordPress管理區域中創建或編輯要顯示前後圖像的頁面/帖子。 現在，點擊 添加二十 文本編輯器上方的按鈕。
它將在彈出窗口中打開WordPress媒體庫。 從這裡，您需要為前後滑塊選擇兩個圖像。
選擇圖像後，點擊 插入 按鈕。
接下來，它將顯示文本字段以在照片的前後添加內容。 您還可以添加滑塊的寬度，偏移值，滑塊方向等。
之後，點擊 插入簡碼 按鈕可在WordPress頁面中添加前後照片。
您還可以使用Twenty20圖像小部件在WordPress側邊欄中顯示照片前後。 只需轉到 外觀»小部件 WordPress管理員中的“部分”，然後將“ Twenty20 Slider”小部件拖動到“邊欄”小部件區域中。
Twenty20 Slider小部件對照片的前後設置與我們在本指南中上面分享的設置類似。 您可以在小部件設置中一一選擇2張圖像，以創建照片前後滑塊。
現在，您可以訪問您的網站以查看操作前後的照片。
當用戶向每個圖像滑動手柄時，另一個圖像將變為可見。 用戶可以將滑塊一直向右或向左移動，以查看完整的圖像前後。 隨著用戶滑動，前後標籤將自動消失。
該插件可與流行的WordPress頁面構建器（例如Beaver Builder和Elementor）配合使用，以在不使用短代碼的情況下，在您的網站頁面中快速顯示照片前後。
我們希望本文能幫助您學習如何在WordPress中顯示照片前後。 您可能還希望查看我們的指南，了解如何為WordPress中的圖像添加放大縮放。
如果您喜歡這篇文章，請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。