从我记事起，我就一直痴迷于互联网上的艺术指导。该术语通常用于描述围绕内容本身设计单个页面的行为。这与大多数用户通常在撰写帖子时的操作方式相反。模板或设计与文字脱节。
Jason Santa Maria 网站可能是此类帖子被引用最多的印象。我强烈建议四处逛逛，尤其是查看糖果图表文章。
有时故事需要更多的视觉强调。内容旨在描绘单靠文字无法描绘的画面。有时这些是精心设计的整页布局。在其他情况下，是插入的图像和其他元素吸引了读者的注意力。
这是我最近喜欢使用 Automattic 的 Archeo 主题的原因之一。它的形式唤起了早期的、互联网出现之前的家庭阅读杂志的记忆，每本杂志都有自己的故事。
多年来，我尝试为每个帖子设计开发多个系统，但它们总是达不到我想要的。部分问题是我没有一个坚实的未来发展框架，我将无法在十年或更长时间内修复它。
当 WordPress 推出其块编辑器时，这些旧想法开始重新浮出水面。它是否允许人们直观地讲述他们的故事并提供一些保证布局不会在以后的几个版本中中断？
今天，我相信 WordPress 比以往任何时候都更有可能。有些事情它可以做得更好，比如扩展其共享的 CSS 工具包并将其设计控件扩展到更多块。但是，块编辑器的核心是一种设计语言，允许最终用户通过视觉和文本元素讲述他们的故事。这只会在 6.0 及更高版本中变得更好。
我想简要介绍一下用户如何利用这些工具来创建视觉效果更独特的故事。 Building with blocks 系列中的这个条目旨在提供一个起点。
对于关注者，我们将为一个关于哥谭市的虚构故事构建一个帖子标题/简介部分：
这不是一个完整的页面设计，但我希望它能帮助人们开始更多地尝试他们的内容。 WordPress 现在有大量可靠的设计工具可用。
我实际上为本教程拼凑了两种不同的模式。不过我不太适应原方法使用的方法：
特别是，让内容左对齐并位于最大宽度容器内时会出现问题。至少有两种方法可以修复它。最常见的方法是插入一个 50/50 的列块，使用第一列作为内容并将第二列留空。这具有最大的跨主题兼容性，但在某些屏幕尺寸上可能会造成混淆。
二是依靠Cover块的定位控制，将一个内部Group块左对齐。这是纯响应式布局的最佳选择。但是，在针对多个块主题进行测试时，其输出不一致。
最后，我把第一个布局放在一边。但是，我想至少与那些想尝试一下的人分享。
构建帖子标题英雄
对于此模式，我使用的是 Gutenberg 插件的 12.9 版。我试图坚持使用 WordPress 5.9 用户可用的功能，但旧界面感觉比最近更新的插件更慢、更笨重。
我还使用自定义块主题。任何应该工作，但它应该有一个“空白”模板或等效的全角，开放式画布选项。如果没有，您可以从内置模板编辑器启动它。它只需要其中的 Post Content 块。
第一步：创建背景
添加带有背景图像和渐变叠加的封面块。
在创建许多布局时，封面块是我的首选。它是 WordPress 中最通用的选项之一，为多种类型的设计铺平了道路。我从这里开始并不奇怪。
第一步是插入一个新的封面块并为其选择一个图像。然后，将其设置为全宽并打开全高选项。
根据所选图像，您可以自定义叠加选项以匹配它。我选择了 70% 不透明度的 Vibrant Teal 到 Vivid Purple 渐变。我想要足够的背景图像来窥视它，但又不想让它压倒一切。
第二步：间隔符和基团
在两个 Spacer 块之间添加一个组。
此时，我们还在构建内容的整体布局。在步骤 1 的封面内，添加一个 Spacer、Group 和另一个 Spacer。
将每个 Spacer 设置为 2rem 或您的首选值。这只是为了在图案的顶部和底部显示更多背景图像。或者，您可以调整外部 Cover 块上的填充选项以达到相同的效果。
对于组块，我只更改了边框设置。我选择 3px 作为宽度，将样式设置为纯色，并选择白色作为颜色。
注意：以后不再需要这一步中的Group块。理想情况下，我们可以从第 3 步开始插入封面。但是，它还不支持自定义边框。有一张用于添加该功能的公开票。目前尚不清楚 WordPress 是否会在即将发布的 6.0 版本中为 Covers 提供此功能。现在，我们必须添加一个额外的包装器。
第三步：内封
在封面内的组内添加封面。
从第 2 步开始，在组内添加一个新的 Cover 块。将其设置为全宽并启用全高。然后，选择您喜欢的背景颜色并调整不透明度以适合您的设计。该层必须足够暗以使您的文本可读。您可以选择稍后修改它，具体取决于一切的外观。
对于那些使用最新版本的古腾堡进行测试的人，请参阅下一步末尾的注释。
第四步：内容分组
另一个容器层。
我保证这是使该模式起作用的最后一层嵌套容器。对于这一步，在第 2 步的 Cover 中插入一个新的 Group 块。
唯一需要的设置是在块侧边栏面板中打开“继承默认布局”选项。我将 Block Spacing 设置调整为 4rem，为内容提供充足的呼吸空间，但这可能因主题而异。您还应该为文本和链接颜色选项选择白色或其他浅色。
注意：这又是 WordPress 5.9 几乎没有提供我们需要的工具来减少一些混乱。透明背景需要步骤 3 中的封面块。然而，WordPress 6.0 允许用户调整任何颜色的不透明度。对于那些使用 Gutenberg 插件进行测试的人，您可以在此步骤中简单地使用一个组块并在其上放置一个透明背景。
第五步：引人入胜的标题
变大或带着帖子标题回家。
现在，我们进入有趣的部分 - 实际内容。请记住，使用 WordPress 6.0，您可以将之前的步骤减半。
为了在标题和它的容器之间留出额外的空间，我从第 3 步的 Group 块中插入了一个高度为 2rem 的 Spacer 块。之后，我添加了帖子标题块并将其设置为全宽结盟。请记住，我们为这篇文章使用的是“空白”模板，因此我们需要在某处添加标题。
这就是事情变得危险的地方，所以我几乎完全选择不分享这个特定的教程。 WordPress 中的字体大小取决于您的活动主题。核心平台没有对它们及其相关联的行高进行响应处理，并且每个主题都可能与其提供的选择有很大差异。
如果帖子标题栏的主题提供了它，最好的办法是选择相当大的字体。全面的设计将采用一系列选项并处理它们以适应较小的屏幕。如果不可用，您将需要添加自定义字体大小和行高。我设置中使用的值分别是6rem和1。
然后，根据可用选项，为外观或重量选项选择黑色选项。
第六步：添加图片
将全宽图像添加到帖子中。
此步骤有两个选项：发布特色图片或图片块。前者在 WordPress 5.9 中没有那么多设置。也有可能您的活动主题使一些自定义样式可供一个人使用，但对另一个人不可用。
我选择图像块主要是因为我想为照片添加标题。然后我将它设置为全角对齐，并选择我的主题可用的“边框”样式以将它与背景分开一点。
第七步：总结一下
添加段落和间隔块。
从现在开始，尽情享受吧。我为我的虚构故事添加了一个 lede 和另一个 Spacer 块，但您可以修改其他选项，例如显示文章作者和日期。
感觉就像是把很多工作放在一起。然而，WordPress 6.0 应该会让事情变得更简单。
类别：积木搭建
来源
