分类： 使用媒体区块

简介

让我们探索如何使用插件创建轮播滑块。网页轮播通常是一种优雅的方式，可以将相关内容分组或组织到一个空间中，从而在相关信息之间建立视觉联系。

插件

插件目录中有多种滑块插件可用，例如 MetaSlider、Smart Slider 3 和 Carousel Slider Block for Gutenberg。请注意，我们不推荐使用任何提到的插件。它们旨在说明用户可能使用的潜在选项。

MetaSlider

如果您使用 MetaSlider 这样的插件，您需要进入插件，点击“添加新”、“添加幻灯片”，然后从媒体库中选择相关图片。添加幻灯片后，有多种选项可供选择：移动选项、高级选项、无障碍选项，甚至开发者选项。

Carousel Slider Block for Gutenberg

在本节中，我将简要展示如何使用 Carousel Slider Block for Gutenberg 插件，因为您可以将其作为区块添加，并且它支持向幻灯片中添加其他区块。而且它与 WooCommerce 兼容。安装并激活插件后，您可以打开一个页面或文章。要添加区块，我将输入 /slider 并选择轮播滑块，然后我们可以在其中开始添加区块。在这个例子中，我将添加 3 个图片区块。插入后，您可以像修改其他区块一样修改它。让我们继续打开列表视图，选择父区块，然后将对齐方式更改为宽宽度。然后，我们可以进入侧边栏设置，调整要显示的幻灯片数量。在下方，您可以选择一次滚动多少张幻灯片以及幻灯片动画速度。在底部，箭头和点导航已启用。

还建议避免自动滚动和自动播放，以便让您的受众有更多控制权，并避免任何无障碍问题。如果滑块自动播放，应该有一个暂停控件。如果您想知道，WordPress 中的 RTL 指的是对从右到左书写的语言的支持。在响应式设置下方，您可以添加一个断点，并决定当达到该屏幕尺寸时要显示多少张幻灯片。当您选择一个图片区块时，您可以设置宽高比，以确保所有图片显示为相同大小。然后我们可以在前端查看效果。

如前所述，此区块允许您添加图片区块以及其他区块。因此，在这个例子中，我添加了一个封面区块，并在封面区块内添加了标题区块、间隔区块和按钮区块。我还决定选择父区块，并将显示的幻灯片数量更改为一。

无障碍

在结束之前，我想指出滑块有时可能会导致无障碍问题。因此，为图片添加替代文本非常重要，这样您使用的滑块可以通过键盘操作并与屏幕阅读器交互。我将在本视频下方添加一个关于无障碍滑块要求的链接。

结论

祝您创作愉快，并明智地使用滑块。

介绍

今天，我们将探索封面区块。它是创建页眉、横幅式展示、行动号召等内容的绝佳工具。封面区块允许您在图片或视频上显示文本和其他内容。在本节中，我们将创建两种不同的设计。但首先，让我们快速了解一下在继续之前需要掌握的一些关键功能和设置。

关键功能和设置

需要理解的重要一点是，封面区块是一个容器区块，可以在其中容纳其他区块。当您向页面添加封面区块时，可以从计算机或媒体库上传图片或视频。您还可以选择“使用特色图片”选项，将封面设置为页面或文章的特色图片。然后，您可以点击彩色圆圈为封面区块添加叠加颜色，稍后可以在侧边栏设置中更新。

让我们从媒体库中添加一张图片。值得注意的是，WordPress 会自动添加一种与图片相配的叠加颜色。插入后，在列表视图中选择您的封面区块，然后使用区块工具栏将对齐方式更改为全宽。您还可以将内容位置更改为左上、中左或其他位置。此外，您可以将封面区块切换为全高，并根据需要添加双色调滤镜。在侧边栏设置中，我们可以选择“固定背景”，创建视差效果。当图片尺寸与填充空间不匹配时，“重复背景”选项非常有用。焦点选择器允许您标识图片最重要的视觉点，尤其是在移动设备上查看时。同时，请记得添加替代文本，为屏幕阅读器和 SEO 描述图片的用途。在样式下方，您可以编辑颜色叠加并更改其不透明度，使其变暗或变亮。接下来，您可以添加内边距，为封面区块中的内容创造更多空间。

横幅示例

现在，我们可以看一些示例。我想向您展示在第一个示例中如何创建以下横幅。我们可以继续添加封面区块，然后从媒体库中选择一张图片。接下来，我会确保选择封面区块，并将对齐方式更改为全宽。然后，我会将内容位置更改为中上。接着，我们可以继续添加一些文本。在这种情况下，我会写“探索山脉”，然后将文本大小更改为自定义大小。对于这个示例，我们将其改为“4 rem”。我还会将文本的外观更改为“中等”。

要更改文本的对齐方式，我将把段落区块或文本包裹在一个群组区块中。然后，取消选中“内部区块使用内容宽度”。完成后，我可以将群组区块的对齐方式更改为全宽。然后我会选择封面区块，打开样式。接着，我会将叠加不透明度保持在 50%，并可以在区块内容周围添加一些内边距或空间。现在我们可以关闭侧边栏设置中的列表视图，设计完成后，我们还可以检查它在移动设备上的显示效果。

如果您不希望图片被裁剪（就像我们在这里看到的），您可以更改宽高比。为此，我们可以返回页面，打开样式，然后向下滚动到宽高比。我会选择经典的 3×2 宽高比。当我们在移动设备上查看时，图片不会被裁剪。图片会适当缩放并保持其比例。

视差示例

在下一个示例中，我想向您展示如何创建这种酷炫的视差效果，将两张图片融合在一起。我添加了一个封面区块来创建这个设计，并从媒体库中选择了一张图片。插入后，我选择了封面区块，将对齐方式更改为全宽，并将区块切换为全高。然后我打开侧边栏设置，选择“固定背景”来创建视差效果。接着，我会点击区块工具栏上的三个垂直点，然后复制。

区块复制后，我会添加一张新图片。接下来，我打开列表视图，选择两个封面区块，并将它们添加到一个群组区块中。由于我想移除两张图片之间的间距，我会打开群组区块的样式，找到区块间距，并将其更改为零。请注意，如果您看不到区块间距设置，可能是因为您使用的主题不支持。然后我们的设计就完成了。我们还可以在较小的屏幕上查看它。

更多选项

最后，我想向您展示我使用封面区块创建的其他一些设计。在这种情况下，我使用封面区块为作品集网站创建了这个行动号召。同时，别忘了前往模式目录，查找使用封面区块构建的精彩模式。在最后一个示例中，我使用了其中一个页眉模式，为我的猫头鹰庇护所网站创建了一个页眉，左上角是标志和网站标题，右上角是我的导航菜单。在这里，我们也可以在移动设备上查看它。

结论

尽情使用封面区块吧，同时务必反复检查你的设计在小屏幕上是否显示正确。

简介

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

添加和使用画廊区块

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

样式

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

灯箱

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

自定义模式

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

示例

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

结论

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