このパターンではテーマ「X-T9」「Lightning ( G3 / theme.json )」での使用を想定しています。他のテーマでは崩れる可能性がありますのでご注意ください。

このパターンではプラグイン「VK Blocks Pro (有料)」を使用しています。

設定のコツ
  • グリッドカラムのレイアウトについて
    • 全体のレイアウトは VK Blocks Pro の「グリッドカラムカード」ブロックを使用しています。最小サイズが設定できますので大変便利です。
    • カラムの幅設定は「%」の単位にして、以下のように設定しています。
      • カラムの最小サイズ(PC / 任意)「20%」
      • カラムの最小サイズ(タブレット / 任意)「40%」
      • カラムの最小サイズ(モバイル)「100%」
  • メニュー名と料金部分について
    • メニュー名と料金は「横並び」ブロックで、【レイアウト】> 【配置】を「項目の間隔」にして左右に並べています。
    • 料金部分は改行させたくないので、段落ちしないように VK Blocks の機能 改行禁止指定の「Nowrap」にしています。
    • 『円(税込)』の部分は文字を小さくしたいので、VK Blocks の機能 「インライン文字サイズ」でテキストの一部を小さく指定しています。
関連するパターン
プレミアム
ブックカフェ_トップページ
表示確認済みテーマ
X-T9Lightning ( G3 / theme.json )Twenty Twenty-Five
使用プロダクト
VK Blocks Pro (有料)カスタムCSS
ライセンス区分
プレミアムパターン
業種
飲食
パターンタイプ
ページ全体
パターンカテゴリー
トップページ・LP
参考画像素材
PxHere
管理ID
20264
カフェ_バナー_ゴールドの枠線
表示確認済みテーマ
X-T9Lightning ( G3 / theme.json )Twenty Twenty-FiveTwenty Twenty-FourTwenty Twenty-Three
使用プロダクト
VK Blocks
ライセンス区分
無料
業種
飲食
パターンタイプ
セクション
パターンカテゴリー
CTA
管理ID
19487
プレミアム
カフェメニュー表_アコーディオン
表示確認済みテーマ
X-T9Lightning ( G3 / theme.json )Twenty Twenty-FiveTwenty Twenty-Four
使用プロダクト
VK Blocks Pro (有料)
ライセンス区分
有料プラグイン使用プレミアムパターン
業種
飲食
パターンタイプ
ページ全体
パターンカテゴリー
料金表
参考画像素材
PxHere
管理ID
18498

ベクトルパスポートがあればすべてのパターンが使えます