Elementor 中如何添加自定义断点
Site 设置> 布局> 断点中首先检查 Elementor 自己的额外视图, 如果没有一个适合, 则添加自己的:
- 安装 Elementor 的自定义断点 从插件 > 添加新内容并激活它。
- 在仪表板菜单中打开断点。如果主插件处于活动状态,它位于主插件菜单下方。
- 添加设备,给它起一个名字,然后输入其最大宽度(以像素为单位),例如小型手机的 600。
- Save。plugin 对列表进行排序,并调整相邻的范围。
- Elementor编辑页面,以响应模式选择新视图并为其设置元素样式。
看看它在工作 实时断点演示或者阅读我们的指南 elementor 的自定义断点 更多示例。
使用您自己的名称自定义设备尺寸
Name设备,并以像素输入其最大宽度,插件按宽度对每个断点进行排序,并为您计算出范围,因此600px小型移动视图覆盖屏幕高达600px,下一个视图从601px开始,保存的断点出现在Elementor的响应工具栏中,旁边是内置视图。
- 3 个免费自定义断点,使用 Master Addons Pro 无限。
- 断点自动按宽度排序,因此范围永远不会重叠。
- 个重置按钮,以返回到 Elementor 的默认值,以及使用 Pro 进行导入和导出。
Elementor 的响应模式下工作
Custom断点的行为就像Elementor自己的。在响应式工具栏中选择新视图,然后设置字体大小、填充、列宽和其他仅在该范围内应用的响应式值。该插件挂钩到Elementor的断点系统中,因此额外的视图会显示在Elementor和Master Addons小部件中的响应式控件上。
- 从与移动设备和平板电脑相同的工具栏中选择自定义视图。
- 为每个视图设置排版、间距和布局值。
- Elementor 的两个内置宽度之间进行断裂的布局修复。
Elementor 的内置断点与自定义断点
Elementor free和Pro共享相同的七个设备视图:移动肖像(767px),移动风景(880px),平板肖像(1024px),平板风景(1200px),笔记本电脑(1366px),桌面和宽屏(2400px及以上)。每个宽度都是可编辑的,但不能添加第八个视图。
| 元素断点 | 自定义断点插件 | |
|---|---|---|
| 价格 | 免费的 | 使用 Master Addons Pro 免费、无限 |
| 设备视图 | 最多 7 个 | Elementor 的 7 加 3 自定义(免费)或无限(专业) |
| 名字 | 固定 | 你自己的 |
| 宽度 | 可编辑 | 可编辑 |
| 进出口 | 否 | 与专业版 |
有关设置断点后如何为每个设备设置样式,请阅读我们的指南 elementor 断点的响应式设计。要按设备显示或隐藏整个部分,请使用 显示条件 (专业版)。
自定义断点的常见问题
需要自定义断点的现实例子是什么?
767px看起来还不错的文字和按钮,在360px的手机上会感觉到局促,在400px处添加一个小移动断点,然后增加字体大小和按钮填充,只为那些屏幕,一切更宽广的都保持了常规的移动风格。
添加许多断点会使 Elementor 编辑器速度变慢吗?
1个多出来的断点,不会有明显区别,每个都给每个控件增加另一个响应值,所以十个以上可以让小编感觉更重,只增加你实际会风格的视图,总共五六个,默认包括,对于大多数站点来说就足够了。
这些自定义断点是否会影响我的实时网站的 CSS 和性能?
Elementor生成的样式表中每个断点都添加了CSS媒体查询,那就是少量的CSS,所以访问者不会注意到加载时间的差异。
得《移动风景》对《移动画像》能设置断点吗?
您可能不需要自定义的。Elementor 已经拥有移动景观 (880px) 和平板景观 (1200px) 视图,您可以在站点设置 > 布局 > 断点中打开。当您需要宽度时添加自定义断点。这些视图不涵盖。
