使用画廊区块

简介

在本课中,我们将介绍如何使用画廊区块在您的网站上创建视觉吸引力强的内容。画廊区块允许您轻松添加多张照片并自动排列成画廊,非常适合展示作品集、产品图片或照片收藏。

添加和使用画廊区块

很酷的一点是,您只需从电脑中拖放一组图片,它们就会自动添加到画廊区块中。或者,您可以输入斜杠画廊并插入该区块。完成后,您可以从电脑或媒体库上传图片。快速提醒一下,始终记得为图片添加替代文本。替代文本是对图片的简短描述,帮助使用屏幕阅读器的人理解图片内容,并帮助搜索引擎更好地查找和排名图片。所以,我将从媒体库中选择5张图片,然后创建一个新的画廊。插入后,我会选择父级区块,当我们进入设置时,会注意到我们可以更改想要显示的列数。在下面,您可以更新图片的分辨率。在这种情况下,我会将其更新为全尺寸。另外需要注意的一点是,“裁剪图片以适应”默认已开启。如果您的图片大小和形状不同,这个选项很有用。裁剪会使画廊每一行中的图片大小相同。您可以切换此选项的开启和关闭,看看哪种方式更符合您的偏好。

样式

当我们进入样式时,可以更新画廊区块的背景颜色,在尺寸下方,我们可以更改图片区块之间的区块间距。我们可以在各个区块之间添加水平间距以及垂直间距。当您点击三个垂直点时,可以添加内边距和外边距。在尺寸下方,您还可以为画廊区块添加边框或圆角。现在我们已经探索了一些选项,让我们做一些更改。首先,我会返回设置,然后将列数改为5。然后我们可以返回样式,将垂直区块间距改为0。接着,将区块的对齐方式改为全宽。在此阶段,还需要强调画廊区块是响应式的。

灯箱

接下来,我想向您展示如何为您的WordPress网站添加灯箱。灯箱是一种时尚的功能,允许图片、视频或画廊在同一页面上以漂亮的覆盖层形式打开,正如您在这些示例中看到的那样。让我们看一个没有添加灯箱的示例。当您点击图片时,什么也不会发生。我们需要前往站点编辑器来添加灯箱。所以我会点击顶部的编辑站点。进入样式。点击眼睛图标打开样式手册。前往媒体,选择图片区块。然后,在侧边栏设置中,在设置下方,我们可以开启“点击时展开图片”选项。保存后,我们可以在前端查看效果。现在,当您点击图片时,它会以覆盖层形式打开。

自定义模式

在下一个示例中,我将把列数改为2,然后批量选择画廊区块内的所有图片区块。然后,我们可以一次性更改每个图片区块的圆角。让我们再看一个快速示例。这次我将把画廊区块的背景颜色改为黑色,在画廊区块内的图片周围添加一些内边距或间距,然后我将批量选择所有图片,并一次性添加10像素的白色边框。

示例

最后,让我们看看您还可以使用的其他几个选项。首先,您可以为画廊区块添加链接以及标题。当您选择画廊区块内的一个图片区块时,可以使用小箭头或移动器将其重新定位到新位置。选择图片时,可以点击区块工具栏中的替换,从媒体库或电脑中选择新图片。当您选择画廊区块时,可以点击区块工具栏中的添加,为画廊添加更多图片。当您点击三个垂直点时,会注意到有一个重命名区块以及创建模式的选项。

结论

祝您在使用画廊区块创建视觉吸引力强的设计时一切顺利。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注