用 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 最核心的模块添加技能。接下来可以尝试添加「图标」「分隔线」「列表」等模块，让首页更丰富！