您想為您的wordPress/ target=_blank class=infotextkey>WordPress網(wǎng)站創(chuàng)建一個響應(yīng)式滑塊嗎？滑塊通常用于網(wǎng)站的首頁，以交互方式展示您最重要的產(chǎn)品、服務(wù)、推薦或其他內(nèi)容。在本文中，我們將向您展示如何為您的WordPress網(wǎng)站添加響應(yīng)式滑塊。

為什么要向您的網(wǎng)站添加響應(yīng)式WordPress滑塊？

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

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

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

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

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

方法 1.使用插件創(chuàng)建響應(yīng)式WordPress滑塊（快速簡便）

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

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

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

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

激活后，轉(zhuǎn)到 WordPress 儀表板中的 Soliloquy » 設(shè)置，然后輸入您的許可證密鑰。

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

完成后，您可以通過轉(zhuǎn)到Soliloquy » Add New向WordPress網(wǎng)站添加新滑塊。

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

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

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

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

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

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

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

現(xiàn)在，您可以繼續(xù)將視頻的URL粘貼到“視頻URL”字段中。

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

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

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

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

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

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

創(chuàng)建完所有幻燈片后，請繼續(xù)并單擊“插入滑塊”。

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

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

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

接下來，您需要確?；瑝K在移動設(shè)備上的外觀與在計算機和筆記本電腦上一樣好。

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

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

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

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

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

如果您對滑塊的設(shè)置方式感到滿意，請繼續(xù)并單擊“發(fā)布”按鈕。

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

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

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

在出現(xiàn)的彈出窗口中，輸入“獨白”。

當出現(xiàn)正確的塊時，單擊以將其添加到您的WordPress博客或網(wǎng)站。

之后，打開 獨白 塊并選擇您剛剛創(chuàng)建的滑塊。

您現(xiàn)在可以單擊“更新”或“發(fā)布”按鈕以使滑塊生效。

方法 2.使用頁面構(gòu)建器創(chuàng)建響應(yīng)式滑塊（更可自定義）

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

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

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

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

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

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

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

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

完成后，轉(zhuǎn)到 種子生產(chǎn) » WordPress儀表板中的登錄頁面。

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

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

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

盡可能在此URL中包含相關(guān)關(guān)鍵字是明智的，因為這將有助于搜索引擎了解頁面的內(nèi)容。這通?？梢愿纳颇愕腤ordPress SEO。

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

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

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

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

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

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

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

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

您現(xiàn)在可以繼續(xù)添加要在滑塊中顯示的所有圖像。首先，單擊SeedProd默認創(chuàng)建的“圖像1”項。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

當系統(tǒng)詢問時，請繼續(xù)并單擊“是的，刪除它”。

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

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

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

在您的網(wǎng)站上顯示社會證明的最簡單方法是使用 粉碎氣球.Smash Balloon具有插件，可讓您嵌入來自Instagram，F(xiàn)acebook，Twitter和YouTube的內(nèi)容。

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

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

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

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

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

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

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