目录
Elementor的免费版本给你比大多数教程承认的更多的断点:总共七个设备视图,每个都有可编辑的像素宽度,全部从站点设置打开不需要Pro许可证原生系统停止的地方是在那七个固定插槽处,如果你的设计需要第八个视图,或者一个设备宽度命名插槽不映射到,那个间隙就是免费的 自定义断点扩展 from Master Addons handles。它涵盖了响应式工作的造型一半,而扩展则喜欢 显示条件 决定哪些部分显示在哪个设备上。
下:Elementor free实际上包含的内容(超过三个视图,无论旧帖子声称什么),如何激活额外的本机断点,以及如何在顶部添加真正的自定义断点。最后部分最多免费 3 个断点,使用 Master Addons Pro 无限。
Elementor free 实际上为您提供了哪些断点
先不死的神话:元素者多余的断点并没有锁定在元素者Pro的后面,很多文章还是说。自 元素 3.4 了附加自定义断点功能, 免费版本最多支持七个设备视图:
- 移动肖像:默认情况下最高可达 767px(始终处于活动状态)
- 移动景观:高达 880px
- 平板电脑肖像:最高可达 1024px(始终处于活动状态)
- 平板电脑景观:高达 1200px
- 笔记本电脑:高达 1366px
- 桌面:基视图其他分支的所有内容
- 宽屏:2400px 及更高版本(集合中的一分钟宽度断点)
这些像素值中的每一个都是可编辑的。打开站点设置,将平板电脑纵向截止值从 1024px 更改为 900px,保存,完成。元素元素 开发人员文档 如果您想要力学,请解释下面的最大宽度逻辑。
So free version 不能做什么?两件事,你不能添加第八个断点,也不能跨出命名的插槽:额外的六个视图有固定的角色,而且一旦全部使用完毕,原生系统就满了那个天花板,这根本就是一个专用的断点插件存在的原因。
Elementor的额外断点如何激活(免费,无插件)
Elementor已经给你的东西, 在安装任何东西之前, 先打开。大约需要一分钟时间:
- Elementor打开任意页面,点击面板左上角的汉堡包菜单,然后选择 站点设置.
- 去 布局 → 断点.
- 单击进入 活动断点 字段并添加您想要的视图:移动景观、平板电脑景观、笔记本电脑、宽屏。
- 如果默认值与您的设计不匹配,请调整每个断点下的像素值。
- 击 保存更改。Elementor 重新生成其 CSS,新视图以响应模式出现。
7个视图覆盖你的项目,就停在这里,你什么都没花,什么都没安装,如果你需要更多的视图,或者一个断点命名槽不能表达,就继续阅读。
Elementor 的七个之外,如何添加自定义断点
过Elementor天花板的免费路线是 Elementor 的自定义断点、主插件团队构建的插件,它在 Elementor 旁边自行运行,不需要其他插件,它还与 主插件 如果您已经运行它,因此您可以从与小部件相同的仪表板管理断点。免费版本将最多 3 个自定义断点与每个设备宽度的精确像素控制相加; Master Addons Pro 完全拆除了盖子。
1步:安装插件
在您的 WordPress 仪表板中,转到 插件 → 添加新插件 and 搜索“Elementor”的自定义断点,安装并激活它,如果您已经使用主插件,您也可以从主插件仪表板中的扩展选项卡打开它;两条路线的结束都是在相同的设置页面。
2步:打开断点页面
您的仪表板菜单中会出现一个新的断点项。单击它。该页面列出了当前活动的断点及其范围,与您在 Elementor 网站设置中配置的任何内容相匹配,并为您提供了在顶部添加新设备的选项。
步骤 3:添加最大宽度的断点
命名设备并以像素输入其最大宽度。要瞄准小型手机,请键入 600 并保存。插件可为您调整相邻设备的最小宽度,因此范围永远不会重叠:您的新小型移动视图覆盖屏幕高达 600px,下一个视图从 601px 开始。在免费版上,您可以将这些自定义断点加起来为 3 个; 硕士插件专业版 用户可以获得无限的断点以及导入/导出。
第 4 步:在 Elementor 中设置新视图
Elementor编辑任意页面,点击面板底部的响应模式图标,您的自定义视图现在位于默认值旁边的设备栏中,选择它,选择一个元素,并设置仅适用于该像素范围内的字体大小,填充或列计数等值,点击更新,然后调整浏览器大小以观看样式触发器。有关每个设备的样式设计更深入的演练,请参阅我们的指南 elementor 断点的响应式设计.
免费与专业:每个选项为您提供多少个断点
式(包括 Elementor 在任何插件进入图片之前给您的内容)进行比较:
| 选项 | 成本 | 你得到的 | 限制 |
|---|---|---|---|
| 不含元素(原生) | 免费的 | 7个命名设备视图,每个都有一个可编辑的像素宽度 | 7的固定套装,没有新的插槽 |
| Elementor 的自定义断点(免费) | 免费的 | 使用您自己的名称和确切宽度自定义断点 | 3个自定义断点 |
| 硕士插件专业版 | 支付 | 上面的一切,加上进出口 | 无限 |
Elementor的七个视图加上3个自定义层级覆盖了每一个真实的差距:一个小手机视图,一个奇怪的平板电脑宽度,一个信息亭显示器,处理客户端设备列表的机构是那些达到免费上限的人,而那就是谁 专业人士 is for。如果你在研究整个插件时权衡替代品,我们的 主插件与终极插件比较 涵盖更广泛的功能匹配。
当自定义断点实际修复布局时
1个自定义断点,当一个布局在两个现有视图之间的间隙中断开时,值得添加,经典案例是一个3列网格,它看起来就在1025px以上的桌面上,Elementor在1024px平板视图下将其降为2列,在一个在景观中保存的大平板上,同样的1024px视图留下了一个宽阔的空列,浪费了空间。
992px处添加一个断点,将网格设置回那里的3列,布局适合设备而不是猜测。同样的动作适用于小手机视图,您会碰到字体大小和按钮填充,看起来在400px以下很局促,甚至Elementor的移动肖像视图也将一个桶视为一个范围。
断点也与条件显示器完美搭配。如果一个部分仅在较大的屏幕上有意义,则自定义断点可以控制其造型 显示条件 控制是否出现。两者解决同一响应问题的不同一半。
自定义断点会减慢您的网站速度吗?
少量断点不会以任何方式减慢您的网站访问者通知的速度。每个断点都会添加一个标准的 CSS 媒体查询,并且您设置的加载样式与 Elementor 内置响应式样式完全相同。添加的 CSS 紧邻典型页面的权重。
Editor 是一个不同的故事,每一个额外的断点意味着多一个响应面板 Elementor 必须渲染,所以堆叠 10 个或更多可以让编辑屏幕感觉更重,只添加您实际风格的视图,总共五六个,包含默认值,几乎每个项目都足够了,如果速度是您更广泛关注的问题,我们的指南就开始了 如何加快 Elementor 网站的速度 涵盖负载时间中实际出现的修复程序。
当不添加自定义断点时
自定义断点并不是每个响应错误的修复方法,首先达到一个断点通常是错误的调用。如果单个元素在一个屏幕尺寸上表现不佳,则有针对性的规则 自定义CSS 通常比全新的设备层更干净,然后到处都需要造型。
2个案例来跳过它,如果激活Elementor的休眠原生视图之一,或者在站点设置中轻推一个默认像素值,修复问题,而是这样做;它不需要任何成本,并且保持编辑器的轻便,如果问题真的在于哪些内容在哪个设备上显示而不是如何样式,那是显示条件的工作,而不是另一个断点。
自定义断点与主插件工具包的其余部分并列,从免费扩展到 主题构建器全部构建用于关闭 Elementor 叶子打开的间隙。
常见问题
Elementor free 有自定义断点吗?
是的,比大多数人想象的要多。 Elementor free 包括七个设备视图:移动肖像、移动风景、平板肖像、平板风景、笔记本电脑、桌面和宽屏。您激活站点设置 → 布局 → 断点中的额外内容,并可以编辑每个像素值。free Elementor 无法做的是在七个命名插槽之外添加断点;为此,您需要免费的 Elementor 自定义断点插件。
如何在 Elementor 中添加自定义断点?
对于内置视图,打开站点设置 → 布局 → 断点,将您想要的视图添加到活动断点字段,并调整其宽度。对于 Elementor 七个之外的断点,安装免费的 Elementor 自定义断点插件,打开其断点页面,并输入设备名称和像素最大宽度,例如小型手机为 600。然后,新视图将显示在 Elementor 响应模式中,准备样式。
Elementor 中可以有多少个断点?
Elementor free 和 Pro 均在七个本机设备视图中名列前茅。Elementor 插件的自定义断点在免费的基础上加起来有 3 个真正的自定义断点,Master Addons Pro 取消了无限断点的上限。
自定义断点需要 Elementor Pro 吗?
不,两者都很重要。 Elementor 自己的额外断点(移动景观、平板景观、笔记本电脑、宽屏)在免费版中发货,Elementor 插件的自定义断点也是免费的。任何地方都不涉及 Elementor Pro 许可证;只有无限的自定义断点才能调用 Master Addons Pro。
自定义断点插件是否需要主插件才能工作?
No。It作为一个独立的插件,只安装了Elementor。It还集成了主插件,如果你运行两者,所以你管理断点从同一仪表板与你的小部件和扩展,和主插件Pro是解锁无限断点的。
自定义断点会减慢我的网站速度吗?
No。每个断点只添加一个轻量级的CSS媒体查询,样式加载像Elementor内置的响应式样式,堆叠很多断点可以让编辑器感觉更重,所以只添加你实际会风格的视图。
相关阅读
