全宽图像画廊在网站上看起来总是很棒。 全宽图库跨越浏览器窗口的整个宽度。 这些额外的空间允许图像保持更大的尺寸,这对用户体验非常有用。 网格布局提供了一种美学设计,将图像组织成列,可以很好地适应所有浏览器宽度。
在本教程中,我将向您展示如何使用 Divi Gallery 模块创建全角图片库。 您可能会惊讶于在 Divi 中做到这一点是多么容易。 我还将提到几种方法,您可以使用自定义间距来更好地控制移动设备上的全宽画廊。
让我们开始吧。
之前和之后
这是带有 12 张图像的默认 Divi Gallery 模块。
这是您可以轻松创建的示例全角图像库。
准备你的设计元素
对于本教程,您需要安装并激活 Divi 主题。 您还需要将 12 张图片添加到您的媒体库中,以用于构建图片库。 对于使用网格布局的 Divi 画廊模块,如果您计划在灯箱显示中打开图像,则图像的大小应约为 1500 像素 x 800 像素,以便在大多数桌面上很好地填充屏幕。
对于本教程,我将使用来自餐厅画廊页面预制布局的图像,该布局可从 Divi Builder 中免费获得。 您可以下载这篇文章底部的所有图片。
实现全宽 Divi Gallery 模块
订阅我们的 Youtube 频道
设置新页面
对于初学者,创建一个新页面,给你的页面一个标题,然后部署 Divi Builder。 选择“从头开始构建”选项,然后发布您的页面。 然后点击在前端构建。
创建图片库
部署 Divi Builder 后,继续创建一个具有单列行的新常规部分,并将 Divi Gallery 模块添加到该行。
Divi 将使用您的媒体库中的一些图像填充画廊模块,以网格显示形式显示,如下所示:
在 Divi 图库模块设置中,单击灰色加号图标可将 12 个图像添加到图库。
然后更新 Divi Gallery 模块设置,如下所示:
图片数量:12
显示标题和说明:否
显示分页:否
为图片库创建全角布局
要为图片库创建全角布局,让我们暂时保存我们的画廊设置并打开行设置。 在设计选项卡下,更新以下内容:
使这一行全宽:是
天沟宽度:1
这是启动并运行全宽图像库的最简单方法。 选择“Make This Row Fullwidth”结合将装订线宽度设置为“1”将使画廊跨越该部分的全宽(在所有浏览器尺寸上)并消除图像之间的间距。
并且画廊也将继续跨越移动页面的全宽。
自定义图像悬停覆盖选项
要完成全宽图像库的设计,它有助于自定义 Divi 库模块设置中内置的图像悬停覆盖选项。 您可以更改缩放图标、图标颜色和覆盖颜色。 为此,请打开图库设置并更新以下内容:
缩放图标颜色:#ffffff
悬停覆盖颜色:#333d48
悬停图标:见截图
现在让我们看看最终的设计。
更多全宽图片库间距选项
使用装订线宽度间距创建全角布局
在 Divi Gallery 模块中自定义图像间距的最简单方法是调整其父行的装订线宽度。 装订线宽度是指列之间的间距。 对于任何 Divi Row 元素,装订线宽度的可选值范围为 1 到 4。
1 表示列之间的边距为零。
2 表示列之间有 3% 的右边距。
3 表示列之间有 5.5% 的右边距。
4 表示列之间有 8% 的右边距。
由于我们使用的是 Divi Gallery 模块,所以装订线宽度也指画廊项目之间的间距。 因此,向行添加装订线宽度将调整图库模块中图库项目/图像的间距。
使用自定义宽度更好地控制移动设备上的间距
如果“Make This Row Fullwidth”选项设置为 YES 并且 Gutter 宽度为 2 或更大(除 1 之外的任何值),Divi 将自动调整行的宽度以提供额外的外部间距。 这是必要的,因为装订线宽度仅适用于列/图库项目之间的间距,而不适用于行本身。 但是,这可能会增加比您在移动设备上想要的更多的边距间距。 例如,如果您使用 2 Gutter Width 激活了“Make This Row Fullwidth”选项,则您的行的实际宽度在移动设备上将是 89%(而不是 100%)。 因此,如果您希望该行在移动设备上跨度为 100%,则可以改用“自定义宽度”选项。 通过为该行提供 100% 的自定义宽度,该行的宽度将保持为 100%,而与 Gutter Width 值无关。 现在,您可以使用行填充简单地为行添加外部间距。 这将使您能够更好地控制台式机、平板电脑和智能手机的外部间距。
这是一个如何工作的示例。 打开行设置并更新以下内容:
自定义宽度:100%
天沟宽度:2
请注意画廊的右侧或左侧没有边距。
现在将以下自定义填充添加到行中:
自定义填充(桌面):顶部 5%,底部 5%,左侧 5%,右侧 5%
自定义填充(智能手机)顶部 5%,底部 5%,左侧 0%,右侧 0%
桌面(和平板电脑)上的 5% 填充将提供我们需要匹配画廊项目之间的间距的外部间距。
并且通过为智能手机取出左右自定义填充,图像将跨越浏览器的全宽,使图像更具可见性。
将自定义间距添加到没有装订线宽度的画廊项目
如果您想更好地控制 Divi Gallery 模块的间距,您实际上可以在画廊项目之间添加自己的自定义间距,而不是使用 Gutter Width。 为此,您需要将装订线宽度设置为 1,然后在 Divi 画廊模块设置中添加画廊项目之间的间距。 有关更多信息,请查看有关使用 Divi Gallery 模块创建具有自定义间距的图像库的完整教程
了解有关 Divi Gallery 模块的更多信息
查看以下教程,了解更多自定义 Divi Gallery 模块的方法:
最后的想法
希望本教程能帮助您了解如何使用 Divi Gallery 模块在您的下一个项目中创建一些漂亮的全角图像画廊。 不要忘记探索 Divi 的所有内置设计选项和悬停效果,以使您的图片库更加突出。
我期待在下面的评论中收到您的来信。
干杯!