去年，我設計了幾種在網站上展示優惠券代碼的模式。 它們是我從未完成的更大主題項目的一部分。 然而，我在玩各種變化時玩得很開心。 不喜歡它們在我筆記本電腦的硬碟上消失，我想我會與 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）來創建以下內容：
那是混合中的媒體和文本塊。 在沒有完整演練的情況下，我將給您帶來重新創建這種變化的挑戰。 如果你卡住了，看看我的 上一個教程，其中廣泛涵蓋了媒體和文本。
類別： 用積木建造