关于Divi 5的可自定义断点，您需要了解的一切

已发表: 2025-02-11

准备大大改善建立网站的方式。 Divi 5具有令人兴奋的新功能，可自定义的断点，这使您可以对网站的响应能力进行难以置信的控制。借助Divi 5的新可自定义断点，您可以在所有设备上创建无缝的体验。无论您是为大型桌面显示器设计还是最小的移动屏幕，Divi 5都可以帮助确保您的网站每次看起来都完美。

在这篇文章中，我们将介绍您需要了解的有关此新功能的所有信息，并向您展示如何使用它！

查看以下视频以查看动作中的新功能。

1下载Divi 5带有可自定义的断点
2我可以在网站上使用Divi 5吗？
- 2.1在本地和分期网站上使用Divi 5
- 2.2您可以在新生产网站上安全地使用Divi 5
3了解Divi的可自定义断点
- 3.1什么是断点？
- 3.2我应该使用多少个断点？
- 3.3可以使更多的断点降低我的网站吗？
- 3.4网站或页面级别上启用了断点？
4可自定义的断点在Divi中如何工作
- 4.1在哪里找到断点
- 4.2如何启用断点
- 4.3您应该使用标准断点还是自己？
- 4.4使用Divi 5中的自定义断点
- 4.5自定义您的响应式设计内部预设
5在Divi 4与Divi 5中的响应式编辑5
- 5.1断点之间轻松过渡
- 5.2从3到7个断点
- 5.3帆布缩放以完全控制
6 Divi 5永远包含在您的Divi终身会员中

通过可自定义的断点下载Divi 5

使用可自定义的断点，您现在可以微调网站的响应能力，以更好地适合不同的屏幕尺寸。无论您是设计超宽台式机还是宽阔的移动屏幕，Divi 5都将控制权放在您的手中。

下载Divi 5learn更多有关Divi 5的信息

我可以在网站上使用Divi 5吗？

您可以在网站上使用Divi 5，但其可用性取决于您的特定用例。 Divi 5目前处于公共Alpha阶段，这意味着它仍在积极开发和完善。虽然尚未在所有生产环境中推荐它，但在某些特定方案中，您可以在没有问题的情况下开始使用它。

在本地和分期网站上使用Divi 5

Divi 5目前可用于本地和分期环境，使用户可以安全地测试其新功能而不会影响其实时网站。由于Divi 5仍处于公共Alpha阶段，因此这种方法可确保用户可以尝试Divi 5的改进，报告错误并提供反馈，同时保持其生产地点的稳定性。

您可以在新生产网站上安全地使用Divi 5

Divi 5稳定，准备启动全新的网站。如果您是从头开始的，则可以充分利用其快速性能，模块化框架和防止未来的技术，而不必担心向后兼容问题。但是，彻底的测试阶段对于在迁移之前依靠广泛的第三方整合的现有站点至关重要。在这一点上，我们仍然不建议将现有网站转换为Divi 5。

了解Divi的可自定义断点

断点是响应设计的基本方面。它们充当阈值，您网站的内容会重新组织自己以确保最佳用户体验，无论有人在智能手机，平板电脑还是台式机上浏览。

Divi 5的断点得到了显着改善，比Divi的先前版本提供了更多的灵活性和控制。自定义最多七个断点使您可以微调网站的响应能力，以适应更广泛的设备和屏幕尺寸。

什么是断点？

断点是特定的屏幕宽度，您的网站设计适应该屏幕宽度，以在不同设备上提供最佳的观看体验。断点有助于确保您的内容保持可读性，视觉吸引力且易于浏览，无论屏幕尺寸如何。

响应网站是使用CSS媒体查询设计的，当屏幕达到特定宽度时，可以应用不同的样式。当访问者的屏幕尺寸越过定义的断点时，该网站会自动调整其布局，字体，间距或其他设计元素以保持可用性。

通过引入Divi 5中的更多断点，您可以限制CSS媒体查询以定义其他设备的断点的需求。

我应该使用多少个断点？

