【VK Patterns Library をはじめて利用する方へ】
VK Pattern Library のユーザー登録するには Lightning G3 Pro Pack か Vektor Passport のいずれかのライセンスが有効である必要があります。
VK Pattern Library のユーザー登録は VWS のマイアカウント からのみとなります。
VK Pattern Library の ユーザー登録の流れ はこちらをご覧ください。
このパターンではテーマ「X-T9」「Lightning ( G3 / theme.json )」での使用を想定しています。他のテーマでは崩れる可能性がありますのでご注意ください。
このパターンではプラグイン「VK Blocks Pro (有料)」と、独自にカスタマイズしたCSSを使用しています。
設定のコツ
- ヒーローエリアはスライダーを全幅にし [アイテムの複数表示設定] を設定しています
- 「確かな技術」の円はグループを重ね角丸を不規則にすることで塗りと線のずらしを表示しています
一番内側にあるグループのパディング上下左右を調節しながら、縦横比が 1:1 になるようにするとよいです - 「撮影ジャンル」のスライダーは全幅にし [アイテムの複数表示設定] を設定しています
さらにカスタムCSSで以下を調整しています- [アイテムの複数表示設定] を設定し動きがなめらかになるように
- 画像をマウスオーバーしたときズーム拡大
- 「選べるプラン」「撮影のながれ」カバーブロックの背景画像にデュオトーンを適用することで、セピア調に表示されます
- 「撮影のながれ」PCでは右矢印、モバイルでは下矢印が表示されるようにアイコンブロックを[表示 / 非表示] で切り替えています
- 全体で見出しの下にある 区切り線に、[高度な設定] - [追加Cssクラス] より
.vkp_lineを付与しています
最下部にある カスタムHTML ブロックのなかで、.vkp_lineのスタイルを定義しています
出現箇所が多いためこの方法にしました
