Elementor 构建迟早会撞到面板控制无法爬升的墙:Style 选项卡不提供的悬停效果,或者您在教程中找到的关键帧动画。Elementor 将每个元素自定义 CSS 保留在 Pro 许可证后面 自定义CSS 扩展于 Elementor 的主插件 删除该墙:免费编辑器中每个部分、容器、列和小部件上都有一个 CSS 编辑器。
Here 在编辑器中, CSS 降落在方框中, 见证卡片开始滑过画布同一秒:
自定义 CSS 扩展的作用 #
启用后,Elementor 编辑器中的每个元素都会得到一个 自定义CSS 其下的部分 高级 tab。inside 坐着一个代码编辑器, 语法突出显示和行号。无论你在那里写什么, 都只适用于那个元素, 画布会实时预览它, 所以你看着规则在你键入时生效。
编辑器支持 选择器 keyword,它代表元素自己的包装纸。写 selector { } and规则正是针对这个部分或小部件, 没有狩猎元素生成类名。孩子选择器也工作: selector .some-class 到达元素内部。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。免费版本就足够了。
- Elementor 的主插件 已安装并处于活动状态。插件新增?关注 安装指南 首先。
- Custom CSS 是一个免费扩展,因此不需要 Pro 许可证。
- CSS的一些。甚至复制粘贴的片段也起作用,因为选择器关键字去除了硬部分。
如何启用自定义 CSS 扩展 #
从您的 WordPress 仪表板,转到 主插件 并打开 扩展 tab。自定义CSS位于其中 实用工具小部件 带有流行徽章的组,旁边是 Custom JS 和 帖子/页面复制器。单击其切换使其变为紫色,然后点击 保存更改 并等待绿色“设置保存成功”通知。
在元素上打开自定义 CSS 编辑器 #
选择 Elementor 编辑器中的任何元素、演示中的整个容器,然后打开 高级 选项卡。滚动到 自定义CSS ma紫色徽章的部分并展开,出现一个空代码编辑器,下面有提示:使用“选择器”关键字来瞄准包装器元素。
写入或粘贴 CSS #
Demo 将一排静态的见证卡变成一个移动的跑马灯, 并带有一个关键帧动画:
selector {
animation: testimonial 5s linear infinite alternate;
}
@keyframes testimonial {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(calc(-100% + 100vw));
}
}Paste进去,画布立刻服从:卡片开始从右向左滑动,最后反转,循环,正好如本页顶部的GIF所示,没有什么可以先保存或刷新的 selector keyword 将动画固定到这个容器中,因此页面上没有其他内容被触摸。
页面上的结果 #
击 发表 前端运行相同的动画:见证行漂移穿过视口,暂停两端的方向,并保持自行骑行。
1个值得留住的习惯:CSS是住在元素上,而不是全局样式表中,将该部分复制到另一个页面,动画随之而来。
每个元素自定义 CSS 有帮助的地方 #
- 关键帧动画。 Marquees,脉冲按钮,浮动徽章,面板控制无法表达的任何内容。
- 悬停状态。
selector:hover卡片上的升降、阴影和颜色变化规则。 - 片段修复。 该堆栈溢出答案可以解决您的布局错误,并准确应用该错误的所在位置。
- 响应式调整。 对一个部分进行媒体查询,而不是全站样式表编辑。
- 设计实验。 在将规则推广到主题的 CSS 之前,请在画布上现场测试规则。
视频教程 #
观看整个流程,从启用扩展到在已发布页面上运行的动画卡。
常见问题 #
如何在没有 Pro 的 Elementor 中添加自定义 CSS?
在主插件扩展选项卡中启用自定义 CSS 扩展,选择编辑器中的任何元素,并在高级选项卡下打开自定义 CSS。在代码编辑器中编写或粘贴 CSS,它适用于具有实时预览功能的该元素,无需专业许可证。
选择器关键字的作用是什么?
它代表您正在编辑的元素的包装器。选择器 {color: red;} 等规则在不知道 Elementor 生成的类名称的情况下准确地针对此部分或小部件,并且选择器。child 会到达其内部的元素。
CSS 是适用于整个站点还是仅适用于一个元素?
只需元素携带它。每个部分、列或小部件都有自己的自定义 CSS 框,因此规则保持范围。复制元素会随之复制其 CSS,从而使效果在页面之间保持便携性。
我可以使用此扩展运行 CSS 动画吗?
是的。编辑器接受完整的 CSS,包括 @keyframes、媒体查询和 hover 等伪类。此页面上的演示在推荐行上运行关键帧选框动画,发布前在编辑器中实时预览。
Custom CSS 扩展是免费的吗?
是的。自定义 CSS 附带 Elementor 的 Master Addons 免费版本,位于扩展选项卡的 Utilities Widgets 组中。定价页面涵盖了 Pro 计划添加的内容。
包裹起来 #
Custom CSS扩展为每个真正项目最终需要的逃生舱口免费提供Elementor:一个对任何元素都有作用域的CSS编辑器,具有实时预览功能和一个选择器关键字,可让您将类名考古学与它配对 动画渐变背景扩展 (Pro)进行运动,完全不写关键帧,并浏览全套 主插件小部件和扩展 对于工具箱的其余部分。
