教學影片｜Elementor 欄位設計與 RWD 設定實戰
為什麼欄位設計與樣式設定這麼重要？
在網頁排版中，欄位設計與樣式設定決定了畫面的層次感與專業度。
只要善用 Elementor 提供的內距、邊界、比例與樣式工具，即使不寫程式，也能做出結構清楚、視覺舒服的版面。
接下來的內容，將依序說明 Elementor 中最關鍵的幾個設定技巧。
內距（Padding）與邊界（Margin）的正確使用方式
在 Elementor 中，「內距」與「邊界」是用來控制區塊之間距離的重要屬性。
1. 設定內距（Padding）
首先，我們在畫面中拖曳一個「區塊」，並在裡面放入一個「標題」元件。
點擊標題旁的編輯圖示後，在左側面板切換到「進階」標籤。
在「邊框間距（Padding）」欄位中輸入 20px，可以看到標題四周自動留出空白，這就是內距的效果。
這裡有一個實用小技巧：
使用連鎖圖示可以一次設定四個邊的相同間距；取消連鎖後，則可以分別設定上、右、下、左不同的數值。
2. 設定邊界（Margin）
接著，我們點擊區塊的「邊界（Margin）」設定，將連鎖符號取消，分別在上、下欄位輸入 50px。
這樣可以讓整個區塊與上下其他區塊保持適當距離，讓版面不會顯得擁擠。
欄位比例調整與左右配置技巧
在網站設計中，欄位比例的調整可以有效強調內容的主次關係。
1. 設定欄位比例
新增一個區塊後，選擇「兩欄結構」，在「版面配置」中找到「欄寬比例」。
例如，將左側欄位設為 30%，右側欄位設為 70%，就能形成主次分明的版面配置；
若希望畫面整齊一致，也可以設定為平均分配。
2. 對齊方式與高度設定
區塊本身也可以設定最小高度，例如設定為 600px，並調整內容在區塊中的對齊位置。
此外，也能透過 Gaps 設定，控制區塊內各個小工具之間的距離，讓整體排版更有呼吸感。
樣式設定：邊框、陰影與圓角的實務應用
適當的樣式設定，可以讓網站看起來更有質感，而不只是「把內容放上去」。
1. 邊框與陰影設定
以「圖片」元件為例，在「樣式」標籤中選擇「邊框」，設定為：
- 邊框類型：實線
- 寬度：2px
- 顏色：深灰色
接著在「陰影」選項中，調整透明度與模糊度，讓圖片呈現微微浮起的立體感。
2. 圓角設定
在「圓角」欄位中輸入 10px，圖片四角就會變得圓潤，更符合現代網站風格。
如果需要在圖片下方加入標題或文字，也可以搭配「分隔線」元件，讓內容層次更清楚。
背景設定：單色、漸層與圖片背景
好的背景設計，可以大幅提升網站整體視覺風格。
新增一個區塊後，點擊編輯圖示，在「樣式」標籤中選擇「背景類型」。
1. 單色背景
可以設定為淺灰色，讓內容區塊與其他區域產生區隔。
2. 漸層背景
也可以選擇漸層背景，例如從深藍色到淺藍色，營造層次與設計感。
3. 圖片背景
若使用圖片背景，記得將顯示方式設為「覆蓋」，讓圖片填滿整個區塊，不受比例影響。
文字樣式設定：讓標題更吸睛
我們可以再拖曳一個「標題」元件作為示範。
在「樣式」標籤中設定：
- 字體：思源黑體 Noto Sans TC
- 字體大小：32px
- 字重：較粗
- 顏色：深藍色
接著在「陰影」設定中加入淡灰色陰影，讓文字在背景上更突出。
動態效果與 Hover 效果的應用
適度的動態效果，可以提升網站互動感，但不宜過度使用。
1. 按鈕 Hover 效果
拖曳一個「按鈕」元件，文字設定為「立即聯繫」。
在一般狀態下，設定綠色背景與白色文字；
切換到「游標暫留（Hover）」標籤後，將背景色改為黃色，並加上「Grow 放大」效果。
2. 區塊滑入動畫
選取整個區塊，在「進階」標籤中找到動態效果，選擇「右側滑入」，讓區塊在載入時從右側滑入顯示。
響應式設計（RWD）：確保各種裝置都好看
由於使用者會在桌機、平板與手機上瀏覽網站，因此 RWD 設定非常重要。
1. 切換裝置預覽模式
在 Elementor 編輯器上方，可以看到「桌機」、「平板」、「手機」三個圖示。
點擊不同裝置圖示後，頁面會自動切換成對應的寬度，讓你即時檢查顯示效果。
2. 隱藏特定裝置的元件
選取需要調整的欄位或元件，進入「進階」→「回應式」。
你可以選擇：
- 隱藏在桌機
- 隱藏在平板
- 隱藏在手機
例如，若某張大型圖片只適合桌機顯示，就可以勾選「隱藏在手機」。
調整欄位順序與寬度（手機版必學）
在平板或手機模式下，你可以調整欄位的排列方向，讓內容順序更符合手機閱讀習慣。
如果多欄在手機畫面中顯得擁擠，可以將欄位寬度設為 100%，讓內容改為單欄顯示。
不同裝置的字體與間距微調技巧
不同裝置上，字體大小與間距往往需要分開設定。
1. 字體大小調整
選取標題元件，在字體大小旁點擊裝置圖示，切換到手機模式，將標題從 32px 調整為 24px。
2. 間距調整
選取區塊後，可以將桌機模式的 40px 間距，改為手機模式的 20px，確保閱讀時不會過於擁擠。
透過這一篇完整的 Elementor 欄位設計與 RWD 教學，你已經掌握了從間距控制、比例配置、樣式美化，到響應式調整的核心技巧。
只要善用這些設定，即使不寫任何程式碼，也能做出在各種裝置上都清楚、好讀又有質感的網站版面。
常見問題（FAQ）
內距（Padding） 與邊界（Margin）哪個比較重要？
兩者都很重要。內距讓元件本身內容有呼吸空間，邊界則是元件與元件之間的距離。適當搭配能提升頁面整體節奏與可讀性。
如果欄位比例不好看，怎麼修正？
可在 Elementor「版面配置 > 欄寬比例」中手動設定百分比，或拖拉欄位邊緣調整寬度。
RWD 模式下頁面跑掉怎麼辦？
使用 Elementor 預覽模式的裝置切換功能，逐一微調字體大小、間距與欄位顯示設定，即可獲得各裝置一致的體驗。
欄位間距設定太大與太小會有什麼影響？
太大會讓頁面過度留白、資訊切割不連貫；太小會讓內容緊湊、視覺不舒服。建議依「層次感」與「內容密度」調整。
Elementor 動畫效果會降低 SEO 嗎？
純 CSS 動畫不會影響 SEO，但過度使用 JavaScript 效果會加載更多資源，有可能稍微降低載入速度。請斟酌使用。
