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

自定义元素断点功能,可通过以下方式使用 硕士插件专业版 (或免费版本中最多 3 个断点),允许您创建 完全响应式的网站布局 elementor默认的移动、平板和桌面设置之外,针对更广泛的屏幕尺寸进行了优化。这确保了在任何设备上提供一致的高质量用户体验。

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

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

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

Custom Elementor 断点是一个额外的、用户定义的屏幕宽度阈值,可让您的布局适应超出 Elementor 内置移动、平板和桌面视图的大小。您不是仅限于三个设备视图,而是设置了新的响应式布局应开始的精确最大宽度(以像素为单位)—例如 600px 的小型移动断点。Master Addons 在免费计划上加起来为 3 个自定义断点,并且使用 Pro 实现无限断点,让您无需触摸代码即可精确控制响应式设计。

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

设置自定义元素断点 #

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

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

1步:安装并激活扩展 #

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

第 2 步:访问断点设置 #

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

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

Breakpoints 输入页面上,您将看到 Elementor 的三个默认断点 (移动, 片剂、和 桌面).

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

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

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

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

使用自定义元素断点 #

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

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

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

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

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

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

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

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

到元素的 风格 选项卡。

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

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

4步:保存和预览 #

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

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

常见问题 #