如何使用 WordPress 块构建优惠券卡

去年,我设计了几种在网站上展示优惠券代码的模式。 它们是我从未完成的更大主题项目的一部分。 然而,我在玩各种变化时玩得很开心。 不喜欢它们在我笔记本电脑的硬盘上消失,我想我会与 Tavern 的观众分享它们。

基本优惠券如下所示:

how-to-build-coupon-cards-with-wordpress-blocks 如何使用 WordPress 块构建优惠券卡

当我设计它和其他的时候,我的脑海里浮现了圣诞节(如果从截图中看不出来的话)。 当然,我总是想着假期,通常每年至少在七月之前开始购物。

除了图片,我故意让大部分设计通用,以便轻松应用于其他假期和活动。

本教程在 用积木建造 系列将引导您完成从编辑器创建自定义优惠券的每个步骤。 最后,我还将分享一些关于变化的想法。

第 1 步:添加组块
how-to-build-coupon-cards-with-wordpress-blocks-1 如何使用 WordPress 块构建优惠券卡添加具有自定义背景和边框的组块。

与大多数模式一样,您应该从容器类型的块开始。 对于优惠券卡,首先插入一个组。 您可以随意个性化它。 但是,要在教程中使用相同的布局,您至少应该将块的填充设置为 0px 并将块间距选项设置为 0px。 这些需要清零才能使设计的其余部分正常工作。

我将我的组块调整为浅灰色背景色。 然后,我添加了一个 4px 虚线边框和一个 8px 边框半径。 这些设计工具中的每一个都可以在侧边栏面板的块检查器中使用。 在找到自己喜欢的东西之前,尽情享受颜色和其他设置的乐趣。

第 2 步:添加图像
how-to-build-coupon-cards-with-wordpress-blocks-2 如何使用 WordPress 块构建优惠券卡将图像块插入组中。

这一步很简单。 从步骤#1 在组内插入一个图像块。 不需要特殊设置。

当然,您应该通过工具栏中的插入链接按钮将其链接到某些东西。 您可能正在销售一种产品并希望人们点击它。

第 3 步:添加内容组
how-to-build-coupon-cards-with-wordpress-blocks-3 如何使用 WordPress 块构建优惠券卡添加嵌套组块。

这应该是另一个简单的步骤。 在步骤 #2 的图像块下方,添加一个新组。 这将包含您将在第 4 步中添加的“内容”。

此块最关键的设置是通过侧边栏面板中的块设计工具添加填充。 我选择了 2rem 来匹配我的主题。 请记住,您在步骤#1 中将外部组中的填充清零。 现在,您需要添加一些内容以防止内容与容器的侧面对接。

第 4 步:添加内容
how-to-build-coupon-cards-with-wordpress-blocks-4 如何使用 WordPress 块构建优惠券卡添加销售宣传。

从第 3 步开始,组块就位后,您就有了一个新的自由形式区域,可以向潜在客户进行推销。 这可以像标题后跟段落一样简单,也可以更复杂。 最好保持简短和准确。

第 5 步:优惠券代码行
how-to-build-coupon-cards-with-wordpress-blocks-5 如何使用 WordPress 块构建优惠券卡为优惠券代码部分插入一个行块。

要突出显示优惠券代码,请在步骤 #3 中添加的 Group 块下方添加一个新的 Row 块。 这允许您在下一步中添加代码和到期日期部分。

为对齐控件选择“项目之间的空间”选项。 此设置将每个嵌套块推离另一个。

然后,选择自定义背景颜色。 这应该会自动为 Row 块提供填充。 如果您选择不设置颜色,则应手动设置填充以匹配其上方的组块。

第 6 步:添加代码和过期时间
how-to-build-coupon-cards-with-wordpress-blocks-6 如何使用 WordPress 块构建优惠券卡自定义优惠券代码和到期日期。

最后一步是将两个段落块添加到行容器中。 第一个应该是“Coupon: XMAS2022”,第二个应该是“Expires: December 31”。

当然,这是您的卡片,因此请尽情享受定制它的乐趣。

变化

WordPress 块编辑器的美妙之处在于,用户可以通过多种方式修改上述一组块的输出。 像改变颜色这样简单的事情可以给你一个完全不同的外观。 而且,通过重新排列一两个街区,您可以制作出自己独特的东西。

自定义上述优惠券代码的最简单方法之一是输入一些表情符号,如以下屏幕截图所示:

how-to-build-coupon-cards-with-wordpress-blocks-7 如何使用 WordPress 块构建优惠券卡表情符号变体。

好的。 我玩得很开心。 更严肃地说,有很多方法可以修改公式并创造新的东西。

我只花了几分钟时间就合并了前面的步骤 #2 和 #4(跳过步骤 #3)来创建以下内容:

how-to-build-coupon-cards-with-wordpress-blocks-8 如何使用 WordPress 块构建优惠券卡媒体和文本变化。

那是混合中的媒体和文本块。 在没有完整演练的情况下,我将给您带来重新创建这种变化的挑战。 如果你卡住了,看看我的 上一个教程,其中广泛涵盖了媒体和文本。

类别: 用积木建造

来源

Total
0
Shares
相关文章