如何使用附加断点

在设计您的网站以在所有设备上响应时使用断点。断点使用一组额外的 CSS 规则来根据屏幕宽度应用于元素。例如,标题可以在桌面上显示为 55 像素,在平板电脑上显示为 34 像素,或者在移动设备上显示为 21 像素。您的设计有时也可能需要额外的断点。我们现在可以在站点设置中管理这些附加断点。 https://www.youtube.com/embed/4Iw6Qce4ij4?feature=oembed

让我们开始吧 #

在下面的文档中了解如何管理您的附加断点。为了使用 Additional Breakpoints 功能,您可能需要导航到Elementor > Settings > Experiments并将其设置为 Active。此功能将在新安装时启用。

响应模式编辑器 #

要进入响应模式编辑器,请导航到编辑器面板的下角,然后单击响应模式图标。这将加载响应模式。这些将额外加载到编辑器中的任何响应式控件上。


管理断点 #

要进入断点编辑器,您可以单击位于屏幕上角的齿轮图标。这也可以在您的站点设置中进行。


添加额外的断点

要添加断点,请单击活动断点控件中的 + 图标。将出现一个下拉列表,其中包含其他选项。在此处添加设计所需的断点。您还可以通过单击每个附加断点旁边的 x 图标来删除此处不必要的断点。

注意:无法删除默认的移动和平板模式。


编辑断点值

您可以通过键入值或使用向上和向下箭头来编辑每个断点所需的值。

重新加载编辑器 #

为项目设置断点选项后,单击站点设置中的蓝色保存按钮。将出现一个弹出窗口,通知您需要重新加载页面才能显示新的断点。单击立即重新加载链接。

使用附加断点 #

您现在将能够使用响应模式编辑器。单击屏幕顶部的图标以查看您的 Elementor 设计将如何出现在每个断点宽度上。使用缩放级别预览可访问性。您还可以拖动水平和垂直手柄来调整预览大小。 

使用级联响应值 #

Elementor 使用跨断点的级联概念,这意味着更改会向下级联。您在较大断点上所做的更改会级联到较小的断点,但反之亦然;除非您为宽屏设计,否则更改较小的断点不会影响较高的断点。在这种情况下,Elementor 正在级联,使桌面设备成为默认断点。在此处了解有关继承值的更多信息。

Powered by BetterDocs

发表评论

您的电子邮箱地址不会被公开。

Scroll to Top