您想為您的WordPress網站創建一個響應式滑塊嗎？滑塊通常用于網站的首頁，以交互方式展示您最重要的產品、服務、推薦或其他內容。在本文中，我們將向您展示如何為您的WordPress網站添加響應式滑塊。

 為什么要向您的網站添加響應式WordPress滑塊？

滑塊或幻燈片是突出顯示您最受歡迎的WooCommerce產品，最新的YouTube視頻，客戶評論等的好方法。

某些滑塊會自動播放，因此它們會自動在幻燈片之間移動。這使您可以在較小的空間中顯示大量信息，從而留出足夠的空間來顯示其他內容。

因此，許多網站在其最重要的頁面上使用滑塊，例如登錄頁面、主頁或銷售頁面。

即使滑塊設置為自動播放，訪問者通常也可以通過單擊導航按鈕在幻燈片之間手動移動。通過這種方式，滑塊鼓勵訪問者與您的網站互動，從而使其更具吸引力。

您可以在下面的 GIF 中看到滑塊如何動態地制作頁面。

 方法 1.使用插件創建響應式WordPress滑塊（快速簡便）

如果您想創建一個在桌面和移動設備上看起來不錯的簡單滑塊，那么我們建議您使用 Soliloquy 插件。

這個WordPress滑塊插件允許您使用媒體庫中的圖像創建幻燈片，還可以顯示托管在YouTube等第三方平臺上的視頻。

您還可以為每張幻燈片添加替代文本和標題，這對于WordPress SEO非常有用。

首先，您需要注冊一個 Soliloquy 帳戶。之后，您可以在您的網站上安裝并激活 Soliloquy 插件。有關更多

激活后，轉到 WordPress 儀表板中的 Soliloquy ? 設置，然后輸入您的許可證密鑰。

您可以通過在Soliloquy網站上登錄您的帳戶來找到密鑰。輸入此信息后，單擊“驗證密鑰”按鈕。

完成后，您可以通過轉到Soliloquy ? Add New向WordPress網站添加新滑塊。

您可以從鍵入標題開始。這僅供您參考，因此您可以使用任何可以幫助您識別WordPress儀表板中的滑塊的內容。

接下來，是時候將圖像和視頻添加到滑塊了。您可以將文件拖放到編輯器上，也可以單擊“從其他來源選擇文件”。

如果您想使用圖像，那么您可以按照與在WordPress塊編輯器中添加圖像完全相同的方式添加這些文件。

如果您想包含視頻，那么我們建議您將它們上傳到 YouTube 或 Vimeo 等視頻托管網站。將視頻直接上傳到您的網站不是一個好主意，因為它會降低您的網站速度并占用大量存儲空間。

同時，YouTube 等平臺針對視頻進行了優化，因此您可以在滑塊中顯示高分辨率視頻，而不會對您的網站產生負面影響。

選擇視頻托管平臺后，您需要上傳要包含在WordPress滑塊中的所有視頻。如果您不確定如何上傳視頻，那么我們建議您閱讀所選視頻平臺的官方文檔或用戶手冊。

完成后，只需單擊“從其他來源選擇文件”按鈕，然后選擇“插入視頻幻燈片”。

現在，您可以繼續將視頻的URL粘貼到“視頻URL”字段中。

Soliloquy 在右側顯示所有支持的鏈接格式，因此請確保您的鏈接使用這些格式之一。

完成后，您可以繼續在“標題”字段中鍵入標題。這僅供您參考，因此您可以使用任何您想要的東西。您還可以添加替代文本，這將有助于搜索引擎了解本幻燈片的全部內容。

之后，您可以在“標題”字段中輸入可選標題。這將顯示在視頻底部的灰色欄中，然后訪問者按“播放”。

如果您不想顯示此欄，則只需將“標題”字段留空即可。

當您對輸入的信息感到滿意時，您可以通過單擊“添加另一張視頻幻燈片”來創建更多幻燈片。

要配置此新幻燈片，只需執行上述相同過程即可。

創建完所有幻燈片后，請繼續并單擊“插入滑塊”。

現在，您將在“當前在滑塊中”部分看到所有幻燈片。

接下來，您可以單擊“配置”選項卡并更改滑塊顯示設置。例如，可以選擇新的滑塊主題、更改圖像大小以及更改滑塊和標題的位置。

您還可以自定義滑塊箭頭和暫停/播放按鈕、調整過渡速度、更改延遲時間等。

