由主插件自定义元素器断点设置和配置 #

的免费 Elementor 的自定义断点 master Addons 的插件(3 个自定义断点免费,使用 Master Addons Pro 无限)可让您创建 完全响应式的网站布局 elementor 内置设备视图之外的屏幕尺寸进行了优化, 这确保了在任何设备上都能获得一致的高质量用户体验。

使用自定义元素断点,您可以:

• 根据需要添加尽可能多的自定义断点(屏幕宽度)(Master Addons Pro 无限制)。
• 为小型移动设备、大型平板电脑或自定义屏幕尺寸等设备定义特定的布局、字体大小、间距和对齐方式。
• Override Elementor 在精确像素宽度下的默认响应行为。

什么是自定义元素断点? #

Custom Elementor 断点都是额外的、用户定义的屏幕宽度,可让您的布局适应 Elementor 内置视图的大小,这些宽度不被覆盖。Elementor 最多有七个设备视图(移动纵向、移动横向、平板纵向、平板横向、笔记本电脑、桌面和宽屏)。一个自定义断点在您选择的精确最大宽度处添加另一个,例如 600px 小移动视图。Master Addons 在免费计划上添加 3 个自定义断点,并且使用 Pro 添加无限断点,让您无需触摸代码即可精确控制响应式设计。

So,让我们看看如何设置和配置此功能。

设置自定义元素断点 #

快速回答: 安装自定义断点扩展 主插件 > 扩展,打开新 断点 "主插件"菜单下的页面, 然后输入一个 最大宽度 像素表示您想要瞄准的每个设备尺寸(例如,小型移动设备为 600px)。

请按照以下步骤安装和定义您的自定义断点。

1步:安装并激活扩展 #

1. 导航到 主插件 wordpress 仪表板中的菜单。
2. 去 扩展 选项卡。
3. 找到 “自定义断点” "选项 ", 然后单击下载按钮在您的网站上安装并激活它。

第 2 步:访问断点设置 #

1. 在 WordPress 仪表板中,悬停在上面 主插件 菜单。
2. 一个名为的新菜单项 “断点” will 出现。点击它。这将重定向到自定义断点输入页面。

第 3 步:添加自定义断点 #

在断点输入页面上,您将看到活动 Elementor 断点及其像素范围。

要添加新的自定义断点,请使用输入字段仅设置 最大宽度 (以像素为单位)。

例如,要瞄准小型移动设备,请输入 600px 作为最大宽度。

Save后,系统会自动调整下个默认断点的Min-Width,在上面的例子中,“小移动”断点将适用于所有屏幕 小于或等于600px默认的“mobile”断点将从 601px 并在平板电脑断点的最小宽度处结束。

您可以根据需要从此页面添加或删除断点。

使用自定义元素断点 #

在主插件设置中配置后,自定义断点将直接在 Elementor 页面编辑器中可用。

步骤 1:在 Elementor 中打开响应模式 #

转到任何页面并单击 “Elementor.”编辑 单击 响应模式 标(通常是显示器和电话图标)在面板的左下角。

第 2 步:选择自定义断点 #

Top栏将显示所有可用的断点,包括您创建的自定义断点(例如,“小移动”)。

单击您的 自定义断点 将编辑器视图更改为该特定屏幕尺寸。

第 3 步:应用自定义样式 #

素(例如,标题小部件)进行选择。

到元素的 风格 选项卡。

单击 响应式图标 (桌面显示器)旁边的任何样式设置, 例如 版式>尺寸 或 内容 > 对齐.

(例如, 设置字体大小)为该断点定义一个特定值 20便士)。只有当浏览器宽度在该自定义断点定义的范围内时,该值才会适用。

4步:保存和预览 #

定义所有必要断点的响应样式后,单击 更新 保存页面。

实时预览页面并调整浏览器窗口大小,以查看自定义断点触发您定义的独特样式。

常见问题 #

Elementor的内置断点和一个实时演示的比较,请参见 自定义断点插件页面.