自定义CSS

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 之前,请在画布上现场测试规则。

视频教程 #

观看整个流程,从启用扩展到在已发布页面上运行的动画卡。

常见问题 #

包裹起来 #

Custom CSS扩展为每个真正项目最终需要的逃生舱口免费提供Elementor:一个对任何元素都有作用域的CSS编辑器,具有实时预览功能和一个选择器关键字,可让您将类名考古学与它配对 动画渐变背景扩展 对于完全不写关键帧的运动,并浏览全套 主插件小部件和扩展 对于工具箱的其余部分。