Diviの重なったモジュールを選択出来るレイヤーズビュー(Layers View)【効率UP】

こんにちはナオミです。

皆さんはDiviビジュアルビルダーでページをデザインしていると、モジュール同士が重なってどのモジュールをクリックしているのか分からなかったり、もう一方をクリックしたくてもできなくてヤキモキしたことないですか？

そんな時に、非常に便利な機能がDiviにあるんです！

皆さん、このDiviの見慣れない機能なんだか分かりますか？
これはDiviのページ編集で非常に便利な機能『レイヤーズビュー』です。

これがあれば、最初に記載した悩みやビジュアルビルダーでの編集がさらに便利になります！
今回はこの機能レイヤーズビューについて詳しく解説していきます。

レイヤーズビューの解説と使用用途

レイヤーズビューの中にそれぞれ『セクション』が記載されています。
ワイヤーフレームだとわかりやすいのですが、それぞれのセクションのタイトルとリンクしています。
それぞれセクションタイトルをクリックすることで、そのセクションまで自動で行くことができるんです！

そして、そのセクションを細分化した『行』・『列』・『テキスト』モジュールなどを表示することも可能なんです。
細分化したモジュールにカーソルを合わせるとそのモジュール部分がハイライトされます。
さらに、それぞれの設定ボタンをクリックするとテキストなどを編集することもできるんです。

では、このレイヤーズビューは一体どういったときに使用するのか分かりますか？

そういった時は、通常だとワイヤーフレームモードに移動してモジュールを選択するのが一般的だと思います。
ただ、ワイヤーフレームモードの場合編集しても編集後のページデザインがすぐに分からないので不便でした。
さらに、ワイヤーフレームの欠点として作成するページが長くなりモジュールが増えれば触れるほど、フレームでしか認識できないのでどこに何があるかが分かりづらいことがありました。

そういったときにこのレイヤーズビューを使用すれば、ビジュアルエディター画面のままで任意のセクションの選択がしやすくなります。
さらに、その場で編集することができるんです！
もう、これがあればどんなデザインにしてもモジュールを選択できない！？何てことはなくなります。

さらに、このレイヤーズビューの便利なところはそのセクションごとの移動も可能なところ。
例えば『お問い合わせ』セクションがページ最下部にあったとしても、レイヤーズビュー内で移動させれば、あっという間に上まで簡単に移動できます。

「レイヤーズビュー」使用方法

レイヤーズビューの表示の仕方は、ビジュアルビルダー編集画面の右下にある3つのアイコンの内真ん中のアイコンをクリック。

さらに、上記画像の様に各モジュールを右クリックしたときに出てくる『Go to Layers』からも表示させれます。

そして、画像の様に各モジュールから右クリックでレイヤーズビューを表示させた場合、レイヤーズビュー画面にそのモジュールが選択された状態からスタートできます。

まとめ

Diviでページを作成しているときに、ちょっと不便だなと感じていた細かい部分をレイヤーズビューはしっかり補てくれてます。
任意のセクションに自動で移動出来たり、重なってクリックしづらいモジュールをその場で選択できるようになると、制作が本当に便利になりますよね！
直感的にページ作成ができるDiviならなおさらです。

こういった細かい改善ができるのも『世界で一番使われてるWordPressテーマ』であるDiviらしいところですね。

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。

コードを書かないウェブ制作を目指すコミュニティ『TOFUラボ』

Diviの最新情報を知りたいなら、ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか？
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。

最新情報だけではなく技術的な質問も飛び交っています。

また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。

『TOFUラボ』の紹介はこちらです

興味があれば、是非参加してくださいね。
入会してから７日間は無料で合わないなと思えばいつでもキャンセル可能です。