简介
在本课程中，我们将介绍如何使用图库区块在您的网站上创建视觉上吸引人的内容。图库区块允许您轻松添加多张照片并自动将它们排列在图库中，非常适合展示作品集、产品图片或照片收藏。
添加和使用图库区块
最酷的是，您只需从计算机中拖放一组图像，它们就会自动添加到图库区块中。或者您可以输入斜杠Gallery并插入区块。完成后，您可以从计算机或媒体库上传图像。请注意，始终记得为图像添加替代文本。替代文本是图像的简短描述，有助于使用屏幕阅读器的人理解图像显示的内容，并帮助搜索引擎更好地找到和排名图像。因此，我将从媒体库中选择5张图像，然后创建一个新的图库。插入后，我将选择父区块，当我们转到设置时，我们会注意到可以更改要查看的列数。在下面，您可以更新图像的分辨率。在这种情况下，我将更新为完整尺寸。还需要注意的是，“裁剪图像以适应”默认情况下已启用。如果您有不同大小和形状的图像，此选项非常有用。裁剪将使图库中每行的图像大小相同。您可以切换此选项以查看您更喜欢哪种方式。
样式
当我们转到样式时，可以更新图库区块的背景颜色，在“尺寸”下方，可以更改图像区块之间的间距。我们可以在各个区块之间添加水平和垂直间距。当您点击三个垂直点时，可以添加内边距和外边距。在“尺寸”下方，还可以为图库区块添加边框或圆角。现在我们已经探索了一些选项，让我们做一些更改。首先，我将返回设置，然后将列数更改为5。然后我们可以返回样式并将垂直区块间距更改为0。然后，将区块的对齐方式更改为全宽。在这个阶段，还需要强调的是图库区块是响应式的。
灯箱
接下来，我想向您展示如何在WordPress网站上添加灯箱。灯箱是一个时尚的功能，允许图像、视频或图库在同一页面上以漂亮的覆盖层打开，正如您在这些示例中看到的那样。让我们看一个未添加灯箱的示例。当您点击图像时，没有任何反应。我们需要前往站点编辑器添加灯箱。因此，我将点击顶部的“编辑站点”。转到“样式”。点击眼睛图标打开样式书。转到“媒体”，选择图像区块。然后，在侧边栏设置中，在“设置”下方，我们可以打开“点击时展开图像”的选项。保存后，我们可以在前端查看。现在，当您点击图像时，它会以覆盖层的形式打开。
自定义模式
在下一个示例中，我将将列数更改为2，然后批量选择图库区块内的所有图像区块。然后，我们可以一次性更改每个图像区块的圆角。让我们看另一个快速示例。这次我将将图库区块的背景颜色更改为黑色，在图库区块内的图像周围添加一些内边距或空间，然后我将批量选择所有图像并一次性添加10像素的白色边框。
示例
最后，让我们看看您可以使用的更多选项。首先，您可以为图库区块添加链接和标题。当您选择图库区块内的图像区块时，可以使用小箭头或移动器将区块重新定位到新位置。选择图像时，可以点击区块工具栏中的“替换”以从媒体库或计算机中选择新图像。当您选择图库区块时，可以点击区块工具栏中的“添加”以向图库添加更多图像。当您点击三个垂直点时，您会注意到有一个选项可以重命名区块以及创建模式。
结论
祝您使用图库区块创建视觉上吸引人的设计一切顺利。
实践
使用WordPress Playground测试您学到的知识。
步骤1：在样式书中启用灯箱功能。
步骤2：下载5张这些免费的大象图片：https://unsplash.com/s/photos/elephants?license=free
步骤3：添加图库区块和5张图像。使用您学到的知识重新创建以下三个示例。
示例 1
- 三列
- 对齐方式：无
示例 2（屏幕截图）
- 单列
- 对齐方式：宽
- 块间距：0
示例3（屏幕截图为移动视图）
- 两列
- 对齐方式：全宽
- 垂直和水平内边距：XS
- 垂直和水平块间距：XS
- 每个图像块的半径为 50 像素
