如何在 Elementor 中新增 Full-Width Slider：完整指南與範例

全寬 滑動頁面是一種廣受歡迎的設計元素，能夠吸引注意力，是展示特色圖片、促銷活動和關鍵訊息的理想選擇。 元素 讓您可以直接在 WordPress 網站上建立全寬滑桿。本指南提供詳細的步驟和範例，以協助設定和自訂全寬滑桿。

步驟 1：安裝並啟動 Elementor 外掛程式

如果未安裝 Elementor，請遵循以下步驟：

1. 登入 WordPress 控制台。
2. 導覽到 外掛程式 > 新增 外掛程式.

3. 在搜尋列中，輸入 元素, 然後按一下 安裝.

4. 安裝完成後，按一下 啟動.

本指南使用 Elementor Pro，其中包括 滑桿 小工具。如果沒有 Elementor Pro，可以使用第三方外掛程式，例如 Elementor 的基本附加元件 也提供滑桿功能。

步驟 2：建立新頁面或編輯現有頁面

若要新增滑桿，請 建立新頁面 或 編輯 現有的:

1. 前往 頁面 > 新增 頁數 編輯新頁面，或選擇現有頁面進行編輯。

2. 按一下 使用 Elementor 編輯 開啟 Elementor 編輯器。

步驟 3：新增滑桿小工具

在 Elementor 中，使用 Slider widget：

1. 按一下 新增容器 按鈕，然後選擇 單欄佈局.

2. 請在左側面板中搜尋 滑桿 Widget 並將其拖曳到區段中。

步驟 4：設定滑塊設定

自訂滑桿內容：

1. 新增幻燈片內容:點選每張幻燈片、上傳影像，並新增 名稱, 描述和一個 動作 按鈕。

2. 範例:旅遊部落格可以用" "來展示熱門目的地。瞭解更多「 或 」探索"按鈕。

3. 設定背景圖片:使用高解析度圖片 (至少 1920px 寬) 以維持清晰度。
   • 最佳實務:優化 100KB 至 300KB 的影像，以加快載入速度。
4. 按鈕連結:將每張幻燈片的按鈕連結至相關頁面，例如產品頁面或部落格文章。

步驟 5：設定全寬佈局

要以全寬顯示滑桿：

1. 選取有滑桿 widget 的區段，然後按一下 編輯容器.

2. 在 佈局 選項卡，設定 內容寬度 至 全寬.

3. 設定 列間隙 至 無間隙 所以滑桿會覆蓋整個螢幕寬度。

4. 前往 進階 索引標籤，並設定 邊際利潤 和 襯墊 為零，確保滑桿與螢幕邊緣對齊。

5. 攝影作品集可以使用全寬滑桿來展示橫向圖片，不留邊界地覆蓋螢幕。

步驟 6：自訂滑動器的外觀

調整滑桿的樣式：

1. 高度設定:在 內容 選項卡，調整高度以符合設計。選項如 適合螢幕 或自訂高度設定 (例如 600px)。

2. 背景覆蓋:在樣式索引標籤中，新增半透明背景覆蓋，以改善文字的可讀性。
   • 在明亮的影像上使用深色覆疊，或在暗淡的影像上使用淺色覆疊。

3. 排版:您可以調整字型、樣式和顏色，以符合網站的品牌形象。Elementor 可讓您自訂標題、描述和按鈕的排版。

4. 動畫效果:新增 入口動畫 或 懸停效果 在 進階 互動性的標籤。

步驟 7：儲存與預覽

完成滑桿設定後：

1. 按一下 發表 或 更新.
2. 使用 預覽 按鈕 (眼睛圖示) 來查看滑桿的實時外觀。

檢查滑桿是否能在各種裝置（桌上型電腦、平板電腦和行動裝置）上正確載入並顯示良好。

總結

全寬滑桿可增加視覺衝擊力，突顯特色內容，例如促銷或重要訊息。Elementor 提供一系列的客製化選項，讓您輕鬆製作具反應性且吸引人的滑桿。

常見問題

1.為什麼滑桿不是全寬顯示？

檢查 章節 和 專欄 佈局設定為 全寬 以及 邊際 和 襯墊 設定為零。

2.如何加快滑桿的載入時間？

將影像儲存為 JPEG 或 WebP 等格式，以最佳化影像。檔案大小最好在 100KB 到 300KB 之間。

3.如何讓滑桿更具互動性？

使用 入口動畫 和 懸停效果 中的 進階 標籤可以增添動感。

依照這些步驟和範例，就能建立全寬滑桿，強化網站版面並改善使用者體驗。