如何在移动设备上调整 Divi 的列堆叠顺序

已发表: 2017-05-05

Divi 建立在响应式网格上，当从桌面到移动显示时，它以某种方式堆叠（或排序）您的列。列按从左到右的顺序堆叠。因此，如果您在桌面上有三列，左（第一）列将首先在移动设备上堆叠，然后是下面的第 2 和第 3 列。这是有道理的，通常是大多数网站所需要的。但有时某些在桌面上看起来很棒的设计会在移动设备上造成不一致的内容排序。在这种情况下，您需要更改列的顺序以在移动设备上创建更一致的用户体验。

今天我将向您展示两种可以在移动设备上更改 Divi 列堆叠顺序的方法。第一个涉及使用 Divi 中的“禁用”功能专门为移动设备创建内容的替代版本。第二种方法是使用自定义 CSS 向您的列添加类，这些类指定它们在 Mobile 上的顺序。

让我们开始吧！

创建内容

订阅我们的 YouTube 频道

在新页面上，单击以使用 Divi Builder 并启动 Visual Builder。

从可视化构建器中，选择 2 列 (1/2 – 1/2) 布局。

将图像模块添加到行内的第一列。

在图像设置下，上传并插入图像。（我使用的是来自 unsplash.com 的 770 x 433 图像）

接下来，在行的第二列中插入一个文本模块。

在常规文本设置下，将文本添加到内容文本框。

节省

现在您应该有一行 2 列，第一行包含图像，第二行包含文本。我在下图中为您标记了列。

在可视化构建器中，通过单击复制行图标复制具有相同 2 列的行。

在您的第二行（您刚刚创建的重复行）上，将图像模块拖到第二列并将文本模块拖到第一列。

像这样交替每行上的图像和文本位置可能是在您的网页上显示您的内容的一种创造性和有效的方式。但是当列在移动设备上堆叠时，它也会产生问题。将浏览器的宽度缩小到小于 980 像素（移动设备的断点）时，每行的内容会从左到右堆叠。这意味着您行的第一列将堆叠在第二列的顶部。如果您希望在移动设备上保持内容流的一致性，这可能会导致问题。使用当前布局，移动设备上的内容流将按以下顺序堆叠：

第 1 列（图片）
第 2 栏（文本）
第 1 列（文本）
第 2 栏（图片）

更好的移动布局是更改行中列的堆叠顺序，以便获得更一致的内容布局。

移动端更改列堆叠顺序的两种方法

1：使用Divi的“禁用”功能更改移动设备上的列堆叠顺序

Divi 的“禁用”功能允许您在手机、平板电脑和桌面显示器上创建不同版本的内容。只需点击几下，您就可以在任何设备上隐藏或显示部分内容。

对于这个例子，我们需要在桌面上保持第二行可见，但在移动设备上隐藏它。然后我们需要创建第二行的不同版本，以便仅在移动设备上可见。

使用 Visual Builder，复制第二行。

在我们编辑新的重复行之前，打开第二行中的行设置。

在常规行设置下，选中以禁用手机和平板电脑上的行。

节省

现在第二行将在移动设备上隐藏。接下来，我们需要将新的第三行的布局更改为我们希望列在移动设备上的顺序。

将文本模块内容拖到第二列并将图像模块拖到第一列。

现在进入第三行的常规行设置并选中该框以禁用桌面上的行。

节省

现在看看你的结果。您会注意到第三列在桌面上被禁用，然后在移动设备上启用。这会在移动设备上创建更一致的布局。

就是这样！

通过禁用和启用某些内容部分的能力，您可以轻松更改/重新排序任何类型的布局。

此外，当从 Visual Builder 查看您的页面时，Divi 可以方便地淡化页面上隐藏的内容，以便您可以识别哪些内容被禁用。

使用“禁用”功能隐藏列和行是一个安全的选择。但是，如果您这样做太多和/或有很多内容，编辑页面可能会令人困惑。而且，在更新内容时，您必须更新所有版本的内容，而不仅仅是一个版本。

如果禁用和启用内容不是适合您的解决方案，还有另一种使用 CSS 类在移动设备上订购内容的方法。

2. 使用 CSS 类更改移动设备上的列堆叠顺序

