去年，我设计了几种在网站上展示优惠券代码的模式。 它们是我从未完成的更大主题项目的一部分。 然而，我在玩各种变化时玩得很开心。 不喜欢它们在我笔记本电脑的硬盘上消失，我想我会与 Tavern 的观众分享它们。
基本优惠券如下所示：
当我设计它和其他的时候，我的脑海里浮现了圣诞节（如果从截图中看不出来的话）。 当然，我总是想着假期，通常每年至少在七月之前开始购物。
除了图片，我故意让大部分设计通用，以便轻松应用于其他假期和活动。
本教程在 用积木建造 系列将引导您完成从编辑器创建自定义优惠券的每个步骤。 最后，我还将分享一些关于变化的想法。
第 1 步：添加组块
与大多数模式一样，您应该从容器类型的块开始。 对于优惠券卡，首先插入一个组。 您可以随意个性化它。 但是，要在教程中使用相同的布局，您至少应该将块的填充设置为 0px 并将块间距选项设置为 0px。 这些需要清零才能使设计的其余部分正常工作。
我将我的组块调整为浅灰色背景色。 然后，我添加了一个 4px 虚线边框和一个 8px 边框半径。 这些设计工具中的每一个都可以在侧边栏面板的块检查器中使用。 在找到自己喜欢的东西之前，尽情享受颜色和其他设置的乐趣。
第 2 步：添加图像
这一步很简单。 从步骤#1 在组内插入一个图像块。 不需要特殊设置。
当然，您应该通过工具栏中的插入链接按钮将其链接到某些东西。 您可能正在销售一种产品并希望人们点击它。
第 3 步：添加内容组
这应该是另一个简单的步骤。 在步骤 #2 的图像块下方，添加一个新组。 这将包含您将在第 4 步中添加的“内容”。
此块最关键的设置是通过侧边栏面板中的块设计工具添加填充。 我选择了 2rem 来匹配我的主题。 请记住，您在步骤#1 中将外部组中的填充清零。 现在，您需要添加一些内容以防止内容与容器的侧面对接。
第 4 步：添加内容
从第 3 步开始，组块就位后，您就有了一个新的自由形式区域，可以向潜在客户进行推销。 这可以像标题后跟段落一样简单，也可以更复杂。 最好保持简短和准确。
第 5 步：优惠券代码行
要突出显示优惠券代码，请在步骤 #3 中添加的 Group 块下方添加一个新的 Row 块。 这允许您在下一步中添加代码和到期日期部分。
为对齐控件选择“项目之间的空间”选项。 此设置将每个嵌套块推离另一个。
然后，选择自定义背景颜色。 这应该会自动为 Row 块提供填充。 如果您选择不设置颜色，则应手动设置填充以匹配其上方的组块。
第 6 步：添加代码和过期时间
最后一步是将两个段落块添加到行容器中。 第一个应该是“Coupon: XMAS2022”，第二个应该是“Expires: December 31”。
当然，这是您的卡片，因此请尽情享受定制它的乐趣。
变化
WordPress 块编辑器的美妙之处在于，用户可以通过多种方式修改上述一组块的输出。 像改变颜色这样简单的事情可以给你一个完全不同的外观。 而且，通过重新排列一两个街区，您可以制作出自己独特的东西。
自定义上述优惠券代码的最简单方法之一是输入一些表情符号，如以下屏幕截图所示：
好的。 我玩得很开心。 更严肃地说，有很多方法可以修改公式并创造新的东西。
我只花了几分钟时间就合并了前面的步骤 #2 和 #4（跳过步骤 #3）来创建以下内容：
那是混合中的媒体和文本块。 在没有完整演练的情况下，我将给您带来重新创建这种变化的挑战。 如果你卡住了，看看我的 上一个教程，其中广泛涵盖了媒体和文本。
类别： 用积木建造