Elementorのユーザー設定の使い方 – エディタをカスタマイズ
- 2024年6月30日
- 2024年6月29日
- Elementorの使い方
Elementorのユーザー設定、皆さんご存知ですか？
なぜか知らない方のほうが多いのですが、Elementorの編集画面を自分好みに少し設定変更できます。
ユーザー設定でできるカスタマイズは少しなのですが、これを知っているか知っていないかでは作業時間長さにも影響が出てしまうんです。
この記事では、ユーザー設定の使い方について詳しく解説します。
ユーザー設定を開く
新しいバージョンでの開き方
新しいバージョンのElementorでは、上部のバー内の左上のメニューをクリックします。
その下に表示されたメニューの中から『ユーザー設定』をクリックします。
現バージョンでの開き方
現バージョンのElementorでは、画面左上のメニューをクリックします。
その下に表示されたメニューの中から『ユーザー設定』をクリックします。
ユーザー設定パネルをチェック
ユーザー設定パネルが開きました。
ここからは新しいバージョンのElementor画面で解説します。
UIテーマ
UIテーマではElementorの操作パネルのカラーを選ぶことができます。
UIテーマは初期では『自動検出』になっています。
パソコンの設定がダークモードだと、初期ではダークになっています。
ライトモードにするとパネル背景が明るく、ダークモードにすると暗く表示されます。
パネル幅
『パネル幅』はElementorの操作パネルの幅を設定することができます。
パネル幅はデフォルトで300pxに設定されています。
使いやすい幅に設定することができます。
パネル幅のスライダーを一番左に設定すると200pxに設定できます。
パネル幅のスライダーを一番右にスライドすると680pxに設定できます。
この部分に直接数値を入力することも可能です。
『０』を入れてしまうとパネルが表示されなくなってしまうのでご注意ください。
（パネルが表示されなくなってしまった場合はウィンドウの左側にマウスポインタを合わせ、右側にドラッグで再表示できます。）
ハンドルの編集
『ハンドルの編集』は、ウィジェットの右側に表示される鉛筆マーク部分の編集ハンドルの表示設定をすることができます。
初期設定の場合
『ハンドルの編集』は初期設定では『いいえ』になっています。
『ハンドルの編集』が『いいえ』になっていると、ウイジェットの右側の鉛筆マークにマウスポインタを合わせても、『〇〇（ウィジェット名）を編集』という表示しか出てきません。
ここからウィジェットを複製したり削除したりする時は、鉛筆マークを右クリックして編集します。
『ハンドルの編集』を『はい』にした場合
『ハンドルの編集』を『はい』にすると
ウィジェットやコンテナのハンドルにマウスポインタを合わせると『編集』だけではなく『複製』『削除』の項目が表示されるようになります。
頻繁に削除や複製をされる方は、『ハンドルの編集』を『はい』にしておくと便利です。
エディターでLightboxを有効化
『エディターでLightboxを有効化』を『はい』にしておくと、画像ウィジェットのリンクの設定で『Lightbox』を選択できるようになり、画像をクリックするとポップアップで画像を表示することができるようになります。
画像ウィジェットの編集画面で、リンクを『メディアファイル』に設定すると、Lightboxの項目が『デフォルト』で有効になっています。
Lightboxの設定が有効になっていると、画像をクリックすると
ポップアップで画像が表示されます。
『エディターでLightboxを有効化』を『いいえ』にしておくと、画像ウィジェットでLightbox機能がOFFになります。
画像ウィジェットのリンクを『メディアファイル』にして、Lightboxを『はい』に設定しても、
画像をクリックしても何も起こりません。
敢えて画像をクリックしてポップアップを表示させたくない時は、『Lightboxを有効化』を『いいえ』にしておくとよいですね。
Responsive Preview
Hidden Elements
『Hidden Elements』では、レスポンシブ設定でコンテナやウィジェットを非表示設定にした際に、非表示部分をグレーアウトにするか、完全に非表示にするかの設定することができます。
デフォルトでは『Hidden Elements』が『表示』になっています。
例えば、スマホの時だけ表示させたくないコンテナがあるとします。
コンテナを編集から『高度な設定』をクリック、『レスポンシブ』の項目で『モバイル縦向きで隠す』を『非表示』にします。
プレビュー画面でスマホ縦向き表示にして確認すると、非表示にしたコンテナが薄くグレーアウトした状態で表示されています。
『Hidden Elements』を『非表示』にしておくと
非表示にしたコンテナが全く表示されなくなります。
実際のサイトでの見え方と同じように表示させて作業したい時は、『Responsive Preview』の『Hidden Elements』を『非表示』にしておくと作業しやすくなります。
Default Device View
『Default Device View』では、『レスポンシブモード』を表示させた時にデフォルトで『デスクトップモード』『Tablet Portrait』『モバイル縦向き』のどのモードを表示させるかを設定することができます。
この機能は上にバーがある新バージョンの設定画面では機能しませんが現在のバージョンで機能しますので、現バージョンの画像で解説します。
デフォルトでは『デスクトップ』に設定されています。
画面左下の『レスポンシブモード』をクリックすると、画面上部にモード切替ボタンが表示され、画面にはデスクトップモードがデフォルトで表示されています。
『Default Device View』を『モバイル』に設定して『更新』ボタンをクリックすると
次に『レスポンシブモード』を開きなおしたときには、デフォルトで『モバイルモード』が表示されるようになります。
スマホの画面を重点的に作業する際など、この設定をしておくと大変便利です。
Exit to
『Exit to』では、Elementorの編集画面を閉じた際にどこの画面に遷移するのかを設定することができます。
この『Exit to』も設定することで作業効率が変わってきます。
『Exit to』を『この投稿』にしておいて、メニューから『Exit to WordPress（作業終了）』をクリックすると
投稿の編集画面に遷移します。
『Exit to』を『投稿一覧』にしておくと、
投稿一覧画面に遷移します。
『Exit to』を『WP Dashboard』にしておくと、
ダッシュボードへ遷移します。
編集後、どこに遷移するかを設定することができるのでとても便利ですね！
Style Guide Preview
最後に『Style Guide Preview』の解説です。
『サイト設定』→『グローバルカラー』の画面で、『Style Guide Preview』を表示する・しないの設定ができます。
ここはデフォルトで『オン』になっています。
上部の黒いバーの『サイト設定』をクリック、『グローバルカラー』をクリックすると
グローバルカラーの『Style Guide Preview』が『オン』になっており、画面右側全体に『Style Guide Preview』が表示されています。
ユーザー設定の『Style Guide Preview』を『オフ』にして『公開』ボタンをタップすると
『サイト設定』の『グローバルカラー』を見ると『Style Guide Preview』は最初から『オフ』になっており、画面右側にはStyle Guide Preview画面は表示されていません。
どうでしたか？
ユーザー設定での変更は小さな変化なのですが、自分好みに設定変更するだけで普段しているクリックの回数が激減しませんか？
是非ユーザー設定を見直して、作業効率アップに繋げてください。
Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。