断点的数量取决于听众的设备使用情况。用户在各种屏幕尺寸上访问网站，从小型智能手机到超宽的桌面屏幕。传统上，网络设计人员使用了三个标准断点 - 台式机，平板电脑和移动设备 - 但Divi 5扩展了此功能，最多可自定义的断点，以提高灵活性。

可以使更多的断点放慢我的网站吗？

不，在Divi 5中启用更多断点不会减慢您的网站。与较旧的处理响应式设计的方法不同，Divi 5的新框架是针对性能进行了优化的，可确保其他断点不会为您的网站增加不必要的负载。

在网站或页面级别上启用了断点吗？

Divi 5中的断点是在网站级别启用和应用的，而不是在每页上。启用和自定义断点后，它们将影响整个网站，确保所有页面的一致，响应迅速的设计。您对断点的任何更改都将普遍调整您的网站对不同屏幕大小的响应方式，而不是仅限于单个页面。

可自定义的断点在Divi中如何工作

Divi 5的高度灵活和直观的系统非常适合管理断点，使您可以更好地控制网站的响应设计。与以前的版本不同，Divi 5允许您自定义多达7个断点，从而确保您的网站在每个设备上看起来都很完美。该系统旨在为用户友好，同时为需要它们的人提供高级选项。

在哪里找到断点

在Divi 5中，断点集成到您的页面设置中，使其易于找到和自定义。您可以在视觉构建器中直接访问它们，从而确保精简的工作流程。

如何启用断点

通过单击Divi单击编辑，打开要编辑和激活视觉构建器的页面。

在Divi 5中启用视觉构建器

单击位于Visual Builder主任务栏中的省略号菜单（三个点）。

在Divi 5中启用断点

在设置中，您会找到一系列的切换开关，使您可以根据需要启用或禁用断点。

Divi 5断点选项

一旦激活，每个断点将在任务栏中可见，使您可以在整个设计中进行更改，而无需单击单个行或模块中的响应式控件以调整设置。

您应该使用标准断点还是自己？

Divi 5的标准断点旨在覆盖最常见的屏幕尺寸，包括手机，平板电脑和台式机。这些预定义的断点对于许多设计师来说是足够的，因为它们适合大多数用户和设备。

但是，在某些情况下，创建自定义断点可能是有益的。例如，如果您想容纳超宽的监视器，可折叠智能手机或较小的平板电脑，则可以帮助您在这些用例中更改设计。

在Divi 5中使用自定义断点

自定义响应断点可用于解决设计怪癖或内容在较不常见的设备或屏幕分辨率上显示问题。它们还可以通过仅加载给定屏幕尺寸的必要样式来帮助提高网站性能，从而减少页面加载时间。

值得庆幸的是，Divi 5可以单击几下自定义这些响应式断点非常容易。

响应式设备设置打开，将电话断点设置为所需的宽度，然后重复其他设备的步骤。由于我们希望使该网站适用于较小的设备，因此我们将数字设置为手机的360px 。添加所需像素后，单击“保存”按钮继续。

如何自定义Divi 5中的断点

Divi 5会让您知道您将要调整网站的断点。单击“更新”按钮以确认更改。

Divi 5中的可自定义断点

我们将为其余的屏幕尺寸添加以下断点：

这些断点涵盖了一系列设备，以确保您的网站涵盖大多数屏幕尺寸和用例：

电话： 767px涵盖了大多数智能手机屏幕尺寸，包括旧型号，例如iPhone 8或三星G7。
电话宽： 860px覆盖了景观模式的大多数手机屏幕，包括iPhone 14 Pro（及以上）和现代Android设备。
平板电脑： 980px在肖像模式下（包括所有iPad）中的大多数平板电脑屏幕都有好处。
平板电脑宽： 1024px是大多数iPad和Samsung平板电脑中景观视图的标准配置。
宽屏： 1280px对于大多数较小的笔记本电脑（Windows或MacOS）来说是一个很好的宽度，包括MacBook Air，MacBook Pro 13“和可比的Windows设备。
Ultrawide： 2560PX覆盖较大的桌面屏幕，例如MacBook Pro 15英寸和16英寸笔记本电脑，iMac和标准的高清监视器。