定位扩展设置

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 元素放置在其正常插槽之外:选择相对或绝对,设置偏移量,其余部分使用 Z 索引和每设备值。 定位扩展页 elementor 内建的 Position 设定来做比较,如果一个元素也需要旋转或是比例,就搭配上 转换扩展 (专业版)。您可以浏览其余部分 主插件小部件和扩展 在一页上。