为此，我们将使用一些自定义 CSS，以便我们可以向我们的列中添加一个类，以便在移动显示上根据您的需要对它们进行排序。

然后从您的 wordpress 仪表板，转到 Divi → Theme Customizer → Additional CSS 并添加以下 CSS：

@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}

/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}

.second-on-mobile {
-webkit-order: 2;
order: 2;
}

.third-on-mobile {
-webkit-order: 3;
order: 3;
}

.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}

}

保存和发布

查看您刚刚添加的 CSS，请注意所有 CSS 都包含在媒体查询中，该媒体查询仅将 css 用于移动设备（屏幕尺寸小于 980 像素宽）。
您还会注意到第一个类称为“自定义行”。此类将被添加到您想要在移动设备上更改列堆叠顺序的行。

接下来的 4 个类（“first-on-mobile”、“second-on-mobile”、“third-on-mobile”和“fourth-on-mobile”）有一个订单属性和一个分配给它的数字值。这些类将添加到“自定义”行中的列中，以指定您希望它们在移动设备上显示的顺序。

现在我们已经有了我们的 CSS，让我们将这些类应用到我们的页面。

确保按照说明创建了两行。此外，请确保您没有在移动设备或桌面设备上禁用任何行。

对于本示例，我们将更改移动设备上第二行中列的顺序。这是我们想要完成的任务的说明。

使用 Visual Builder，打开第二行的行设置。

在行设置中，在 CSS 选项卡下，添加以下内容：

将“custom_row”添加到 CSS Class 文本框。（将您的行包裹在一个弹性盒中）

将“second-on-mobile”添加到第 1 列 CSS 类文本框（这将更改第 1 列的顺序以在移动设备上显示第二个。类名应该易于记忆。）

将“first-on-mobile”添加到第 2 列 CSS 类文本框（这会将第 2 列的顺序更改为首先在移动设备上显示。）

注意：向每一列添加一个排序类很重要。

现在让我们看看结果。请注意在移动设备上如何更改第二行列以显示与第一行相同的内容。这创建了图像→文本→图像→文本的一致流。

使用 CSS 类更改任何布局的列堆叠顺序

您可以使用相同的方法更改任何列布局的顺序。请记住，自定义 CSS 使您能够添加第一个、第二个、第三个和第四个位置值。例如，如果您想像这样更改四分之一二分之一四分之一布局的顺序：

只需按照您之前所做的相同步骤操作即可。在您的行设置中，在 CSS 选项卡下，将类“custom_row”添加到该行并添加您的排序类（“first-on-mobile”、“second-on-mobile”、“third-on-mobile”）到您的每一列。请记住确保为每个列添加一个类，以便它们都具有指定的顺序值。

就是这样！

首选方法

如果您需要为每个设备创建不同的布局和/或计划在移动设备上更改列顺序之外的内容，那么您需要使用 Divi 的“禁用”功能来自定义您的布局。

如果您只需要在移动设备上重新排序列而不更改内容，并且不想费心处理多个禁用/启用的内容版本，那么您可能会从 CSS 方法中受益。

搜索引擎优化注意事项

多年来，关于搜索引擎如何处理页面上禁用或隐藏的内容一直存在很多争论。即使您可能隐藏某些设备的内容，Google 仍然可以抓取这些内容。这可能被视为重复内容，并可能表明使用“禁用”功能会对您的页面排名产生负面影响。然而，像谷歌这样的搜索引擎非常擅长识别内容是否因响应式布局原因而被隐藏。简而言之，Google 知道您是否在为不同的设备复制内容，并且不会因此而惩罚您。只要您不出于恶意原因隐藏内容，就可以安全使用。

最后的想法

能够更改列的堆叠顺序非常有用，有时也是必要的。我们都需要能够为桌面显示创建独特的设计布局，同时又不影响移动设备上内容流的一致性。使用 Divi 的“禁用”功能，您可以为每个设备创建完全不同的布局。此外，通过几行自定义 CSS，您可以轻松地将类添加到行和列中，以便根据移动设备的需要对它们进行排序。

我希望这篇文章能帮助您更好地控制您的移动显示器。

我期待在评论中收到您的来信。

干杯!