EP04. “Elementor 模板、AI 与 Grid 布局”
🔒 登录后可标记已读这篇笔记接续《Elementor基础操作与Flexbox》，讲怎么存取自己的设计模板、Elementor AI 好不好用、Grid 布局的操作方式，以及一个完整的 CTA 区块实作示范，最后介绍编辑器顶部工具列和 Site Settings（内建迷你版 Theme Customizer）。
重点内容
模板 / 区块 / AI
左侧「插入模板」图示：
- Blocks / Pages：多数是 Pro 专属，样式参差不齐
- My Templates：自己存的区块，可以右键任一 section → Save as Template，之后要用时从 My Templates 里 Insert 到任何页面/位置
Elementor AI：
- 需先 Connect
- 输入 prompt（比如「create me a three column row for my staff」）→ Generate，会给出几个版本供选择（含 Pro 版本，免费用户无法使用）
- 📌 作者评价：AI 生成 section 的效果不算好，但用来生成 CSS 效果不错；免费额度用完后是付费服务；整体不建议依赖 AI builder——AI 生成的设计通常缺乏个性化，后续想改反而更麻烦、更花钱，自己动手做通常比猜 AI 会给什么更快
Grid 布局
- 跟 Flexbox 不同，Grid 是先固定几栏几列的框架，往里面拖元件时会自动排入下一个格子
- 💡 小技巧：可以在每个 grid 格子里先放一个 container，再往 container 里塞多个元件，就能在单一格子里放更复杂的内容（标题+按钮+图片等）
- Layout 设置：可调列数、行数、格子间的 Gap
[截图：Grid 布局的 Layout 设置面板，列数/行数/Gap 的输入框]
- 特别适合拿来做 Portfolio 类型的图片墙
- 可以随时把 Grid 切换成 Flexbox 模式（反之亦然），两种打版逻辑可以互换
Margin 进阶示例
Divider（分隔线）元件：样式可选 slashes / squared / zigzag / solid line 等 示范用 Advanced → Margin 把 divider 往上推、藏到文字后面制造设计感（margin 属于比较进阶的用法）
Counter 模块
搜索「counter」即可找到，可设起始数字、前缀、样式（数字字体/颜色等）
Call To Action 区块实作示范
一个「大字标题 + 副标 + 按钮」CTA 区块的完整做法：
- Flexbox（Down/Vertical 方向）+ Text Editor（大标题）+ Text Editor 设为 H3 标签（比 H2 小一号）+ 说明文字 + Button
- Container 设 Full Width，Align Items 设 Center 让内容居中
- ⚠️ 有些元件（尤其部分 Text Editor）的对齐设置是独立于 Flexbox 之外的，要另外在 Style tab 里手动把 Alignment 设成 Center
- Container Style → Classic → 设背景色（比如黑底）
- 文字颜色改白色（Style → 文字颜色）
- 💡 复制样式技巧：右键某个已设计好样式的元件 → Copy，再右键另一个元件 → Paste Style，就能把样式套用过去（对按钮特别好用）
- 缩小 Gap 让区块更紧凑
- Advanced → Background 可以给单一文字元件加背景色（比如按钮式的橘色背景）
- 想要圆角效果 → Advanced → Border → 加 Border Radius
Elementor 顶部工具列功能
| 功能 | 说明 |
|---|---|
| Preview | 新分页预览，不用关闭编辑器 |
| Help | 官方帮助 |
| Finder | 快速跳转到其他页面进行编辑，不用手动关闭再打开 |
| Announcements | Elementor 更新公告（📌 近期公告比较常在推销自家其他插件） |
| Checklist | 编辑提醒清单（不算太实用） |
| Page Settings（齿轮图示） | Hide Title、Page Layout 设 Full Width（一般页面建议都用 Elementor Full Width） |
| Home | 切换到其他页面 |
| Navigator / 结构面板 | 显示 container 内部的元件层级结构，可以直接展开点击对应元件、也能直接拖拽调整元素/区块顺序，还能右键 duplicate/delete。做 Pro 版的自定义 header 时特别有用（有些元件不好直接点选时可以靠 Navigator 定位） |
Site Settings（内建的迷你版 Theme Customizer）
- Global Colors：可修改预设色板颜色，也可以新增自定义色（新增的颜色会出现在所有元件的颜色选项里）
[截图：Site Settings 里的 Global Colors 面板，预设色板和"新增颜色"按钮]
- Theme Global Solace：Solace 主题专属集成，可以快速调整连结颜色、连结 hover 颜色、按钮 hover 颜色、边框颜色等
- Global Fonts：可以针对 H1/H2/H3/Paragraph 分别设定预设字体——💡 建议整站最多用 2 种字体，用到 3 种以上容易显得廉价凌乱
- Global Images：可以统一设定全站图片的边框样式（比如 Double Border 双边框，视觉上蛮好看）
- Theme Style 设置：📌 不建议使用，容易跟 Elementor 本身的样式互相冲突；建议优先用 Elementor 自己的样式系统
常见误区
- ❌ 依赖 Elementor AI 生成整个 section 的设计——AI 生成的 section 效果通常不理想且缺乏个性化，用来生成 CSS 效果反而更实用，自己手动设计常常比调 AI prompt 更快
- ❌ 常用的设计每次都重新拼一遍——右键 Save as Template 存进 My Templates，之后直接 Insert 复用
- ❌ 整站用了 3 种以上字体——建议最多用 2 种，用太多容易显得廉价凌乱
- ❌ 同时用 Theme Style 设置和 Elementor 自己的样式系统——两者容易互相冲突，优先用 Elementor 的 Global Colors/Fonts
- 💡 想快速把一个元件的样式套到另一个元件（尤其是按钮），右键 Copy → 另一个元件右键 Paste Style，比重新手动设置一次快很多
Sources
YouTube：
- Elementor Page Builder Basics - Widgets, Flexbox, Grid, Global Styles — Daryl Wilson — https://www.youtube.com/watch?v=xXa8d3O-NK0
官方文档：
- Introducing Elementor 3.13 – Build Lean, and Flexible Website Layouts with CSS Grid — https://elementor.com/blog/introducing-313-new-css-grid-and-more/