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

このパターンではプラグイン「VK Blocks Pro (有料)」と、独自にカスタマイズしたCSSを使用しています。

設定のコツ
  • ヒーローエリアはスライダーを全幅にし [アイテムの複数表示設定] を設定しています
  • 「確かな技術」の円はグループを重ね角丸を不規則にすることで塗りと線のずらしを表示しています
    一番内側にあるグループのパディング上下左右を調節しながら、縦横比が 1:1 になるようにするとよいです
  • 「撮影ジャンル」のスライダーは全幅にし [アイテムの複数表示設定] を設定しています
    さらにカスタムCSSで以下を調整しています
    • [アイテムの複数表示設定] を設定し動きがなめらかになるように
    • 画像をマウスオーバーしたときズーム拡大
  • 「選べるプラン」「撮影のながれ」カバーブロックの背景画像にデュオトーンを適用することで、セピア調に表示されます
  • 「撮影のながれ」PCでは右矢印、モバイルでは下矢印が表示されるようにアイコンブロックを[表示 / 非表示] で切り替えています
  • 全体で見出しの下にある 区切り線に、[高度な設定] – [追加Cssクラス] より .vkp_line を付与しています
    最下部にある カスタムHTML ブロックのなかで、.vkp_line のスタイルを定義しています
    出現箇所が多いためこの方法にしました
関連するパターン

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