WordPressブロックを使ったクーポンカードの作り方

https://wptavern.com/how-to-build-coupon-cards-with-wordpress-blocks

原題:”How To Build Coupon Cards With WordPress Blocks” on 2022-05-06

昨年、あるサイトでクーポンコードを紹介するために、いくつかのパターンをデザインしました。これは大きなテーマプロジェクトの一部だったのですが、完成には至りませんでした。しかし、そのバリエーションで遊ぶのはとても楽しいものでした。このまま私のノートパソコンのハードディスクに埋もれてしまうのはもったいないので、Tavernの皆さんと共有しようと思います。

WP Tavern

作り方

  1. グループブロックを追加:後で追加する内側のブロックを制御しやすくするため、paddingを0にしておく。
  2. 画像を追加:画像には商品ページなどへのリンクを設定。
  3. コンテンツを記載するグループブロックを追加:画像の下に、次のステップで記載するコンテンツを書き込むブロックを追加する。このブロックはpaddingを適切な値に設定する。
  4. コンテンツを追加する:見出しと段落のような単純なものでも、もっと複雑なものでもよい。短い文章で、ポイントを押さえた内容にするのがベスト。
  5. クーポンコードのカラムを追加:クーポンコードを強調表示するには、手順3で追加したグループブロックの中の最初に、2列のカラムブロックを追加する。これにより、次のステップでコードと有効期限を示すセクションを追加できる。アイテム間のスペースと文字色/背景色を設定。
  6. クーポンコードと使用期限を追加:最後に、2つの段落ブロックをカラムに追加する。最初のカラムは、「クーポンコード.XMAS2022」のようなクーポンコードのもの。2つ目は “使用期限: 12月31日” とする。もちろん、カスタマイズは自由。

バリエーション

  • 文字色を一部変更する。
  • 絵文字を使う。
  • ブロックの配置を変える。
  • 画像とコンテンツの一部を「メディアとテキスト」ブロックにする。