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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

當(dāng)您對(duì)輸入的信息感到滿意時(shí)，您可以通過(guò)單擊“添加另一張視頻幻燈片”來(lái)創(chuàng)建更多幻燈片。

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

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

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

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

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

接下來(lái)，您需要確保滑塊在移動(dòng)設(shè)備上的外觀與在計(jì)算機(jī)和筆記本電腦上一樣好。

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

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

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

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

完成后，單擊“雜項(xiàng)”選項(xiàng)卡。在這里，您可以將自定義 CSS 添加到滑塊，編輯滑塊標(biāo)題和 slug，以及導(dǎo)出滑塊。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

當(dāng)您對(duì)輸入的信息感到滿意時(shí)，請(qǐng)單擊“保存并開(kāi)始編輯頁(yè)面”。這將加載 SeedProd 頁(yè)面構(gòu)建器界面。

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

當(dāng)您找到要添加的塊時(shí)，只需將其拖放到模板上即可。

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

在構(gòu)建頁(yè)面時(shí)，您可以通過(guò)拖放塊來(lái)移動(dòng)布局中的塊。

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

接下來(lái)，單擊以在頁(yè)面編輯器中選擇圖像輪播塊。

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

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

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

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

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

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

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

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

要嘗試這些不同的模式，請(qǐng)單擊“導(dǎo)航顏色模式”旁邊的按鈕。實(shí)時(shí)預(yù)覽將自動(dòng)更新，以便您看到最喜歡的模式。

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

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

默認(rèn)情況下，訪問(wèn)者需要單擊才能看到下一張幻燈片?？紤]到這一點(diǎn)，您可能需要啟用自動(dòng)播放，因?yàn)檫@通常會(huì)增加訪問(wèn)者看到的幻燈片數(shù)量。

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

如果您在圖像中添加了標(biāo)題，請(qǐng)確保單擊“顯示標(biāo)題”滑塊以將其從“否”變?yōu)椤笆恰薄?/p>

您還可以更改字幕對(duì)齊方式。

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

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

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

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

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

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

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

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

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

如果要?jiǎng)h除塊，只需將鼠標(biāo)懸停在它上面，然后在出現(xiàn)垃圾桶圖標(biāo)時(shí)單擊它。

當(dāng)系統(tǒng)詢問(wèn)時(shí)，請(qǐng)繼續(xù)并單擊“是的，刪除它”。

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

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

我們更有可能嘗試我們看到其他人購(gòu)買(mǎi)、使用或推薦的東西。

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

它還有一個(gè)評(píng)論提要插件，可用于顯示來(lái)自Facebook，Tripadvisor，Yelp和Google的評(píng)論。

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

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

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

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

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

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