常識を覆す全く新しいカラムブロック
カラムブロック でもあり カードブロックでもある
Grid Column Card ブロックは、名前の通りカラムブロックですが、カードブロックにもなります。
このブロックは VK Blocks Pro に中に入っている「グリッドカラムブロック」「カードブロック」「アイコンカードブロック」「PR ブロック」「PR Contentブロック」の後継ブロックにあたり、あらゆる表示幅で幅広い表現を美しくレイアウトする事が可能になります。
既存の標準ブロックで出来ない事
WordPress標準カラムブロックなどを使ってカードタイプの要素を3列作成すると以下のようになります。
WordPress標準ブロックを使ったレイアウト例
カラムの見出し
これはWordPress標準ブロックでの組み合わせによるレイアウトです。これはWordPress標準ブロックでの組み合わせによるレイアウトです。
カラムの見出し
これはWordPress標準ブロックでの組み合わせによるレイアウトです。
これはWordPress標準ブロックでの組み合わせによるレイアウトです。
カラムの見出し
これはWordPress標準ブロックでの組み合わせによるレイアウトです。
ボタンが揃わない
WordPress標準カラムブロックの場合、カラムの中に画像とボタンを配置して、各カラム内にボタンをもたせたい場合、内容量によってボタンの位置が揃わずガタガタしてしまいます。
VK Blocks Pro のカードブロックはボタンの位置を揃える事はできますが、ボタンごとに文字を変更・指定する事はできませんでした。
画像がカラムに吸着できない
カラム内に余白を指定すると画像もその余白内にしか配置できません。
モバイルでのレイアウトが微妙
画面サイズを狭くして見てください。各カラムはかなり小さい幅まで潰されてしまい、また、下の段に落ちたカラムは上のカラムにひっついてしまいます。
Grid Column Card ブロックで対応した事
以下が Grid Column Card ブロックを使った場合の例です。WordPress標準ブロックでの問題点が解消し、あらゆる画面サイズでよりきれいにレイアウトされる事が確認できると思います。
Grid Column Card ブロックを使ったレイアウト例
画像リンク無し
カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。
カードテキストカードテキストカードテキストカードテキストカードテキスト。
画像リンクあり
カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。
カードテキストカードテキストカードテキストカードテキストカードテキスト。
カラムの見出し
カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。
その他の特徴・機能
Grid Column Card ブロックで出来るレイアウト例
カラムの見出し
カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。
カラムの見出し
カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。
カラムの見出し
カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。
カラムの見出し
カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。
カラムの見出し
カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。
カラムの見出し
カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。
カラムの見出し
カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。
カラムの見出し
カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。
カラムの見出し
カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。
スタイル（デフォルト）
このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。
スタイル（直線）
このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。
スタイル（直線 角丸）
このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。
スタイル（点線）
このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。
スタイル（ Dashed ）
このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。
スタイル（ 二重線 ）
このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。
スタイル（ スティッチ ）
このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。
スタイル（ 直線 上下 ）
このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。
スタイル（シャドウ ）
このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。
スタイル（Info）
このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。
スタイル（Success）
このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。
スタイル（Warning）
このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。
スタイル（Danger）
このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。
