Elementorで制作をしていて、こんな経験はありませんか？
「背景画像を設定したコンテナ（セクション）を選択したいのに、上のテキストが邪魔でクリックできない…」「マイナスマージンで重ねた画像の、下にあるボタンがどうしても押せない…」
画面上の見た目だけで操作しようとすると、こうした選択できない問題によく直面します。
そんな時に使うのが、Elementorの地図とも言える機能、ナビゲーター（Navigator）です。 これを開いているかどうかで、制作スピードと正確さが段違いに変わります。
ナビゲーターとは？
ナビゲーターは、ページ内のすべての要素をツリー構造のリストで表示するパネルです。 PhotoshopやIllustratorでいうところのレイヤーパネルのようなものです。
⚫︎ 開き方：
方法１（アイコンから）：編集画面の左下、設定（歯車）アイコンの右側にある紙が重なったようなアイコンをクリック。
方法２（ショートカット）：Ctrl + I (Macは Cmd + I)
方法３（右クリック）：編集画面のどこでも良いので右クリックし、「ナビゲーター」を選択。
画面の右側、または独立したウィンドウに、ズラッと見出し、画像といったリストが表示されます。
ナビゲーターを使う3つのメリット
① 隠れた要素を確実に選択できる
これが最大のメリットです。 画面上でクリックしにくい要素でも、ナビゲーター上のリストから名前をクリックすれば、確実にその要素を選択状態にできます。 もう微妙にマウスをずらしてクリックするような苦労は必要ありません。
② ドラッグ＆ドロップで移動が正確に
画面上でウィジェットを掴んで移動させようとすると、意図しないところに入ってしまったり、変な隙間ができたりすることがあります。 ナビゲーター上でドラッグ＆ドロップすれば、どのコンテナの中に、どの順番で入れるかを正確にコントロールできます。
③ 右クリックメニューが使える
ナビゲーター上の項目を右クリックすると、コピー、貼り付け、スタイルの貼り付け、削除などいつものメニューが使えます。 画面上で右クリックしづらい細かいパーツや、順番に多くの項目にスタイルペーストする時なども、ここで操作すればミスがありません。
表示 / 非表示の切り替え（目のアイコンです）
一時的に特定のパーツを隠して、下のレイアウトを確認したい時は、ナビゲーター内の各項目の右端にある目のアイコンをクリックします。
これで、削除することなく一時的に非表示にできます。
（※あくまで編集画面上での非表示です。実際のサイトには表示されるので注意してください）
まとめ
Elementorに慣れている人は、常にナビゲーターを開きっぱなしで作業していることが多いのではないでしょうか。筆者は編集中の画面の右端に常に表示しています。
1. ショートカット（Ctrl/Cmd + I）でナビゲーターを開く
2. クリックできない時はリストから選択する
このクセをつけるだけで、制作の進捗も一目でわかり、ウィジェットが選択できずイライラ… が減り、制作効率がアップします。
まだの方はぜひ次の制作から取り入れてみてください！
