ElementorのNavigator(ナビゲーター)でサイトの構造一目瞭然

Elementor – Navigatorでサイトの構造が一発でわかる

Elementorでサイトを作っていると、かなり長いページになる時がありますよね。
LPなんて作ってたら尚更です。

この記事ではそんな悩みを解決するElementorのNavigator(ナビゲーター)と言う機能の使い方を説明します。
Navigatorを使うとサイトの構造が一目でわかります。

前回までのElementorの使い方シリーズの記事はここから全部見ることができます。

Navigatorの表示のさせ方

ElementorのNavigatorのアイコン

ページの左下にあるこのアイコンを押します。

ElementorのNavigator(ナビゲーター)

するとこのように『Navigator』と書いてあるボックスが表示されると思います。

Navigatorを固定する

ElementorのNavigator(ナビゲーター)をみぎに持ってくる

Navigatorはサイトの構造を表す

ElementorのNavigatorがサイトの構造を表す

このようにNavigatorはページ内の全ての要素をレイヤーを使って表します。

ダブルクリックで要素の名前を変える

上の画像でHeroとかContent Columnなど書いていますが、このようにセクションやカラムをユーザーが自ら名前を付けれるんです。
こうすれば更に見やすくなります。

Elementorのウィジェットのタイトルを変換

変えたい要素のタイトルの所でダブルクリックします。
すると上の画像のようにタイトルが編集できるようになります。

Elementorのウィジェットのタイトルを変換しました

このように変換できます。

Navigator内でドラッグ&ドロップで全てのものを移動可能

このようにNavigator内から、ページの要素移動させることが可能です。

右クリックメニューで複製やコピペや削除も可能

このように簡単にできてしまいます。

ElementorのNavigator(ナビゲーター)のメニュー

スタイル貼り付けは、スタイルのみのコピペ

コピーした後に貼り付けを押すと動画のようにそのElementorの要素を複製して貼り付けます。
ですがスタイル貼り付けを選択すると、そのスタイルのみを貼り付けることができるんです。
つまり、太字にしたテキストのテキストウィジェットをコピーして、別なテキストウィジェットの上でスタイルを貼り付けると、それが太字になります。

『グローバルとして保存』はElementor Proの機能なので、Elementor Proの使い方シリーズで紹介します。

特定の要素を一時的に隠せる

このように今必要のないものは隠すことができます。
例えば、沢山セクションがページにあってそのうちの数個に集中したいとすると、一々スクロールしないといけないのでめんどくさいですよね。
それを解消してくれる機能です。


Navigatorはページが大きくなってくると、本当に役に立つツールです。
是非使ってみてください。

Elementorの使い方シリーズの他の記事もどうぞ。

コメントする

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

Scroll to Top