在不同断点处更改 Divi Gallery 模块中的列数

已发表: 2019-02-23

Divi Gallery 模块允许您在响应式网格布局中创建漂亮的图片库。图库被认为是响应式的，因为它会根据不同的浏览器宽度缩放图像的大小并调整网格中的列数。

默认情况下，gallery 模块具有三个断点（样式在特定浏览器宽度发生变化的点），用于调整网格中的列数。它将在桌面上以四列显示您的图片库，然后在平板电脑上分成三列，在小型平板电脑（和大型手机）上分成两列，在手机上分成一列。

此默认设置通常适用于大多数情况，但有时您可能需要对某些浏览器宽度上显示的列数进行更多控制。这就是为什么在本教程中，我将向您展示如何完成 Divi Gallery 模块中显示的列数，不仅适用于桌面，还适用于三个额外的浏览器断点。

抢先看

这是我们将在本教程中构建的内容的先睹为快。请注意不同浏览器宽度上图片库的不同列数。

准备您的设计元素

订阅我们的 YouTube 频道

对于本教程，您需要安装并激活 Divi 主题。您还需要将 12 张图片添加到您的媒体库中，以用于构建图片库。对于使用网格布局的 Divi 画廊模块，如果您计划在灯箱显示中打开图像，则图像的大小应该在 1500 像素 x 800 像素左右，以便它在大多数桌面上很好地填充屏幕。

为 Divi Gallery 模块实现自定义间距

设置新页面

首先，创建一个新页面，为页面命名，然后部署 Divi Builder。选择“从头开始构建”选项，然后发布您的页面。然后在前端点击构建。

创建图片库

部署 Divi Builder 后，继续创建一个具有一列行的新常规部分，并向该行添加一个 Divi Gallery 模块。

Divi 将使用您的媒体库中的一些图像以网格显示方式填充库模块，如下所示：

在图库模块设置中，单击灰色加号图标可将 12 张图像添加到图库。

然后更新Divi Gallery模块设置如下：

图片数量：12
显示标题和说明：否
显示分页：否

调整行设置以制作没有装订线宽度的全宽画廊

为了让我们的新列结构正常工作，我们需要做的主要事情是摆脱图库中图像之间存在的默认间距/边距。为此，我们需要做的就是将装订线宽度设置为 1。此外，作为一个选项，您可以使行全宽，以使图片库跨越浏览器的整个宽度。为此，请打开行设置并更新以下内容：

使这一行全宽：是
天沟宽度：1

如果要在图库中的图像之间添加间距，我建议使用此方法，因为我们需要将装订线宽度设置为 1。

默认情况下，图库如何响应不同的浏览器宽度

如前所述，默认情况下，Divi 图库模块会在桌面上以四列显示您的图库，然后在平板电脑上分成三列，在小平板电脑（和大手机）上分成两列，在手机上分成一列。

但是，我们将使用一些自定义 CSS 片段将其更改为在某些断点处包含自定义数量的列。

为所有浏览器大小设置特定数量的列

如果您想更改图库中显示的列数，以便所有浏览器尺寸上的列数保持不变，有一种简单的方法可以做到这一点。如果您只想在一列、两列或三列中显示您的画廊，这可能会有所帮助。这样你就可以在桌面上拥有非常大的图像，在移动设备上拥有较小的图像，同时保持列号相同。拥有四列或更多列可能不起作用，因为图像对于手机显示器来说太小了。

假设您想在所有浏览器尺寸上显示三列。为此，请打开您的 Divi 画廊模块设置并将以下自定义 CSS 添加到画廊项目：

width: 33.33% !important;
margin: 0 !important;
clear: none !important;

现在，您的图库将在所有浏览器尺寸上保留三列结构。

如果您想要所有浏览器尺寸的 2 列布局，您需要做的就是将 width 属性值更改为 50%。

如果您想要 1 列布局，只需将宽度更新为 100%。

就是这样。

但是，如果您想在某些断点处更好地控制列数，请继续阅读。

更改特定断点的列数

如果您想完全控制浏览器到达特定断点时显示的列数，我们可以使用一些 CSS 片段以及针对特定浏览器宽度的媒体查询。

将 CSS 类添加到 Divi Gallery 模块

在我们添加自定义 CSS 之前，首先我们需要给我们的画廊模块一个自定义 CSS 类，以便我们可以在我们的 CSS 中引用该特定类。这将确保我们的 css 只应用于这个特定的画廊模块。为此，请打开图库模块设置并在高级选项卡下添加以下 CSS 类：

CSS 类：col-width

如果你添加了，不要忘记把本文上一节中添加到Gallery Item的自定义css取出来。

之后，保存您的设置。

将自定义 CSS 添加到页面设置

准备好 CSS 类后，您就可以添加自定义 CSS。通过单击页面底部页面设置栏中的齿轮图标打开页面设置（或者您可以使用键盘快捷键“o”）。

然后在高级选项卡下添加以下自定义 CSS。

/** Desktop **/
@media (min-width: 981px){
.col-width .et_pb_gallery_item {
width: 16.66% !important; /*six columns*/
clear: none !important;
}
}

/** Tablet **/
@media (max-width: 980px){
.col-width .et_pb_gallery_item {
width: 25% !important; /*four columns*/
clear: none !important;
}
}

/** Small Tablet and Large Phone **/
@media (max-width: 767px){
.col-width .et_pb_gallery_item {
width: 33.33% !important; /*three columns*/
clear: none !important;
}
}

/** Phone **/
@media (max-width: 479px){
.col-width .et_pb_gallery_item {
width: 50% !important; /*two columns*/
clear: none !important;
}
}