Elementorの「構造」の使い方をマスターして作業効率UP!

はじめに

Elementorの「構造」、使っていますか？

「構造」はサイトの構成を把握するのに役立ちますが、それだけではありません。「構造」を使いこなすと、デザインの試行錯誤や微調整が迅速に行えるので、作業効率もグンと良くなります。下記で機能の詳細と操作方法を紹介します。

「構造」を使用するメリット

視覚的な階層理解とエラー防止

メインキャンバス上の表示と、「構造」の階層を常に対応させることができるので、ページ構成を視覚的に把握できます。複雑なレイアウトであっても、ウィジェット間の関係性を容易に理解できるので、意図しない変更や誤操作を効果的に防ぐことも可能です。

ページ上のウィジェットを効率的に管理・操作できる

ドラッグ＆ドロップ

「構造」内でウィジェットの移動や再配置を視覚的に行うことができるので、ページレイアウトの調整がより直感的に行えます。

右クリックメニュー

右クリックメニューを使用してウィジェットの名前を変更することができます。分かりやすい名前を付けておくと、ページ管理がより効率的になります。また、右クリックメニューからはウィジェットのコピー&ペーストや削除なども簡単に行えるので、スムーズな編集作業が可能です。

下記で具体的な操作方法をみていきましょう。

「構造」の表示方法

「構造」はElementorのTOP Barから表示します。タブはフローティングしたり右側に固定したりできます。

「構造」の固定方法

「構造」を右端にドラッグすると固定されます。

フローティング状態に戻すときは「構造」の文字の近くにカーソルを合わせると十字カーソルが表示されるので、そのまま中央に向かってドラッグしましょう。

大きなページの場合、作業開始時に固定しておくと、ページ構造の確認や要素の操作がより効率的に行えます。

「構造」の主要機能と操作方法

下記に「構造」の主な機能と操作方法を紹介します。

ウィジェットの階層表示

メインキャンバス上の表示と「構造」の階層は対応して表示されます。

パネル幅を広げると、深くネストされたウィジェットも確認しやすくなります。パネル幅は「構造」の左端にカーソルを持っていき、両側矢印が出た状態でドラッグして調整しましょう。

ウィジェットの名前変更

ウィジェットにカスタム名を設定するときは、ダブルクリックして任意の名前に変更します。名前を変更しておくと、どのウィジェットを指しているのかが更にわかりやすくなります。

ドラッグ＆ドロップ機能

「構造」内のウィジェットをドラッグ＆ドロップすると、ウィジェットの移動と再配置ができます。ページ内で並び順を入れ替えたい時などに便利です。

例えば、下記のように画像の配置を変更したいとします。

「構造」内で移動したいウィジェットを掴んでドラッグ＆ドロップします。

メインキャンバスのレイアウトに反映されます。

右クリックメニュー

ウィジェットの上で右クリック（MACはctrlを押しながらクリック）するとメニューが表示され、メニューからウィジェットの複製・コピー・削除などの操作が行えます。

複製、削除機能

複製・削除などをしたいウィジェット上で右クリックをし、メニューが表示されたら操作を選択しましょう。

右クリックメニューでは、ウィジェットの複製やコピー、貼り付け、削除などが可能です。

この機能は複数のウィジェットでも使えます。複数選択するときは、MACの場合は⌘を押しながらクリック、WINの場合はctrlを押しながらクリックします。但し、ウィジェットのみ／コンテナのみ可能で、コンテナとウィジェットを混ぜた複数選択では機能しません。

スタイル貼り付け機能

文字のスタイルのみのコピー&ペーストができます。例えば、見出しのスタイルを変更した際に、別の箇所の見出しのフォントをそろえたい時などに便利です。

見出しのスタイルのみ変更する手順は下記のとおりです。

（手順）
１．基準にする見出しウィジェットの上で右クリック

２．右クリックメニューから「コピー」を選択

３．スタイルを変更したい見出しウィジェットの上で右クリック

４．右クリックメニューから「スタイル貼り付け」を選択

フォントが統一されます。

『グローバルとして保存』はProのみの機能

Pro版を使っている方は、この機能を使うと他のページやサイトでもコピーしたウィジェットを使用できるようになります。

一時的な要素の表示／非表示

必要なセクションに集中したい時や、スクロールを減らしたい時などは、一時的に必要なウィジェットのみの表示にすることができます。

例えば、下記の「コンテナ１」を一時的に隠したいとします。

一時的に非表示にしたい「コンテナ１」の上にカーソルを合わせると、右端に目のマークが現れるのでクリックしましょう。

メインキャンバス上の表示を一時的に非表示にすることができ、「構造」のウィジェットはグレーに変わります。

元の表示に戻すときは、目のマークを再度クリックします。

まとめ

「構造」を活用すると、ページ内の要素の把握や位置の入れ替えが容易になり、ウィジェットの複製やスタイル貼り付けなどの機能で、作業効率の大幅アップが期待できます。ぜひ使いこなしてください。

---

また、サイトを端末毎に表示を変更する『レスポンシブ機能』についても詳しく説明をした記事もあります。
便利なサイト構築に是非こちらも役立ててくださいね！
＞＞【Elementor – レスポンシブ機能の使い方】

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