有料版 Lightning のヘッダーが凄い件

前回、「無料版 Lightning ヘッダーメニューのカスタマイズ 」でヘッダーのグローバルメニューをカスタマイズする記事を書きましたが、今回は有料版プラグイン「Lightning G3 Pro Unit」使った場合の解説です。

無料版 と有料版の違い

Lightning は有料プラグイン「Lightning G3 Pro Unit」を導入することで様々な機能が追加されます。また、すべての項目は任意で有効(ON)／無効(OFF)の切り替えが可能です。

デフォルトでは、ほぼ全ての機能が有効（ON）になっていますが表示が重いということはありませんでした？

今なら、有料版プラグイン「VK BLocks Pro」も付属しています（2022/09/21現在）

プラグイン「Lightning G3 Pro Unit」で追加されるヘッダー周辺

ヘッダーのグローバルナビ周辺について解説します。

カスタマイズ ⇒ Lightning ヘッダー設定 をクリックします

圧倒的なカスタマイズ性

ヘッダーレイアウトは７パターン

これらのパターンに加え装飾機能も豊富でカラーやグラデーションを編集することが出来ます。

更にスクロール時のレイアウト、ヘッダーカラーの透過設定やグラデーションも指定できるのでその組み合わせは膨大なものになります。

ヘッダーレイアウトの設定

❶ナビゲーション回り込み

ロゴとナビメニューが水平に並ぶレイアウトです

❷ナビゲーション回り込み＆縦書き（β）

ロゴとナビメニューが水平に並び、ナビメニューが縦書きのレイアウトです。和風サイト向きかもしれません。

❸中央揃え

ロゴとナビメニューが２段のレイアウトです。

❹中央揃え＆ナビ縦書き（β）

ロゴとナビメニューの２段レイアウトですがメニューは縦書きです。

❺タイトル中央＆ナビ貫通

ロゴとナビメニューが２段のレイアウトです。ナビメニューには区切りが入り背景色やラインが入れられます。

❻ヘッダーコンタクトあり＆ナビ貫通

ロゴとコンタクトとナビメニューの２段レイアウトで、ロゴは左寄せになります。ナビメニューには区切りが入り背景色やラインが入れられます。

❼ヘッダーウィジェットあり＆ナビ貫通

ロゴとナビメニューの２段のレイアウトで、ロゴは左寄せになります。
ナビメニューには区切りが入り背景色やラインが入れられます。

グローバルナビ スクロール時のレイアウト

❶固定しない

スクロール時にはメニューは表示されません。

❷固定ナビ中央揃え

ロゴは非表示でメニューが中央揃えになります。

❸固定ナビコンテナ幅

ロゴは非表示でメニューはコンテナ幅に表示されます。

❹固定ロゴ＆ナビ回り込み

ロゴとメニューが、コンテナ幅に表示されます。

❺固定ロゴ＆ナビ回り込み全幅

ロゴとメニューが、全幅に表示されます。

スクロール時のロゴとモバイルでのロゴの位置を指定できます

ヘッダーカラーの設定

ナビ貫通（❹❺❻）では、ナビの背景色やラインも個別に指定可能になります。

ヘッダーカラーの透過設定

透過設定のグラデーションモード

以下の設定でグラデーションがかけられます。

グラデーションの有無にかかわらずですが透過設定の場合、透過時のヘッダーロゴ画像を個別に指定した方が良いように思います。

ヘッダー背景色の境が消えて自然な感じになりました。

まとめ

「Lightning」は企業や店舗のホームページとして人気のテーマですが、有料版プラグインを導入する事によってデザインの自由度は飛躍的にアップします！

本来なら、複雑なCSSやPHPのカスタマイズが必要な場合でもノーコードで編集ができ、制作時間の短縮に繋がります！

ある意味で　Lightning＋G3ProUnit は、WordPressの万能型テーマだと思います。

今回はヘッダー周りイメージ確認のため　Lightning × ExUnit　デモサイトデータを使って作成しました。

Lightning G3 デモサイトデータ | Lightning (vektor-inc.co.jp)

備忘録でした