Divi – スクロールしても付いてくる、スティッキーなエレメントを作る方法【好きな位置に固定出来る!】

Diviでスティッキーエレメントを作る

スクロールしても画面に固定され付いてくるヘッダーやメニュー、実はDiviで簡単に作れるんです。
モジュールや行やセクション全てで同じことができます。
しかもCSSは一切書きません。

動画はこちらです。

この記事を読み終わる頃には、あなたも自由にどんなエレメントでもスティッキーに出来るでしょう。

スティッキーにする方法

スティッキーヘッダー
青い部分がセクション

例えば、スティッキーヘッダーやフッターを作りたかったらセクション全体をスティッキーにするのがベストです。

セクションの設定 → 詳細 → 位置

Diviのセクションの設定

ここで設定します。
『初期設定』と書いてある部分をクリックします。

Fixedを選ぶ

位置のオプションからFixedを選ぶ
位置のオプションからFixedを選ぶ

このようにFixedを選びます。
これで保存するだけでこのセクションはスティッキーになります。
試してみましょう。

セクションを使いましたが、モジュールでも行でもできます

固定する位置を変える

スティッキーヘッダーの位置を真ん中に持ってくる

固定したエレメントの位置を変えることができます。
Locationと書いてある部分に、9つの四角いボックスがあり、どれかクリックしてみましょう。
上の画像は真ん中をクリックした場合です。
セクションの位置が真ん中にきていますね。

Vertical OffsetとHorizontal Offsetで自由に位置を変える

画像モジュールを自由に移動させる
画像モジュールの位置を自由に変えている

このように、Vertical OffsetとHorizontal Offsetを使うことによって、更に自由に位置を変えることができます。

ドラッグ&ドロップで位置を変える

画像をドラッグ&ドロップで位置を移動

このように移動させたいエレメントの上にいくと、右上にハンドルが出てきてそこを掴むことにより自由にドラッグ&ドロップで移動させることが出来るんです。
これは自動でVertical OffsetとHorizontal Offsetと変換してくれます。

Zインデックスでどちらが上にくるか決める

Zインデックスでどのエレメントが上に来るのか決定する
Zインデックスを動かすことによって、画像を上に持ってくる

自由に移動させると二つ以上のエレメント(モジュール、セクションや行)が重なってしまうこともありますね。
どうしたら特定のエレメントを上に持ってこれるのか?
これを解決してくれるのがZインデックスです。
上の画像のように、Zインデックスの値が大きいものが上にきます

是非試してみましょう!

Diviで出来ることをもっと知りたい方は、Diviの全てをまとめたページDivi完全マニュアルをチェックしてみてください!

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Scroll to Top