编辑器与布局

Elementor 编辑器、Container 和全局设置怎么用?

真正把页面做整齐的关键,不是记住更多组件,而是理解层级、间距和全局规则。先学会 Container、Gap、Padding、Margin 和 Site Settings,后面做十个页面也不会越改越乱。

编辑器里先认识哪几个地方

左侧面板用于添加组件和修改内容;中央画布是当前页面;Navigator 用来查看 Container 与组件的层级;页面设置用来改布局、标题和发布状态。刚开始先在 Content 填内容,再去 Style 调样式,最后才用 Advanced 处理特殊情况。

操作截图整理中Elementor 编辑器与 Navigator建议文件名:elementor-detail-04-editor-navigator.webp建议 Alt:Elementor编辑器组件面板画布和Navigator层级截图需要展示:展示左侧 Content/Style/Advanced、中央画布与 Navigator。

Container 是什么

Container 就是装内容的盒子。一个产品页首屏通常有外层 Container,再包含左侧文字和右侧图片两个子 Container,里面才放标题、正文、卖点和按钮。桌面端可以 Row 横向排列;手机端通常改为 Column 上下排列。

Gap、Padding、Margin 分别什么时候用

Gap 管同一 Container 内元素之间的距离,优先用它;Padding 是盒子内部内容到边缘的留白,适合整个区块;Margin 是盒子与别的区块之间的距离,适合少量单独调整。不要把大量空格、Spacer 或负 Margin 当作排版工具,手机端最容易错。

全局颜色和字体在哪里设置

在编辑器主菜单进入 Site Settings,先定义主色、深色标题、正文色、浅背景和少量强调色;再定义标题、正文、按钮的字体规则。以后页面改品牌色或正文大小,不需要挨个组件找。

页面布局该选 Full Width 还是 Canvas

普通产品页、服务页和 About 页通常用 Elementor Full Width:保留 Header/Footer,内容区自由布局。Canvas 会隐藏 Header/Footer,只适合广告落地页或特殊独立页面。选择前先想客户是否还需要继续浏览网站。

完成检查

  • 能在 Navigator 看懂当前组件层级。
  • 用 Gap、Padding、Margin 的用途不混淆。
  • 已经建立基础全局颜色和字体规则。
  • 知道企业页通常使用 Full Width。