接下來，您需要確保滑塊在移動設備上的外觀與在計算機和筆記本電腦上一樣好。

也就是說，單擊“移動”選項卡，然后選中“創建移動滑塊圖像”旁邊的框。

然后，您可以鍵入要用于移動設備上的圖像和視頻的大小。

默認情況下，Soliloquy 將隱藏移動用戶的字幕。通常，這有助于幻燈片更舒適地安裝在智能手機和平板電腦通常使用的較小屏幕上。

因此，我們建議您停用此設置，但如果您愿意，可以選中“在移動設備上顯示字幕”旁邊的復選框。

完成后，單擊“雜項”選項卡。在這里，您可以將自定義 CSS 添加到滑塊，編輯滑塊標題和 slug，以及導出滑塊。

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

Soliloquy 將自動創建一個簡碼，您可以將其添加到任何頁面、帖子或小部件就緒區域。

您還會注意到一些可以添加到WordPress主題中的代碼片段。

將滑塊添加到站點的最簡單方法是使用 Soliloquy 塊。只需轉到要顯示滑塊的頁面或帖子，然后單擊“+”按鈕。

在出現的彈出窗口中，輸入“獨白”。

當出現正確的塊時，單擊以將其添加到您的WordPress博客或網站。

之后，打開 獨白 塊并選擇您剛剛創建的滑塊。

您現在可以單擊“更新”或“發布”按鈕以使滑塊生效。

 方法 2.使用頁面構建器創建響應式滑塊（更可自定義）

如果你想創建一個簡單的滑塊，那么像Soliloquy這樣的插件是一個不錯的選擇。但是，如果您想向登錄頁面、自定義主頁甚至您的 WordPress 主題添加高級滑塊，那么我們建議您改用頁面構建器插件。

SeedProd 是最好的拖放式 WordPress 頁面構建器。它允許您設計自定義登錄頁面，甚至創建自定義 WordPress 主題，而無需編寫任何代碼。

它還有一個圖像輪播塊，您可以使用它來創建令人驚嘆的滑塊。

您只需將此現成的塊拖放到頁面上的任何位置，然后使用強大的拖放編輯器對其進行自定義。

首先，您需要安裝并激活 SeedProd 插件。

注意：有一個免費版本的SeedProd，無論您的預算如何，都可以創建專業的設計。但是，我們將使用高級 SeedProd 插件，因為它帶有圖像輪播塊。如果您要創建一個滑塊來推廣您的產品或服務，那么高級插件還與 WooCommerce 和所有最好的電子郵件營銷服務。

激活插件后，SeedProd 將要求您提供許可證密鑰。

您可以在 SeedProd 網站上的帳戶下找到此許可證密鑰。輸入信息后，單擊“驗證密鑰”按鈕。

完成后，轉到 種子生產 ? WordPress儀表板中的登錄頁面。

SeedProd 附帶 180 多個專業設計的模板，這些模板按類別分組。在頂部，您將看到一些類別，可讓您創建漂亮的即將推出的頁面，激活維護模式，為WordPress創建自定義登錄頁面等等。

SeedProd的所有模板都易于定制，因此您可以使用所需的任何設計。當您找到喜歡的模板時，只需將鼠標懸停在其上并單擊復選標記圖標即可。

現在，您可以在“頁面名稱”字段中輸入著陸頁的名稱。SeedProd 將使用頁面名稱自動創建一個“頁面 URL”。

盡可能在此URL中包含相關關鍵字是明智的，因為這將有助于搜索引擎了解頁面的內容。這通常可以改善你的WordPress SEO。

要更改頁面自動生成的網址，只需在“網頁網址”字段中輸入即可。

當您對輸入的信息感到滿意時，請單擊“保存并開始編輯頁面”。這將加載 SeedProd 頁面構建器界面。

這個簡單的拖放構建器在右側顯示頁面設計的實時預覽。左側是一個菜單，其中包含您可以添加到頁面的所有不同塊和部分。

當您找到要添加的塊時，只需將其拖放到模板上即可。

要自定義塊，只需單擊以在 SeedProd 編輯器中選擇該塊。左側菜單現在將更新以顯示可用于自定義它的所有設置。

在構建頁面時，您可以通過拖放塊來移動布局中的塊。

要使用 SeedProd 創建響應式滑塊，只需在左側菜單中找到圖像輪播塊，然后將其拖到布局上即可。

接下來，單擊以在頁面編輯器中選擇圖像輪播塊。

