15+ 優秀的 WordPress 滑塊示例（展示）

為您的 WordPress 滑塊尋找靈感？ 滑塊允許網站所有者在引人入勝的交互式幻燈片中展示他們最重要的內容，因此用戶可以看到亮點並立即採取行動。 難怪有這麼多網站盡其所能使用滑塊！

• 高效、時尚地交付內容
• 將大量信息打包到一個狹小的空間中
• 為您的網站添加互動
• 將訪問者引導至促銷和重要頁面

在本文中，我們將向您展示 15 多個優秀的 WordPress 滑塊示例。 我們還將向您展示如何為您自己的網站快速創建華麗的滑塊。

滑塊靈感展示

以下是一些啟發您靈感的滑塊的最佳示例。 我們用來挑選這些滑塊的標準是 1) 創造力和 2) 可用性。 有些設計兩者兼而有之，而有些設計只有一個方面。

CNBC Prime

CNBC 的滑塊清晰易讀。 他們為節目標題使用粗字體，因此易於閱讀。 為文本著色確實有助於它在背景中脫穎而出。

哥倫比亞廣播公司

CBS 的滑塊使用具有大字體和大量空白的引人注目的圖像，使其易於閱讀和使用。 大項目符號讓您非常清楚單擊時會發生什麼。

奧蘭多環球影城

Universal 的滑塊有一個簡單的目的：吸引您參觀他們的遊樂園。 儘管 CTA 提供了一些誘人的報價，但照片卻能說明一切。

薩維爾鴿舍

Saville's 使用優雅的襯線字體搭配照片，突出鴿子窩的質量和工藝。 他們還解釋了他們對鴿子的廣泛了解，因此您可以確定您正在為您的羽毛朋友購買絕對最好的房屋。

木蘭麵包店

Magnolia Bakery 是僅圖像滑塊的一個很好的例子。 當你有美味的糕點時，誰需要閒聊？ 這三個迷你滑塊在這個網頁上看起來很美味。

火焰峽谷

火焰峽谷是猶他州的熱門景點。 他們畫廊的頭條新聞說明了一切：您可以在火焰峽谷度假勝地享受廣闊的視野，而無需粗暴。

前進主題

Headway Themes 創造性地使用了滑塊。 他們沒有使用典型的頁面頂部滑塊，而是將其放置在更下方，並使用它來展示使用其主題的網站。 聰明的！

史密森尼弗里爾薩克勒畫廊

Smithsonian Freer Sackler 使用簡單的導航滑塊將您引導至網站上的關鍵頁面。 滑塊簡潔乾淨的外觀，周圍環繞著吸引您進入圖像的空白，非常適合藝術畫廊。

孤獨星球

Lonely Planet 的滑塊具有旋轉的全屏圖像和引人注目的動畫效果。 這不僅是一個外觀華麗的滑塊，而且它也很容易導航到任何你喜歡的地方。

東灣

Converse 的滑塊將所有焦點都放在了應有的位置：產品上。 這個滑塊的細節和紋理非常清晰，您幾乎可以伸手觸摸織物。

希茲

Sheetz 的滑塊使用明亮、有趣的顏色和交互式前進按鈕，當您將鼠標懸停在它們上方時，這些按鈕會滑出。 像這樣的滑塊只是乞求玩。

的Xbox

Xbox 的滑塊使用簡潔的產品圖像、少量文字和大量空白來實現簡潔。 這絕對是少即是多的情況。

蒂姆霍頓斯

Tim Hortons 的滑塊是工作中美食攝影的經典例子。 令人垂涎欲滴，搭配一些超值優惠，然後 BOOM！ 你有一個非常難以抗拒的滑塊。

索尼裂紋

Crackle 採用簡單的白色和橙色配色方案，吸引人們對旋轉滑塊的注意。 每張幻燈片上的小廣告讓您有打開電子管並觀看一些電視節目的衝動。

史密森學會

史密森尼的滑塊使用大而顯眼的箭頭，因此您可以導航回您錯過的上一張幻燈片。 在這種情況下，這一點很重要，因為每張幻燈片上都有很多文本需要閱讀。

盧浮宮

盧浮宮的滑塊正是您所期望的：歷史悠久且優雅。 這要歸功於圖像中充足的空白、襯線字體以及簡單而戲劇性的淡入黑色。 這個滑塊的另一個好處是右下角的播放/暫停按鈕。

如何創建自己的 WordPress 滑塊

現在您可能想知道， “這些滑塊很棒，但我怎樣才能為我自己的網站創建一個？”

好吧，謝天謝地，多虧了 WordPress 的 Soliloquy 插件，它實際上非常簡單。

首先，您需要安裝並激活 Soliloquy Slider 插件。 有關更多詳細信息，請參閱有關如何在 WordPress 中安裝插件的分步指南。

接下來，是時候創建您的第一個滑塊了。 轉到Soliloquy » Add New以添加滑塊。 如果您需要上傳圖像，您可以從計算機中選擇文件。 如果您已經將圖像上傳到您的網站，請選擇其他來源的文件。

繼續向下滾動。 您將看到為滑塊選擇的圖像。 從這裡，您可以單擊鉛筆圖標來編輯圖像，或單擊紅色 X 以從滑塊中刪除圖像。

您還可以通過選擇左側的配置選項卡來配置有關滑塊的其他詳細信息。 您可以設置圖像大小、滑塊主題和幻燈片過渡的速度。 您的文本標題位置也可以在此處更改。 查看這些設置。

對設置感到滿意後，請查看“移動”選項卡。 這將允許您測試您的網站在移動設備上的外觀，並根據需要調整您的移動分辨率設置。

（另外，請參閱Misc選項卡以導入或導出滑塊。）

將滑塊添加到頁面或帖子

您已經完成了滑塊的創建！ 現在是時候將其添加到您選擇的帖子或頁面中了。 編輯帖子或頁面，單擊添加滑塊按鈕，然後選擇您的滑塊。 請記住發布或更新您的帖子/頁面以保存更改。

您的滑塊現在將在您的網站上生效：

而已！ 您現在擁有自己的 WordPress 滑塊。 我們希望這篇文章能通過 15 個以上優秀的 WordPress 滑塊示例啟發您，並幫助您創建您的第一個滑塊。

您可能還想查看在設計滑塊時可以使用的所有高級功能。 自定義滑塊的可能性幾乎是無窮無盡的，所以今天就開始使用 Soliliquy！ 這裡只是一些你可以用 Soliloquy 滑塊做什麼的例子。

• 在 WordPress 中創建全角圖像滑塊
• 在 WordPress 中更改滑塊時間
• 在 WordPress 中創建響應式視頻滑塊

如果您喜歡這篇文章，請在 Facebook 和 Twitter 上關注我們以獲取更多免費的 WordPress 教程。