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