网格线

设计师在柱状网格之上工作,这就是标题、卡片和按钮最终排成一排的方式,而不是相距几个像素。Elementor 不会向您显示一个,因此对齐通常是通过眼睛进行的 网格线 扩展于 Elementor 的主插件 通过列网格覆盖修复它,您可以在编辑器内部打开。

Elementor的页面设置中直接控制列数、排水沟、最大宽度、偏移量和覆盖层的颜色,以下是如何启用它以及每个选项的作用。

网格线延伸线的作用 #

Grid Line 在 Elementor 编辑器内的页面上绘制一组均匀间隔的垂直列。叠加层位于您的设计之上,因此您可以检查您的部分和小部件是否真的在 Figma 或 Photoshop 中设计人员使用的网格上排列。

12列格子默认是1280px最大宽度,带40px天沟,大多数设计系统使用的惯例相同,每个值每个设备都可调,整个覆盖层用一个切换开关。

在开始之前 #

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

如何启用网格线延伸 #

1步:在扩展选项卡中打开它 #

从您的 WordPress 仪表板,转到 主插件 并打开 扩展 tab。网格线生活在 显示小部件 popular徽章的组,旁边是玻璃变形和图案。点击它的切换,它就会变成紫色。

2步:保存您的更改 #

滚动到顶部并单击 保存更改。保存成功的绿色“设置”通知确认扩展处于活动状态,如果 Elementor 编辑器打开,则重新加载一次。

Elementor 编辑器中如何显示网格 #

使用 Elementor 打开任何页面,然后单击 页面设置 顶栏中的图标。在下面 设置 tab你就会找到新的 网格线 标有紫色 MA 徽章的部分。翻转 启用 到开启,并且立刻在画布上出现柱子覆盖层。

因为设置位于页面设置中,所以网格是每页的:您决定它显示的位置,并且它不会跟随您进入每个文档。

网格线设置已解释 #

• 启用: 为此页面打开和关闭覆盖层。
• 网格颜色: 列的颜色。选择全局样本或与选择器设置自定义颜色。低不透明度值可使您的内容在覆盖层下保持可读性。
• 列: 画多少列。 12 是标准,但您可以匹配设计使用的任何网格。
• 最大宽度: grid 的总宽度,默认情况下为 1280px。将其与您网站的内容宽度相匹配,以便列与您的实际布局对齐。
• 偏移量: 当您的布局需要时,将网格从边缘推入。
• 排水沟: 列之间的空间,默认情况下为 40px。
• Z 指数: 覆盖层的堆叠顺序,默认情况下为 999,因此网格在内容上方保持可见。

列、最大宽度、偏移量和排水沟是响应式控件:单击每个控件旁边的设备图标,为桌面、平板电脑和移动设备设置不同的值。

更改网格颜色 #

单击旁边的自定义样本 网格颜色 打开颜色选择器。任何 HEXA 值都有效,而 alpha 通道最重要:大约 50% 的不透明度可以为您提供可见的列,而无需隐藏其下的设计。

调整柱子和排水沟 #

实时拖动滑块和叠加更新。在下面的示例中,排水沟高达 58px,网格带有自定义色调,因此在光背景下读取清晰,而定价卡则清晰可见。

当布局对齐时,翻转 启用 back off。设置随页面保存,所以很容易忘记覆盖在。

当网格线节省您的时间时 #

• 匹配设计文件。 在其设计的同一 12 列网格上重建 Figma 或 XD 布局,而不是眼球距离。
• 对齐部分。 检查不同部分的元素在同一列上开始和结束。
• 一致的页面系列。 将不同团队成员构建的登陆页面保存在一个共享网格上。
• 抛光进口模板。 将覆盖层从 a 掉落到页面上 模板套件 并发现离网的元素。
• 间距决策。 设置柱宽和填充时,使用排水沟线作为快速标尺。

视频教程 #

更喜欢动态观看?该视频将浏览启用网格线并调整 Elementor 编辑器中的覆盖层。

常见问题 #

包裹起来 #

Grid Line 扩展为 Elementor 提供了每个设计工具已经拥有的一件事:一个真正的列网格可以构建。在仪表板中启用一次,在需要时从页面设置翻转它,并调整列、排水沟和颜色以匹配您的设计系统。浏览其余部分 主插件小部件和扩展 更多此类工具,包括 哪个元素 为编辑器悬停标签。