构建器总有它不给的开关。这时候会写一点 CSS，你就不会被「这个改不了」卡住两天。
CSS 可以写在三个地方，优先级和用途都不同
| 位置 | 作用范围 | 适合什么 |
|---|---|---|
| 元素 Advanced → Custom CSS | 这一个元素及其子元素 | 一次性微调、伪元素、hover 动效 |
| 页面设置 → 自定义 CSS | 当前页面 | 某一落地页的特殊布局 |
| Site Settings → Additional CSS（或主题的自定义额外 CSS） | 全站 | 通用规则、组件类、暗色模式覆盖 |
元素内联 CSS 里有个专用占位符 {{WRAPPER}}，会被替换成当前元素的唯一类名。写嵌套选择器时不要自己拼 elementor-id，用 {{WRAPPER}} .child-selector {} 才不会被复制粘贴打乱。
四条写法约定
- 先想选择器，再想 !important。加 !important 只是把问题推给下一次，通常是你漏了更精确的父级
- 自定义类名走统一前缀，例如 .jh-card、.jh-hero，一眼看出哪些不是构建器原生
- 数值用 Elementor 的变量或 CSS 自定义属性集中管理，全站改宽度只改一处
- 每段规则写一行注释说明它解决什么。三个月后你不会记得这条 padding 为什么是 -24px
/* 卡片 hover：整卡上移并加投影（.jh-card 挂在卡片容器上） */
.jh-card{transition:transform .25s ease,box-shadow .25s ease}
.jh-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.10)}字体：本地托管比 Google 外链更稳
Elementor 的字体来源有三种：
- 内置字体（含系统字体栈）：零成本，但品牌感弱
- Google Fonts：Elementor 默认外链加载，缺点是首屏多一次跨域请求，且在欧盟有隐私合规争议（GDPR 相关的字体外链案例不是理论风险）
- 自定义字体上传：Site Settings → Appearance → Custom Fonts，传 woff2，可选 Weight 与 Style
建议做法：品牌标题用一两个自托管 woff2，正文用系统字体栈。中文正文不要指望一套西文字体覆盖，中文字体文件动辄几 MB，必须靠子集化或直接走系统字体。
验证是否真的在本地加载：看 Network 里有没有 fonts.gstatic.com 的请求。有，说明站点某处仍在引用 Google 字体，可能是主题或另一个插件，不一定是 Elementor。
改完不生效的五个原因
- 缓存：Elementor「Regenerate CSS」加页面缓存插件同时清
- 选择器写错层：构建器输出多层 wrapper，直接选 .elementor-widget-container 里的 h2 常常选不到
- 断点没覆盖：只改了桌面，平板与手机用的是另一份值
- 主题的样式表在 Elementor 之后加载，同名规则它赢，用更具体的选择器解决
- JS 合并或延迟脚本把内联样式抽走了（常见于性能插件），先关掉再验
如果排查到最后发现是编辑器本身打不开，见 Elementor 编辑器加载失败。
自定义 CSS 是逃生舱，不是主航道。同一个页面里出现二十条手写规则，说明结构或全局设置本身该改了。