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

by WordPress外贸独立站推广教学 | May 14, 2022 | Divi主题使用教程 | 0 comments

Divi 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;
}
}