转变

Grid布局整洁,整洁会变得无聊,一个从它的列中倾斜出来的图像,或者在光标下稍微长大的卡片:像这样的小变换将设计好的页面与堆叠的页面分开 转变 扩展于 Elementor 的主插件 将完整的 CSS 变换工具包放在每个元素上:平移、旋转、缩放、倾斜和翻转,并针对正常状态和悬停状态进行单独设置。

Transforms 扩展的作用 #

启用后,每个元素元素都会得到一个 转变 其下的部分 高级 选项卡。翻转 启用变换 到 是 和 出现六个控件, 每个控件都对元素应用一个 CSS 变换, 而不触摸实际的布局流:

• 翻译: 沿着 X 轴和 Y 轴移动元素,以自身大小的百分比表示。
• 旋转: 以任何角度旋转它。
• 比例: 独立地在每个轴上放大或缩小它。
• 偏: 倾斜它以获得对角线、动态的外观。
• 水平翻转/垂直翻转: 一键镜像。

的 正常 並 悬停 tabs 保存单独的值,因此元素可以静止一种方式,并在光标落在它上时进行转换,并控制一个转换持续时间。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?关注 安装指南 首先。
• Transforms 是一个免费扩展,因此不需要 Pro 许可证。

如何启用 Transforms 扩展 #

从您的 WordPress 仪表板,转到 主插件 并打开 扩展 tab。变换坐在 动画小部件 带有热徽章的组,介于两者之间 入口动画 和揭示。点击它的切换,使其变成紫色,然后点击 保存更改 并等待绿色“设置保存成功”通知。

打开元素上的变换面板 #

选择 Elementor 编辑器中的元素、演示中的图像小部件,然后打开 高级 选项卡。展开 转变 带有紫色 MA 徽章和开关的部分 启用变换 到是。六个变换控件出现在"正常"和"悬停"选项卡下方,每个选项卡都以其铅笔图标打开。

移动并缩放元素 #

单击旁边的铅笔 翻译 打开两个滑块:平移 X 和平移 Y。演示将图像 71 推到 X 轴上,并且随着滑块的移动,图像 71 向画布上的截面边缘滑动。值相对于元素自身的大小,并且每个轴每个设备都有自己的响应设置。

的 规模 control 的工作方式相同,在演示中将比例尺 X 设置为 1.4 会将图像放大到其列之外,与平格无法执行的那种突破框架的截面边界重叠。将比例尺 Y 留空并遵循 X,或将两者设置为独立拉伸。

Rotate 和 Skew 的工作方式相同,打开控件,拖动滑块,画布随走随看角度。

添加悬停变换 #

切换到 悬停 tab 和相同的控件仅适用于光标位于元素上时, 再加上两个附加功能: 水平翻转 並 翻转垂直 成为是/否开关,以及 过渡持续时间(毫秒) slider控制变化动画的速度,演示打开flip Horizontal,过渡400ms,因此图像在悬停时平滑地镜像自身,并在光标离开时折返。

页面上的结果 #

发布并检查前端。图像完全按照编辑器中的排列方式经过其列进行移位和放大,并悬停它以 400ms 的轻松方式播放翻转。变换是纯 CSS,因此没有额外的负载,元素周围的布局也永远不会回流。

1件事要记住:变换仅是视觉的,元素在布局中仍然占据着原来的位置,因此一个重度翻译的元素可以与它的邻居重叠,那通常是点,但是检查平板电脑和移动设备,其中相同的偏移覆盖了更多的屏幕。

转型在哪里赢得自己的位置 #

• 突破图像。 照片按比例缩放并移动超过其柱边缘,可提供英雄部分深度。
• 悬停反馈。 光标下方稍微提升、倾斜或生长的卡片可单击读取。
• 旋转口音。 徽章、邮票和标签以微小的角度更自然地放置。
• 倾斜部分。 分隔器或按钮上的几度倾斜会破坏矩形单调。
• 镜像资产。 翻转一个箭头或插图,而不是导出第二个图像。

视频教程 #

观察每个控件的操作,从启用扩展到已发布页面上的悬停翻转。

常见问题 #

包裹起来 #

Transforms 扩展向您提供 Elementor 面板内的 CSS 变换工具包:移动、旋转、缩放、倾斜和翻转任何东西,包括悬停状态和平滑过渡。从一个突破图像或一个悬停升降机开始,并从那里自然地与 入口动画扩展 适用于移动的元素以及完整的阵容 主插件小部件和扩展 涵盖其余部分。