EP03. “Elementor 页面构建器基础操作与 Flexbox”

这篇笔记讲 Elementor 编辑器的基本操作——建练习页面、加 Row/Element、常用基础元件，以及打版核心工具 Flexbox 的详细用法。前置知识：先看过《插件与主题基础-安装 Starter Template》，装好 Solace 主题和 Elementor。模板/AI/Grid 布局这些进阶内容看《Elementor模板-AI与Grid布局》。

重点内容

建练习页面

1. Pages → + New → Page，输入标题（例如 Practice）→ Publish
2. 想要空白页面（不显示标题）就点 Hide Title → Save
3. 点 Edit with Elementor 进入页面构建器

编辑器基础设置

Elementor logo → User Preferences：可以切换 Light Mode / Dark Mode

加 Row / Element

• 点 + 号 → 先选布局类型：Flexbox 或 Grid（两种打版逻辑，本篇讲 Flexbox，Grid 见下一篇）
• Flexbox 下会先选栏数（比如两栏）
• 每个 element 都有 3 个 tab：
  • Content：控制内容本身
  • Style：控制字体/颜色/文字描边等视觉效果
  • Advanced：控制 margin/padding，还有 Motion Effects（比如 zoom in、down、rotate in 等动画——不建议加太多花俏动画）

[截图：Elementor 元件编辑面板的 Content / Style / Advanced 三个 tab 切换栏]

常用基础元件

• Heading Text、Image（可从 Media Library 选图，Solace 自带免费 demo 图库可以直接用）、Text Editor、Button
  • 💡 Button 的连结栏位可以直接打页面名称（比如输入「contact」），Elementor 会自动帮你找到对应页面的 permalink 并插入连结
• 左侧元件面板分区：Basic Elements（免费可用）→ Pro Elements（需要 Elementor Pro）→ General Elements（免费可用，不确定用途可以直接拖进去试）

基本编辑操作

• 任何元件、row、column、section 都可以右键 → Duplicate / Delete
• 点六个点（container 的把手）可以选取整个 section 来编辑
• Edit Container → 可调宽度/高度；Style tab → Background type 选 Classic → 设背景色（可以只设某个 column，也可以设整个 section）
• Shape Divider（区块底部的造型分隔线）：内建 mountains、drops、clouds 等多种造型，宽高可调
• 整个 section 也可以右键 Duplicate 复制
• Publish 保存修改；做错了可以用 Elementor logo → History 回溯到之前任一版本
• 想让页面撑满全宽：右上角齿轮 → Page Settings → Page Layout → 选 Elementor Full Width

影片 / 图片进阶设置

• Video 元件：可设连结、Autoplay、Mute；Style tab 可调 Aspect Ratio，还有 CSS Filters（亮度、饱和度等，相当于内建 Photoshop）
• 图片同样支持 CSS Filters 调 Hue/饱和度

Flexbox 详解（打版核心工具）

• 加 Flexbox 时可选方向：Horizontal / Vertical，也可以选 Reversed（元素顺序反过来）
• 可以在 Flexbox 里再嵌套 container，分组控制里面的元素（比如两个按钮想并排显示，就把两个按钮各自放进一个内层 container，再对这个 container 设 Horizontal）
• Justify Content：Center / Space Between / Space Around / Space Evenly，控制元素在容器内怎么分布
• Align Items：控制元素的对齐方式
• Gap：控制元素之间的间距（比用 margin/padding 手动加间距更有弹性、也更响应式）

[截图：Flexbox 容器的 Justify Content / Align Items / Gap 设置面板]

实例：仿造一个「文字 + 两个按钮 + 右侧图片」的 landing page 区块——用嵌套 Flexbox 分别控制文字宽度（比如设 55% 避免撑满整行）、两个按钮并排、以及右侧图片区块，全部靠 Flexbox 而不是 margin/padding 完成。

Section 背景也可以设 Gradient（渐层）：选两个颜色、设各自的位置、设角度，linear（线性）比 radial（放射状，从中心扩散）视觉上更耐看。

⚠️ 元件堆叠提醒

编辑时如果发现元素看起来是叠在一起而不是并排，通常是页面宽度不够，关掉编辑器面板预览就会恢复正常并排显示，这是正常现象不是 bug。

常见误区

• ❌ 想让多个元素并排显示，用 margin/padding 手动调间距——用 Flexbox 的 Gap 属性更有弹性，而且响应式表现更好
• ❌ 编辑时看到元素叠在一起就以为是出错了——多半只是编辑器面板占用了页面宽度，关掉面板预览就恢复正常，不用紧张排查
• ❌ Button 的连结栏位手动去页面里复制粘贴网址——直接打页面名称，Elementor 会自动帮忙找到对应 permalink
• 💡 想做出多个按钮但不想视觉上太单调，试试不同颜色搭配（比如一黑一橘），比同色系更能吸引不同类型访客的注意

Sources

YouTube：

1. Elementor Page Builder Basics - Widgets, Flexbox, Grid, Global Styles — Daryl Wilson — https://www.youtube.com/watch?v=xXa8d3O-NK0

官方文档：

1. Introducing Elementor 3.6: Leverage Flexbox Containers — https://elementor.com/blog/introducing-flexbox-containers/