ページヘッダーのデザインをページごとに個別に切り替えるカスタマイズ例

このサイト (Lightning G3 無料版) で、ページごとにページヘッダーのデザインを切り替えることができるようにカスタマイズしました。

固定ページだけではなく、標準の投稿でもデザインを切り替えることができるようになっています。

デザインの選択画面

ブロックエディター画面に以下の選択肢が表示されて、使いたいデザインを選べるようにしてあります。

例えば、お問い合わせのページ はこの選択肢によってページヘッダーのデザインが以下のように切り替わります。

1. デフォルト背景画像

アイキャッチ画像がいつもページヘッダーに適しているとは限りません。画像によってはよくない見た目になってしまうことがありますよね。

そんなときのためにこの選択肢を用意してあります。

補足
デフォルト背景画像は Lighting 無料版のデフォルトのことではなく、それぞれのサイトでカスタマイズした状態のデフォルトのことです。Lighting 無料版のデフォルトに最も近いのは、最後の「ページヘッダー背景画像を使わない」です。

2. アイキャッチ画像 (オフセット)

メインビジュアルで注意を惹きたい場合はこちら。
この画像 ↓ だと伝わりづらいのですが、左端は全幅、右端はコンテナ幅に揃えてあるオフセットレイアウトで、タイトルをページヘッダーの左下に配置してあります。実物のお問い合わせページでご確認ください。

3. アイキャッチ画像 (テキスト白枠)

このデザインであれば、いろいろなアイキャッチ画像で使いやすいと思います。

4. アイキャッチ画像 (テキスト白文字)

テキストを白文字にして、背景に黒を被せたデザインです。

テキスト部分をぼかしたデザインにしました 2024.5.26

テキスト部分を以下のようなすりガラス風のデザインにしてみました。

5. ページヘッダー背景画像を使わない

約款とかプライバシーポリシーとか、地味なヘッダーが適しているページの場合はこちらがおすすめです。