如何在WordPress中顯示照片之前和之後(帶有幻燈片效果)


您要在網站上顯示前後照片嗎? 前後照片可用於並排比較兩個具有微小差異的相同圖像。 在本文中,我們將分享如何在WordPress中輕鬆顯示照片前後的信息。

如何在WordPress中顯示照片前後

照片效果前後如何工作?

通常,人們使用Photoshop來創建前後圖像。 這是一張顯示效果前後的照片,您可以將其作為靜態圖像添加到WordPress網站上。

功能性的照片滑塊是一種交互式方式,可以全尺寸顯示相似圖像的2個不同版本。 您可以移動滑塊以同時比較兩個圖像。

讓我們來看看如何在WordPress中輕鬆顯示照片前後。

影片教學

訂閱WPBeginner

如果您不想觀看視頻教程,則可以繼續閱讀以下文本版本:

在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。