特定の固定ページや投稿にフローティングバナーをノーコードで超簡単に設置するやり方を紹介します。
例えば、この例↓ではイベント案内ページに予約フォームに誘導するバナーを置いています。
オープンハウス開催のご案内
画面をスクロールしていくと、この横長のバナー↑が画面上部に固定されます。
フローティングバナーの作り方
手順① バナー画像をグループブロックに入れる
見出しとバナー画像をグループブロックに入れます。
このサイトではスクロール時にサイトヘッダーを表示しているため、バナー画像の位置を下げるために見出しをグループブロックに入れていますが、サイトヘッダーを表示しない場合はバナー画像だけをグループブロックに入れて上パディングで位置を調整すればいいです。
手順② グループブロックの位置を設定
グループブロックの 位置 を 張り付き に変更します。
手順はたったこれだけ、とてもかんたんですね。
その他 特記事項
バナー画像を PC とスマホで兼用するために横長のものを使いましたが、非表示設定で出し分ければそれぞれに適したものにできそうです。
このサイトで使用している X-T9 だとグループブロックの位置を設定できますが、残念ながら、私が最も頻繁に使っている大好きな Lightning にはこの設定がありません。おそらく、これができるのはブロックテーマだけなのだと思います。