Elementor将元素保留在他们的列中,这完全正确,直到设计需要其他东西:一个徽章,它一半坐在照片上,一半从照片上脱落,或者一个标签被推过截面边缘 定位扩展 在 Elementor 的主插件 为每个小部件、列、部分和容器添加偏移控件。您可以以 px、em 或 % 方式推动或完全重新定位面板中的任何内容,每个设备具有单独的值。
定位扩展的作用 #
启用后,每个元素都会得到 a 定位 其下的部分 高级 选项卡。选择一个 位置类型 并使用偏移滑块移动元件:
- 位置类型: Default 和 Static 保持正常的流,Relative 将元素从自己的位置偏移,Absolute 将其放置在最近的定位父级内。这里没有固定选项;为此,使用 Elementor 自己的位置设置。
- 上/右/下/左: px、em 或每边 % 的偏移量,包括推过边时的负值。
- 从中心: 从父级中间开始的水平偏移。它将左侧设置为 50% 加上您的值。
- Z 指数: 决定当事情重叠时哪个元素获胜。
每个控件都带有响应式图标,因此桌面、平板电脑和移动设备各自保留自己的值。面板添加了一个合理的警告:避免同时将 From Center 和 Left 组合。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?关注 安装指南 首先。
- 定位是免费扩展,因此不需要专业许可证。
如何启用定位扩展 #
从您的 WordPress 仪表板,转到 主插件 并打开 扩展 选项卡。定位位于 显示小部件 群,旁边 网格线 並 集装箱附加信息。单击其切换使其变为紫色,然后点击 保存更改 并等待绿色“设置保存成功”通知。
打开定位面板 #
选择 Elementor 编辑器中的元素、演示中的圆形质量徽章,然后打开 高级 选项卡。展开 定位 带有紫色 MA 徽章的部分并设置 位置类型 到 相对的。偏移控件显示:顶部、右侧、底部、左侧、从中心和 Z-Index 位于其下方。
Drag任意滑块,元素在画布上实时移动,演示中负面的Top-143将徽章从照片中间向其上缘提升;正值则反推。
将元素移动到位 #
Demo 在照片周围走徽章, 带有几个值: 357强赛 将其朝下半部分掉落, 对-262 向外滑动,然后 a 底 value微调重叠部分,直到徽章横跨照片的底部边缘,每个滑块还采用键入的值,因此您可以与模型中的精确间距进行匹配。
Relative,元素在布局中保持其槽位,周围的内容保持原位,Absolute将元素从流中取出,因此下面的内容向上移动以填补空白,当两个元素最终堆叠时,Z-Index字段结算谁坐在上面。
页面上的结果 #
Publish,徽章准确地渲染了它停放的位置:与照片的底部边缘重叠,打破矩形而不接触下面的柱结构。
完成之前检查平板电脑和移动设备。桌面上看起来正确的偏移量可以在狭窄的视口上将元素推离屏幕,这正是为什么这里的每个控件都具有响应性。
精确定位有回报的地方 #
- 徽章和邮票。 与照片角重叠的密封件按设计读取,而不是放置。
- 卡片重叠。 将推荐卡或统计卡拉到旁边图像的边缘。
- 断段口音。 横截面边界的形状或标签。
- 精细对齐修复。 推动元素几个像素,而无需将其包裹在边距黑客中。
- 分层英雄作品。 将文本堆叠到图像上,Z-Index 决定顺序。
视频教程 #
实时观察徽章在布局中移动,从启用扩展到已发布的页面。
常见问题 #
如何在 Elementor 中自由移动元素?
Master Addons Extensions 选项卡中启用定位扩展, 选择元素, 然后在高级选项卡下打开定位。将位置类型设置为相对, 并使用顶部、右侧、底部、左侧滑块; 元素在拖动时在画布上实时移动。
我可以使用负偏移值吗?
是的。负值将元素推过其正常边界,这就是将徽章重叠到照片边缘或在其截面之外拉动元素的方式。键入该值或沿任一方向拖动滑块。
Z-索引设置是做什么的?
Z-Index 在元素重叠时控制堆叠顺序,数字较高的元素在顶部渲染,每当重新定位的元素需要位于其邻居的上方或下方时,将其设置在同一定位面板中。
移动设备上的抵消也有效吗?
每个偏移控制都是响应式的,因此桌面、平板电脑和移动设备都保持单独的值。定位后始终预览狭窄的视口:适合宽屏幕的偏移可以将手机上的元素推离屏幕,并且每台设备的值就是您纠正它的方式。
定位扩展免费吗?
是的。在扩展选项卡的显示小部件组中,定位附带 Elementor 的 Master Addons 免费版本。定价页面涵盖了 Pro 计划添加的内容。
包裹起来 #
定位可让您将 Elementor 元素放置在其正常插槽之外:选择相对或绝对,设置偏移量,其余部分使用 Z 索引和每设备值。 定位扩展页 elementor 内建的 Position 设定来做比较,如果一个元素也需要旋转或是比例,就搭配上 转换扩展 (专业版)。您可以浏览其余部分 主插件小部件和扩展 在一页上。
