您必須遵循的 11 個網站滑塊最佳實踐

您想向您的網站添加圖像滑塊嗎？ 在此之前，您應該了解一些最佳實踐。 在本文中，我們將分享 11 個網站滑塊最佳實踐，如果您希望滑塊對用戶友好，並吸引更多訪問者訪問您的網站，您必須遵循這些實踐。

如果您使用 WordPress，某些主題將附帶添加圖像滑塊的選項。 但是，這些滑塊中的大多數在功能上都非常有限。 要遵循所有這些最佳實踐（無需編寫自己的滑塊），我們建議使用像 Soliloquy 這樣的 WordPress 滑塊插件。

話雖如此，讓我們深入了解網站滑塊的 11 個最佳實踐……

1. 手機設計

你知道嗎？ 56% 的網站流量來自移動設備？ 這意味著超過一半的訪問者會從他們的移動設備上查看您的滑塊。

為了確保您的滑塊始終以應有的方式顯示和運行，您絕對必須使用響應式設計。 （響應式設計只是意味著您的滑塊可以根據一系列不同移動設備使用的小屏幕大小進行調整。）

如果您使用的是 Soliloquy Slider 插件，則不必擔心這一點，因為 Soliloquy 的所有主題都是完全響應式和移動友好的。 如果您願意，您甚至可以創建特定於移動設備的幻燈片，並更改移動設置，使您的滑塊在小屏幕上看起來完全符合您的要求。

2. 對帶有 4 個以上幻燈片的滑塊使用縮略圖導航

尤其是如果您的滑塊包含 4 張或更多幻燈片，您需要為訪問者提供一種在幻燈片之間導航的簡單方法。 向滑塊添加導航的最直觀、用戶友好的方法之一是使用滑塊縮略圖。

縮略圖允許您的訪問者預覽即將到來的和以前的幻燈片。 這樣，他們只需單擊一下即可找到所需的確切幻燈片，而無需來回擦洗。

這是帶有縮略圖導航的滑塊示例：

要了解更多信息，請查看我們的指南，了解如何在 WordPress 中添加帶有縮略圖的滑塊。

3. 在燈箱彈出窗口中顯示照片

如果您打算使用滑塊來顯示您的作品集或您想要展示的照片，您需要進行設置，以便在單擊時在燈箱彈出窗口中打開圖像。

這樣，您可以利用大屏幕和分辨率的完整查看區域來顯示您的精美照片。

這是燈箱滑塊的示例（單擊其中一張幻燈片以查看燈箱彈出窗口）：

要了解更多信息，請查看我們的指南，了解如何在 WordPress 中創建燈箱滑塊。

4. 安排您的促銷活動

如果您計劃使用滑塊來展示特別優惠和限時優惠，請確保將這些幻燈片安排為僅在促銷日出現。

如果您使用的是 Soliloquy，您可以為幻燈片設置開始和結束日期（如下所示）。

5. 導入您的社交媒體圖片

如果您經常將圖像發佈到社交媒體（例如 Instagram），則不應手動上傳這些圖像並將其插入到您的網站滑塊中。 這不是一個好的工作流程。

為了更好地管理您的時間，請將您的圖像直接從社交媒體導入您的圖像滑塊。

如果您使用 Soliloquy，您所要做的就是選擇“外部滑塊”並選擇您要從中導入的社交媒體帳戶。

這是一個 Instagram 滑塊示例，從我們 CEO 的 Instagram (@syedbalkhi) 中提取圖像：

要了解更多信息，請查看我們關於如何創建 Instagram 照片滑塊的指南。

6. 在幻燈片中添加 Pin-It 按鈕

說到社交媒體，Pinterest 是世界上最大的圖片分享平台。 您是否充分利用了這一點？

確保在您的幻燈片中添加 Pinterest 按鈕，以便您的觀眾可以直接將您的圖片分享到他們的 Pinterest 板上。

有關更多信息，請查看我們的指南，了解如何將 Pinterest 按鈕添加到 WordPress 中的圖像滑塊。

7. 保護您的幻燈片免受圖像盜竊

為確保沒有人可以從您的幻燈片中下載圖像並竊取它們，請確保禁用右鍵單擊功能。

要了解更多信息，請查看我們的指南，了解如何禁用右鍵單擊 WordPress 圖像滑塊。

8. 使用自定義 CSS

有時您可能需要自定義滑塊外觀的某些方面，使其完美匹配您網站的品牌和您的獨特需求。 添加您自己的自定義 CSS 代碼允許您執行此操作。

自定義 CSS 還為您的滑塊提供了個人風格，因此它們更令人難忘，並且看起來不像其他人的。

Soliloquy 允許您為完全獨特的滑塊添加自己的樣式表。 要了解更多信息，請查看我們的 CSS 樣式獨白指南。

9. 將產品幻燈片連接到您的購物車

如果您打算使用滑塊來顯示您要出售的產品，則需要將這些幻燈片連接到您的購物車。

WooCommerce 是我們推薦為您的網站添加購物車系統的 WordPress 插件。 它還可以輕鬆地與您的 Soliloquy 圖像滑塊集成。

要了解更多信息，請查看我們關於如何創建 WooCommerce 產品滑塊的指南。

10. 使用輪播展示 10 多張幻燈片

如果要在幻燈片中顯示 10 個或更多圖像，最好使用輪播佈局。

輪播以導航按鈕連續顯示您的幻燈片，使您可以輕鬆瀏覽滑塊中的所有圖像。

這是輪播滑塊的示例：

要了解更多信息，請查看我們的指南，了解如何在 WordPress 中創建響應式輪播滑塊。

11. 設置默認滑塊設置

特別是如果您計劃經常創建滑塊，您將需要設置默認滑塊設置，這樣您就不必在每次創建新滑塊時手動設置這些設置。

要了解如何在創建新滑塊時節省時間，請查看我們關於如何設置默認 WordPress 滑塊設置的指南。

而已！ 我們希望本文能幫助您了解您必須遵循的 11 個網站滑塊最佳實踐。 您可能還想查看我們的指南，了解如何在 WordPress 中創建圖像滑塊。

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