如何在Divi 5中的不同断点上重新排序元素

响应设计不仅需要扩展布局，还需要控制内容跨设备的内容堆栈的方式。在桌面上构造的设计可能是在移动设备上令人困惑的订单，侧边栏或次要元素将钥匙内容推出了视图。 Divi 5使用其新的Flexbox系统来解决此问题，该系统引入了预构建的响应列结构和精确的订购控件。

在这篇文章中，我们将研究为什么重新排序元素很重要，Divi 5的Flexbox工具如何使其变得简单，并浏览各个步骤以在不同的断点处进行重组布局。

为什么要重新排序元素

当布局从桌面转移到移动设备时，堆叠顺序并不总是反映您预期的体验。平衡的三柱桌面设计可以倒入垂直堆栈中，左列总是首先出现，推动呼叫行动，注册表单或联系信息较远的页面，用户可能永远不会看到它。

订阅我们的YouTube频道

Divi 5的Flexbox系统通过让您在每个断点处视觉重新排序元素来解决此问题。您可以直接在移动设备的标题下移动CTA，在定价表上方放置推荐书，或在长时间内容之前突出显示联系信息。您可以决定层次结构。这样可以确保您最重要的内容总是出现在最重要的地方。

Divi 5的Flexbox如何使重新排序变得容易

Divi 5可以直接控制元素如何跨断点。您可以使用预构建的Flex列结构来设置自然调整的布局，然后在每个屏幕尺寸下微调列结构和列订单。

该弹性箱的作用像是一个基于空间进行调整的辉煌容器。您可以控制每个设备上的订单，而不是随机堆叠。

Divi 5还可以很好地处理嵌套和复杂的布局。您可以在每个断点处更改行结构，列大小和模块顺序，而无需复制内容或编码。

它还自动管理垂直对齐和定位，使您的内容看起来有目的，完全响应且不随机排列。

Divi 5中响应迅速重新排序的分步指南

让我们看一下如何使用其新的Flexbox系统在Divi 5中重新排序元素。下面的步骤使您通过设置列结构并在不同的断点上调整顺序，以使您的布局在每个设备上保持清晰且一致。

1。设置您的七个自定义断点

Divi 5为您提供了七个断点，而不是三个断点。您可以更改每个像素值，以便您的网站在任何设备上都正确。

单击任务栏中的“省略号”菜单，并找到断点切换开关。每个都有默认范围，但是您可以更改这些数字以更好地适合您的受众。

您会看到电话（767px以下），电话宽（860px以下），平板​​电脑（980px以下），平板​​电脑宽（以下1024px），桌面（超过981px），宽屏（超过1280px）和超宽（超过1440px）。

打开它们后，任务栏中出现了很小的图标。单击任何图标，以查看您的网站如何立即查看该屏幕大小。

您可以抓住画布的边缘并向左或向右拖动，而不是单击每个图标并受到测试的限制。您的设计在拉动时会缩小或扩展，显示您的布局在不同宽度时的变化方式。

将画布拖到300px，然后观察您的三列桌面布局变成单个移动堆栈。将其拉回1200px，然后再次看到您的内容散布。您无需切换预览模式或调整浏览器窗口的大小。

2。访问Flex控件

单击任何行的设置图标以打开右侧的设置面板。导航到该面板顶部的“设计”选项卡。在布局菜单下，您会找到Divi 5的Flexbox控件的所有。默认情况下，在布局样式下选择FLEX。

如果未应用于您现有的布局，则可以通过单击将其更改为Flex。

向下滚动以找到布局方向字段。这将确定列出现的顺序和方式（彼此并肩或更高）。

以下是控制对齐和分配的合理内容选项。同时，对齐项目选项出现在定位选项下方。

3。每个屏幕尺寸的微调布局结构

您的Flexbox控件现在已经有效，但是桌面布局可能需要用于较小屏幕的结构调整。三列布局可能在台式机上工作得很漂亮，但在平板电脑上变得压倒性和拥挤，需要2×2网格，甚至在移动设备上只有一个网格的空间。

幸运的是，控件右上方的设备图标使您可以在不同的屏幕上预览布局，并为每个断点进行了flexbox设置。这使您可以调整设计，使其看起来不错，并且在每个设备上都可以很好地工作。

切换到平板电脑断点，然后单击“更改列结构”按钮。而不是当前设置，选择一个2×2对称布局。通过在每行中显示较少的卡片，这立即使视图减少了压倒性。根据需要调整垂直和水平缝隙以保持平衡外观。然后选择CTA列，将其列类设置为尺寸设置下的全宽，然后选择“成长为填充”。

现在，您的平板电脑版本同时显示两张卡片，保持统一的外观。呼叫操作按钮位于底部的行中，使其脱颖而出，类似于您的桌面布局。此更新有助于创造一种更清洁，更具吸引力的体验，从而避免了太多选择聚集在一起的杂乱无章的感觉。

对于移动设备，请使用更改列结构选项切换到单列结构。在Flexbox控件中，将布局方向设置为列反向。将差距调整为最适合您的内容的差距。

4。跨断点的重新排序列

使用订单值是一种手动确定在各种屏幕尺寸的Flex容器元素（通常列）的顺序的好方法。行设置中的“顺序”选项卡给每个列提供一个数字，该数字告诉浏览器：“在位置1中显示此列，位于位置2中的该列”，依此类推。较低的数字首先出现，较高的数字出现最后一次。那样简单。

您甚至可以使用订单“ 0”或诸如“ -1”之类的负数来强制特定内容首先出现，无论其他值如何。

每个断点都支持其自己的订购系统，使您可以完全控制跨设备的元素定位。

让我们看一个实用的例子：在桌面上，选择第1列，然后将其订单设置为1。选择第2列并将其订单设置为“ 2”，并对列的其余部分进行相同操作。您的桌面布局从左到右自然流动，并以呼吁进行操作。

在平板电脑和手机上定制订单

现在，使用设备切换切换到平板电脑断点。并更改列订单：

将第6列（召唤）设置为“ 3”，因此它显示在中间行中。将列1和第2列（第3列AS 4）留下，其余部分则为需要。平板电脑用户在价值主张后立即查看您的呼吁行动，然后是支持细节。

然后，使用设备切换切换到移动设备。将CTA列的订单更改为“ 3”，并按原样保留前两个列的顺序。使列的其余部分类似于平板电脑的布置。

内容的基本源顺序保持不变，但是CTA从最后一个位置移至第三位，而不会影响桌面布局。这样，您就可以控制部分在不同的断点出现的情况下，而无需重复或重组您的内容。

控制所有内容如何用Divi 5堆叠

Divi 5的新Flexbox系统可为您精确控制跨设备的内容堆栈。通过七个可自定义的断点和实时帆布缩放，您可以实时预览和调整布局。

您不必依靠浏览器的默认堆叠顺序，而是确切地确定侧栏，CTA和密钥内容出现的位置。 Flexbox使您可以在每个设备上保持层次结构和清晰度，而无需额外的解决方法或代码。