Diviのレイヤーズビューでモジュールが重なっても選択できる

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

こんにちはナオミです。

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

Diviのモジュールが重なってしまう。
モジュールが重なって下のモジュールが選択しづらい

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

Diviのレイヤーズビュー(Layers view)を起動

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

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

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

Diviのレイヤーズビュー(Layers View)ナビゲーション

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

Diviのレイヤーズビュー(Layers View)でモジュールを選択

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

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

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

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

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

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

Diviのレイヤーズビュー(Layers View)のアイコン

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

モジュールからレイヤーズビューを表示

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

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

まとめ

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

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

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

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

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

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

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

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

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


Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

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

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通