WordPress divi主题

使用 Divi Gallery 模块创建具有自定义间距的图像库

| 5月 14, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

Divi 的图库模块允许您轻松地以网格布局创建漂亮的图像库。 而且,也许网格最重要的设计元素是间距。 使用 Divi,您可以调整装订线宽度以控制网格项目(或图像)之间的间距。 但是,即使有四个装订线宽度值可供选择,这些设置的装订线宽度值在某些情况下也可能会受到限制。 因此,如果您想完全控制图像之间的间距,Divi 仍然可以满足您的需求。 实际上有一个简单的方法可以做到这一点。

google广告开户

在本教程中,我将向您展示如何通过使用 Divi Gallery 模块向图库添加自定义填充来完全控制图库间距。

让我们开始吧。

抢先看

这是一个图片库,每张图片都有 2vw 的自定义填充。 请注意间距的细微变化,因为 2vw 填充会根据视口的宽度进行缩放。

divi画廊模块

这是更改浏览器宽度时的样子。

divi画廊模块

准备你的设计元素

订阅我们的 Youtube 频道

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

WordPress divi主题

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

设置您的新页面

对于初学者,您需要创建一个新页面,为页面命名,然后部署 Divi Builder。 选择“从头开始构建”选项,然后发布您的页面。 然后点击在前端构建。

创建平铺画廊

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

divi画廊模块

然后单击灰色加号图标将 12 个图像添加到图库。

divi画廊模块

然后更新 Divi Gallery 模块设置,如下所示:

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

divi画廊模块

这很容易。 我将保留默认样式,以便我们可以更多地关注网格布局中的图像间距。

通过调整行设置创建全宽画廊

对于这个图库布局,我想让图库全角。 这将最好地展示将应用于我们每个图像的自定义间距。 由于我们将使用自定义填充而不是装订线宽度(边距)来分隔图像,因此我们希望完全摆脱装订线宽度。 为此,请打开行设置并更新以下内容:

fiverr建站WordPress程序员

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

divi画廊模块

如果您想知道,装订线宽度的值范围为 1 到 4,并表示以下内容:

1 表示列之间的边距为零。
2 表示列之间 3% 的右侧和底部边距。
3 表示列之间 5.5% 的右侧和底部边距。
4 表示列之间有 8% 的右侧和底部边距。

通过将装订线宽度设置为 1,图像之间的边距为 0。

独立站选品工具

这个简单的设置将允许您使用 Divi 画廊模块设置中的一组不同选项完全控制图像之间所需的间距量。

通过调整图库模块设置在图像之间创建自定义间距

有两种方法可以在图库中的图像之间添加间距——使用图像边框或自定义填充。 使用图像边框来创建间距很容易。 只需调整边框宽度即可在图像之间创建所需的确切空间量。 您甚至可以为边框选择不同的颜色,但是如果将边框设置为透明,您将能够看到更干净的行背景颜色。

divi画廊模块

使用边框可用于添加自定义间距,但您可能希望能够为图像设计与自定义间距分开的边框。 这就是为什么最好在图像周围使用自定义填充。

对于这个例子,我们将在每个图像周围添加一个 2vw 填充。 您可以使用您喜欢的任何长度单位(px、em、%),但我真的很喜欢 vw 长度单位,因为它与浏览器的视口(或浏览器)宽度相关。 这意味着它的长度会随着浏览器宽度的增加而增加,而长度会随着浏览器的减小而减少。 这对于响应式设计非常有用,因为您不必担心为平板电脑和智能手机设置单独的填充值。

高质量外链购买

要设置自定义填充,请打开 Divi Gallery Module 设置并将以下自定义 CSS 添加到 Gallery Item:

padding: 2vw

divi画廊模块

现在我们需要将相同的自定义填充值添加到 Divi 画廊模块以匹配画廊边缘的间距。 转到设计选项卡并将以下自定义填充添加到模块中:

自定义填充:2vw 顶部,2vw 底部,2vw 左侧,2vw 右侧

divi画廊模块

JasperAI 10000字免费额度试用

现在打开行设置并去掉顶部和底部的默认填充,以便在行内的模块周围有相等数量的填充。 打开行设置并更新以下内容:

自定义填充:0px 顶部,0px 底部

divi画廊模块

最后结果

这是不同浏览器宽度的最终结果。 请注意间距的细微变化,因为 2vw 填充会根据视口的宽度进行缩放。

divi画廊模块

WordPress备份工具updrafplus

这是更改浏览器宽度时的样子。

divi画廊模块

最后的想法

我希望这个简单的设计技巧可以帮助您微调画廊的间距,以便您可以为图像创建漂亮的网格布局。 而且,同样的技术也可以用于投资组合模块! 随意尝试不同的长度单位以满足您的需求,并尝试不同的行背景颜色和渐变。

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题