您現在可以繼續添加要在滑塊中顯示的所有圖像。首先，單擊SeedProd默認創建的“圖像1”項。

您現在可以使用SeedProd內置庫中的照片，也可以單擊“使用您自己的圖像”并從WordPress媒體庫中選擇一個文件。

選擇圖像后，您可以添加標題，該標題將顯示在該圖像下方。默認情況下，SeedProd 不顯示字幕，但我們稍后將在本文中向您展示如何啟用它們。

如果您對幻燈片的配置方式感到滿意，請單擊“添加圖像”按鈕以創建另一張幻燈片。

要添加更多幻燈片，只需按照上述相同過程操作即可。

將所有圖像添加到滑塊后，是時候自定義滑塊的外觀和行為了。

在左側菜單中，點擊以展開“輪播設置”部分。

首先，您可以在滑塊導航按鈕的淺色和深色模式之間切換。

要嘗試這些不同的模式，請單擊“導航顏色模式”旁邊的按鈕。實時預覽將自動更新，以便您看到最喜歡的模式。

默認情況下，輪播顯示一張幻燈片，訪問者需要使用導航控件才能查看更多內容。

但是，您可能希望通過打開“要顯示的幻燈片”下拉列表并從列表中選擇一個數字來一次顯示多張幻燈片。如果滑塊包含大量內容，并且您擔心訪問者可能不會單擊所有幻燈片，則這可能很有用。

默認情況下，訪問者需要單擊才能看到下一張幻燈片。考慮到這一點，您可能需要啟用自動播放，因為這通常會增加訪問者看到的幻燈片數量。

為此，請單擊以啟用“自動播放”開關，然后通過在“自動播放速度”中鍵入數字來指定每張幻燈片應在屏幕上停留多長時間。

如果您在圖像中添加了標題，請確保單擊“顯示標題”滑塊以將其從“否”變為“是”。

您還可以更改字幕對齊方式。

根據背景顏色，您可能需要更改字幕顏色，然后訪問者才能看到它們。

為此，請單擊“高級”選項卡，然后使用“字幕顏色”設置。

您可以通過單擊“字幕排版”旁邊的“編輯”按鈕來進一步設置文本樣式。

這將添加一些設置，您可以在其中更改字體大小、行高、間距等。

如果您對字幕的外觀感到滿意，可以使用“滑塊圖像樣式”下拉菜單向幻燈片添加不同的框陰影。

這些陰影確實可以使幻燈片脫穎而出，因此值得嘗試不同的陰影以查看它們是否適合您的頁面設計。

在“高級”標簽頁中，你還可以找到一些設置，讓你添加邊框，更改間距，甚至創建入口動畫。

這些設置中的大多數都是不言自明的，因此值得瀏覽它們以了解您可以創建哪些不同類型的效果。

當您對滑塊的外觀感到滿意時，可以繼續處理頁面的其余部分。只需將塊拖到您的設計上，然后使用左側菜單中的設置對其進行自定義。

如果要刪除塊，只需將鼠標懸停在它上面，然后在出現垃圾桶圖標時單擊它。

當系統詢問時，請繼續并單擊“是的，刪除它”。

當您對頁面的外觀感到滿意時，是時候通過單擊“保存”按鈕使其生效了。最后，選擇“發布”以使您的滑塊上線。

 方法 3.使用粉碎氣球創建滑塊（最適合社交帖子和評論)

我們更有可能嘗試我們看到其他人購買、使用或推薦的東西。

在您的網站上顯示社會證明的最簡單方法是使用 粉碎氣球.Smash Balloon具有插件，可讓您嵌入來自Instagram，Facebook，Twitter和YouTube的內容。

它還有一個評論提要插件，可用于顯示來自Facebook，Tripadvisor，Yelp和Google的評論。

但是，在您的在線商店或網站上顯示大量正面評論和評論可能會占用大量空間。

這就是為什么 Smash 氣球帶有內置的輪播布局和模板，您可以使用它們來創建響應式滑塊。這使您只需單擊幾下即可創建社交媒體并查看幻燈片。

更好的是，Smash Balloon將自動獲取新內容，因此滑塊將始終顯示最新帖子。

另一種選擇是顯示您自己的社交媒體帳戶中的內容。

如果訪問者喜歡他們所看到的，他們可能會決定在社交媒體上關注您。

為了幫助您獲得更多關注者，Smash Balloon 附帶了現成的號召性用語按鈕，您可以將這些按鈕添加到滑塊中。