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