全寬 滑動頁面是一種廣受歡迎的設計元素，能夠吸引注意力，是展示特色圖片、促銷活動和關鍵訊息的理想選擇。 元素 讓您可以直接在 WordPress 網站上建立全寬滑桿。本指南提供詳細的步驟和範例，以協助設定和自訂全寬滑桿。
步驟 1：安裝並啟動 Elementor 外掛程式
If Elementor isn’t installed, follow these steps:
- 登入 WordPress 控制台。
- 導覽到 外掛程式 > 新增 外掛程式.
- 在搜尋列中，輸入 元素, 然後按一下 安裝.
- 安裝完成後，按一下 啟動.
本指南使用 Elementor Pro，其中包括 滑桿 widget. If Elementor Pro isn’t available, a third-party plugin like Elementor 的基本附加元件 也提供滑桿功能。
步驟 2：建立新頁面或編輯現有頁面
若要新增滑桿，請 建立新頁面 或 編輯 現有的:
- 前往 頁面 > 新增 頁數 編輯新頁面，或選擇現有頁面進行編輯。
- 按一下 使用 Elementor 編輯 開啟 Elementor 編輯器。
步驟 3：新增滑桿小工具
在 Elementor 中，使用 Slider widget：
- 按一下 新增容器 按鈕，然後選擇 單欄佈局.
- 請在左側面板中搜尋 滑桿 Widget 並將其拖曳到區段中。
步驟 4：設定滑塊設定
自訂滑桿內容：
- 新增幻燈片內容:點選每張幻燈片、上傳影像，並新增 名稱, 描述和一個 動作 按鈕。
- 範例: A travel blog could showcase popular destinations with a “瞭解更多「 或 」探索” button.
- 設定背景圖片:使用高解析度圖片 (至少 1920px 寬) 以維持清晰度。
- 最佳實務:優化 100KB 至 300KB 的影像，以加快載入速度。
- 按鈕連結: Link each slide’s button to relevant pages, such as product pages or blog posts.
步驟 5：設定全寬佈局
要以全寬顯示滑桿：
- 選取有滑桿 widget 的區段，然後按一下 編輯容器.
- 在 佈局 選項卡，設定 內容寬度 至 全寬.
- 設定 列間隙 至 無間隙 所以滑桿會覆蓋整個螢幕寬度。
- 前往 進階 索引標籤，並設定 邊際利潤 和 襯墊 為零，確保滑桿與螢幕邊緣對齊。
- 攝影作品集可以使用全寬滑桿來展示橫向圖片，不留邊界地覆蓋螢幕。
Step 6: Customize the Slider’s Appearance
To adjust the slider’s style:
- 高度設定:在 內容 選項卡，調整高度以符合設計。選項如 適合螢幕 或自訂高度設定 (例如 600px)。
- 背景覆蓋:在樣式索引標籤中，新增半透明背景覆蓋，以改善文字的可讀性。
- 在明亮的影像上使用深色覆疊，或在暗淡的影像上使用淺色覆疊。
- 排版: You can adjust fonts, styles, and colors to match the site’s branding. Elementor allows you to customize typography for titles, descriptions, and buttons.
- 動畫效果:新增 入口動畫 或 懸停效果 在 進階 互動性的標籤。
步驟 7：儲存與預覽
完成滑桿設定後：
- 按一下 發表 或 更新.
- 使用 預覽 按鈕 (眼睛圖示) 來查看滑桿的實時外觀。
檢查滑桿是否能在各種裝置（桌上型電腦、平板電腦和行動裝置）上正確載入並顯示良好。
總結
全寬滑桿可增加視覺衝擊力，突顯特色內容，例如促銷或重要訊息。Elementor 提供一系列的客製化選項，讓您輕鬆製作具反應性且吸引人的滑桿。
常見問題
1. Why isn’t the slider displaying in full width?
檢查 章節 和 專欄 佈局設定為 全寬 以及 邊際 和 襯墊 設定為零。
2.如何加快滑桿的載入時間？
將影像儲存為 JPEG 或 WebP 等格式，以最佳化影像。檔案大小最好在 100KB 到 300KB 之間。
3.如何讓滑桿更具互動性？
使用 入口動畫 和 懸停效果 in Elementor’s 進階 標籤可以增添動感。