用 Elementor 編輯首頁：添加模塊（文字、圖片、按鈕等）

學會添加基礎模塊是用 Elementor 設計頁面的核心技能。本章節將手把手教你如何添加文字、圖片、按鈕等常用元素，並調整它們的樣式，讓你的首頁初具雛形。

準備工作：進入 Elementor 編輯模式

1. 登錄 WordPress 後臺，進入「頁面」→ 找到「首頁」（或你要編輯的頁面），點擊「編輯」。
2. 在頁面頂部點擊「使用 Elementor 編輯」按鈕（藍色，帶 Elementor 圖標），進入可視化編輯界面。

進入後，界面分爲三部分：

• 左側：模塊面板（包含所有可添加的元素）
• 中間：編輯區域（實時顯示頁面效果）
• 右側：樣式面板（選中元素後，可調整細節樣式）

第一步：添加「標題」模塊（文字標題）

標題是頁面的「骨架」，用於引導訪客理解內容層級。

1. 找到標題模塊在左側模塊面板中，找到「基本」分類下的「標題」模塊（圖標爲「T」）。
2. 拖拽添加到頁面按住「標題」模塊，拖拽到中間編輯區域的「+ 拖動元素到這裏」位置，鬆開鼠標。此時頁面會出現一個默認標題「這是標題」。
3. 修改標題內容選中剛添加的標題模塊，右側會彈出編輯面板：
   • 在「內容」→「標題文本」中，刪除默認文字，輸入你的標題（如「歡迎來到我的個人博客」）。
   • 在「標題級別」中選擇層級（H1 最大，適合主標題；H2 次之，適合副標題，按內容層級選擇）。
4. 調整標題樣式點擊右側面板的「樣式」標籤，可自定義：
   • 字體：在「字體」下拉框中選擇喜歡的字體（如「微軟雅黑」「Arial」）。
   • 大小：拖動「字體大小」滑塊，或直接輸入數值（建議標題大小在 24-48px 之間）。
   • 顏色：點擊「文本顏色」方塊，選擇標題顏色（如黑色、深藍色）。
   • 對齊：點擊「文本對齊」按鈕，設置標題居左、居中或居右（首頁主標題建議居中）。

第二步：添加「段落」模塊（正文文字）

段落用於展示詳細內容，如簡介、說明等。

1. 添加段落模塊在左側「基本」分類中找到「段落」模塊（圖標爲段落符號），拖拽到標題模塊的下方。
2. 修改段落內容選中段落模塊，在右側「內容」→「文本」中輸入內容（如「這裏分享我的生活感悟和學習筆記，歡迎常來交流！」）。
3. 優化段落樣式切換到「樣式」標籤：
   • 字體大小：建議設置爲 16-18px（方便閱讀）。
   • 行高：調整爲 1.5-1.8 倍（讓文字間距更舒適）。
   • 顏色：選擇與標題區分的顏色（如深灰色，避免與背景色太接近）。

第三步：添加「圖片」模塊（插入圖片）

圖片能讓頁面更生動，建議選擇清晰、相關的圖片（如個人照片、產品圖、風景圖）。

1. 上傳或選擇圖片在左側「基本」分類中找到「圖片」模塊，拖拽到段落下方。選中圖片模塊，在右側「內容」→「圖片」中點擊「選擇圖片」：
   • 若圖片已在電腦中，點擊「上傳文件」→ 選擇圖片 → 點擊「選擇」。
   • 若之前上傳過，直接在「媒體庫」中選擇已有的圖片。
2. 調整圖片顯示效果切換到「樣式」標籤：
   • 尺寸：在「寬度」中設置圖片佔頁面的比例（如 100% 表示全屏寬度，80% 表示窄一點）。
   • 圓角：拖動「邊框半徑」滑塊，讓圖片邊角變圓（數值越大，圓角越明顯）。
   • 陰影：開啓「盒子陰影」，可爲圖片添加輕微陰影（讓圖片更有層次感）。
3. 添加圖片描述（可選）在「內容」→「替代文本」中輸入圖片描述（如「我的旅行照片」），有助於搜索引擎理解圖片內容，提升 SEO。

第四步：添加「按鈕」模塊（引導點擊）

按鈕常用於引導訪客操作，如「查看更多」「聯繫我」「立即購買」等。

1. 添加按鈕模塊在左側「基本」分類中找到「按鈕」模塊，拖拽到圖片下方。
2. 設置按鈕內容與鏈接選中按鈕模塊，在右側「內容」中：
   • 文本：輸入按鈕文字（如「查看我的文章」）。
   • 鏈接：點擊「動態」旁邊的輸入框，輸入鏈接地址（如你的博客列表頁地址，或外部鏈接）。
     • 若鏈接到站內頁面，可點擊輸入框右側的「選擇頁面」圖標，直接選擇目標頁面。
3. 設計按鈕樣式切換到「樣式」標籤，打造醒目的按鈕：
   • 顏色：「文本顏色」選白色，「背景顏色」選鮮豔色（如藍色、橙色，與頁面主色調協調）。
   • 尺寸：「按鈕大小」選「中等」或「大」，讓按鈕更易點擊。
   • 形狀：「邊框半徑」設爲 5-10px（輕微圓角更美觀）。
   • ** hover 效果 **：點擊「hover」選項卡，設置鼠標懸停時的顏色（如顏色加深），提升交互感。

第五步：調整模塊間距（讓頁面更整齊）

添加多個模塊後，可能會出現間距過近或過遠的問題，需要調整佈局：

1. 選中模塊：點擊模塊邊緣（出現藍色邊框）。
2. 調整外邊距：在右側面板「高級」→「外邊距」中，設置模塊與上下元素的距離（如「頂部外邊距」設爲 30px，增加與上方模塊的間距）。
3. 統一對齊按住 Ctrl 鍵（或 Command 鍵）同時選中多個模塊，點擊頂部工具欄的「對齊」按鈕（如「居中對齊」），讓元素排列更整齊。

第六步：保存與預覽

1. 保存修改：點擊頁面左下角的「更新」按鈕（每次修改後建議及時保存）。
2. 預覽效果：點擊左上角的「預覽」按鈕，選擇「桌面預覽」「平板預覽」「手機預覽」，檢查不同設備上的顯示效果（確保手機上文字不重疊、圖片不變形）。

新手小貼士

• 模塊可重複添加：如需多個段落或圖片，直接多次拖拽對應模塊即可。
• 刪除模塊：選中模塊後，按鍵盤 Delete 鍵，或點擊模塊上方的「垃圾桶」圖標。
• 複製模塊：選中模塊後，點擊「複製」圖標，可快速複製相同樣式的元素（修改內容即可）。

通過以上步驟，你已經掌握了 Elementor 最核心的模塊添加技能。接下來可以嘗試添加「圖標」「分隔線」「列表」等模塊，讓首頁更豐富！