水平金字塔画廊


在本届会议中,我们将仅使用一个行块和盖块来学习如何制作水平金字塔库。

学习成果

  1. 创建水平金字塔画廊。
  2. 嵌套行块和多个盖块。
  3. 改变盖子块的不透明度。
  4. 卸下盖子之间的块间距。
  5. 更改盖子块的最小高度。
  6. 更改盖子块的覆盖层。

理解问题

  1. 组块和行块有什么区别?
  2. 使用行块时如何堆叠移动设备的图像?
  3. 使用盖块有什么优点?

成绩单

嗨,欢迎学习WordPress。在这个简短的视频中,我们将研究如何通过仅使用块,无代码,无插件和不需要CSS来重新创建此水平金字塔库。雷竞技最好的部分是它在移动设备上显示,您只需要一个行块和覆盖块即可。所以让我们开始。

要开始,我们将创建一个新页面并添加一个行块。然后我们将添加我们的第一个封面块
然后添加媒体。打开列表视图,然后单击三个垂直点以删除段落,因为我们不会使用此段落。然后,选择照片并使用侧边栏设置,然后将焦点采摘器更改为面部中间,以确保图像中最重要的部分始终显示,尤其是在移动设备上。最后,将不透明度更改为零,以便我们有一个清晰的图像。现在,我们将再重复此步骤四次。

确保选择行块,添加封面块,添加介质,删除段落,更改焦点拾取器并将不透明度设置为零。最后,第五个盖子块。添加了所有图像后,您要删除图像支柱之间的间距。为此,请在列表视图中选择“行块”,然后将侧边栏设置中的块间距更改为零。

最后,我们将调整每个盖子块的高度,以创建金字塔效果。您可以使用像素尺寸来玩耍,但让我们制作第一个封面块100像素的最小高度。选择盖子块,然后将盖子的最小高度更改为100。现在,我们将每个盖子的最小高度增加50像素,从小到大。因此,第二个盖帽将为150,然后是200、250和300。

现在,我们可以继续在其他选项卡中预览它,然后在移动视图中进行预览。请注意,我已经离开侧边栏设置允许将多行包裹起来,以确保图像不会在移动设备上堆叠。

您甚至可以选择通过选择图像,更改覆盖颜色并更改不透明度来更改每个封面块的覆盖层以创建不同的视觉效果。单击几下,您可以实现这一目标,仅此而已。

快乐创造!

研讨会的详细信息


主持人

韦斯·塞隆
@west7

我是由Automattic赞助的WordPress开源项目的教学设计师。我是开源运动的坚定支持者。我有教育和内容发展的背景。我是丈夫,父亲,梦想家和终身学习者。