この投稿は、Elementor Pro（無料版Elementor含む）編集時の備忘を兼ねたメモ。
ネット上の情報を見て、「結構簡単じゃないか」と思っていざ始めてみたものの…思うようにいかずドツボにハマることが多々ある。Elementorもご多分に漏れず、そういうロスは発生しがちだ。
コストや速度低下というリスクを被ってまでElementorを使う理由は、Gutenbergでは作れないサイトを作るためだ。使い方でハマっている時間はない。なので、ここを押さえておけばそう困ることはないというポイントをログとして残していく（不定期更新予定）。
Elementor基本操作
まずはElementor起動時の基本操作から。固定ページ／投稿を問わず「Elementorで編集」ボタンをクリックすると、左側にメニューが表示される。メニューに表示されている項目は、最低限押さえておくべきものばかりだ。
ハンバーガーメニュー
ハンバーガーメニューをクリックすると、下記メニューが表示される。いずれも重要な機能なので、詳細はともかく、概要（何をしたいときに各項目を調整するのか）は覚えておきたい。
設定
「設定」には、下記3つのメニューが表示されている。
- サイト設定
- テーマビルダー
- ユーザー設定
「設定」メニューで押さえておきたいのは、たった1つ。
「「サイト設定」であらかじめフォントや色を設定しておくこと」
最初のうちは、この1点だけ覚えておけばOKだ。Elementorはデバイスごと（「デスクトップ（以下、PCと表記）」「タブレット」「モバイル」）に調整が出来るというメリットがあるが、裏を返せばデバイスごとに調整が必要になるということでもある。
特定のページだけで使うウィジェットならともかく、ページ内のテキストや見出し全てを1つ1つ調整するのは時間の無駄以外の何物でもない。なので、サイト設定で予め色やフォントを設定しておくことが重要だ。
ページから移動
「ページから移動」には、下記3つのメニューが表示されている。
- ファインダー
- 固定ページを表示
- ダッシュボードへ戻る
最初のうちは、ファインダーは使わないと思う。なので、Elementorの編集作業が終わったら「固定ページを表示」または「ダッシュボードへ戻る」いずれかをクリックしてWordPress管理画面またはサイトに戻るという点だけ覚えておけばOKだ。
タブ
Elementor起動直後にメニューを見ると、「要素」と「全般」という2つのタブが表示されている。そしてウィジェットをページにドロップすると「コンテンツ」「スタイル」「高度な設定」という3つのタブが表示される。まずはこれらの概要から。
「要素」タブ
「要素」タブは、ウィジェットを選択する際に用いる。Elementor ProやAddonのウィジェットもここから選択する。使いたいウィジェットを選べば良いだけなので特に問題なし。
「全般」タブ
「全般」タブは、複数ページで使い回すウィジェットを登録すると利用出来るようになるらしい。例えば、CTAのように複数ページで同じものを表示させたい場合は「全般タブ」のお世話になるということのようだ。無料版Elementorの場合はテーマビルダーが無いので、重宝するかもしれない。
「コンテンツ」タブ
「コンテンツ」タブは、主に素材そのものを編集する際に用いる。具体的にはテキストや画像の編集だ。
「スタイル」タブ
「スタイル」タブは、ウィジェットの色や大きさ（高さや幅など）を編集する際に用いる。素材を取り込んだら、スタイルを調整する…という自然な流れで作業を行える。
「高度な設定」タブ
「高度な設定」タブは、マージン／パディングやモーション効果、そしてデバイスごとにウィジェットの表示／非表示を選択するなど、Elementorらしい効果を設定するために用いる。
後述する「レスポンシブモード」と併用することで、デバイスに合わせた最適なパーツを作成可能だ。
ナビゲーター
ナビゲーターとは、セクションやウィジェットをツリー表示してくれる機能。
例えばキービジュアル付きCTAの作成時にはセクションの中にインナーセクション、ウィジェット、素材…と複数のアイテムが詰め込まれる。そのうちのどれかを編集しようと思っても、どれを選択すれば良いのか分からない、あるいは上手く選択出来ない…といったことが起こる。また、メニューアンカーのように視認出来ないウィジェットもある。
そんな時に重宝するのがナビゲーターだ。
ナビゲーターを表示したら、ツリーを見ながらお目当てのウィジェットを探す。おおよその位置が分かっていれば、その周辺にあるセクションやウィジェットをクリックしても良い。すると、ナビゲーター上ではクリックした箇所が水色に塗り潰し表示される。
これで今選択されているパーツとその周辺のパーツが分かるので、編集したい部分（セクション、カラム、ウィジェット）をナビゲーター上で選択し、メニュー上で編集すればOK。
Gutenbergの「リスト表示」同様、複雑な構成のパーツを編集する際に重宝する機能だ。
レスポンシブモード
レスポンシブモードとは、「デスクトップ（以下、「PC」と表記）」「タブレット」「モバイル」の3種類のデバイスごとにウィジェットを編集できる機能。特にスタイル調整時に使用する。スタイルの調整を3回も行うと聞くと面倒に感じるが、これがあるのと無いのとでは大違い。
最も分かりやすいのは、見出し。PCだといい感じだったのが、モバイルにすると中途半端な所で改行されてしまう…ということはよくある。そんな時は、レスポンシブモードで見出しの大きさを変えたりマージン・パディングの追加等で見栄え良く調整を行えばよい。これはGutenbergにはない、Elementorのウリの1つだ。
FVやCTAなどを「全幅」にしたいとき
ウィジェットをいじる前に、セクションを全幅にする。
マージンとパディング
違いを理解するには、下記コンテンツを参照のこと。テキストウィジェットを使ったマージンとパディングの実験結果だ。
このコンテンツの内容をまとめると、下記の通りとなる。
マージンとセクション、マージンとコンテンツの関係
マージンの値を変えることで、セクションとウィジェットの間隔が変わる。
セクション
マージンの値を増やそうが減らそうが、セクションの幅は変わらない。
マージンの値によって、セクションの高さは変わる（マージンを増やせば伸びる）。
ウィジェット
マージンを増やすほど、ウィジェットの幅が小さくなる。
マージンを減らすほど、ウィジェットの幅が大きくなる。マイナスの値を入れると、セクションより広くなる。
コンテンツ
マージンを増やす（プラスにする）ほど、コンテンツの幅が小さくなる。
マージンを減らす（マイナスにする）ほど、コンテンツの幅が大きくなる。
パディングとセクション、パディングとコンテンツの関係
パディングの値を変えることで、ウィジェットとコンテンツの間隔が変わる。
セクション
パディングの値を増やそうが減らそうが、セクションの幅は変わらない。
パディングの値によって、セクションの高さは変わる（パディングを増やせば伸びる）。
ウィジェット
パディングの値を増やそうが減らそうが、ウィジェットの幅は変わらない。。
パディングの値によって、ウィジェットの高さは変わる（増やせば伸びる）。
コンテンツ
パディングを増やす（プラスにする）ほど、コンテンツの幅が小さくなる。
パディングの場合、マイナスの値は反映されない。
セクションと内部セクション
最も使用頻度が高いのは、「キービジュアル付きCTA作成時」。
Elementor ProやアドオンのCTAウィジェットは、「背景＋見出し＋テキスト＋ボタン」で構成されている。つまりCTAウィジェット単体ではキービジュアルを入れることが出来ない。そこで、キービジュアルを入れたい場合に内部セクションを使う。
具体的には、セクションを追加したら＋リンクをクリック。ウィジェット選択画面から内部セクションをドラッグアンドドロップ。これで内部セクションが追加される。あとはカラム数などを設定してウィジェットを追加していけばOKだ。
ページ内リンク
ボタン（リンク）を設置して違うページに飛ばす場合は、飛ばし先ページのURLを設定すれば良い。だが、ページ内の複数個所にボタン（リンク）を設置していても、飛ばすのは同一ページ内の同じ場所…というケースがある（例：LP/SP）。そんな場合に使うのが、ページ内リンクだ。
Elementorの場合、「メニューアンカー」というウィジェットを使うことで所定の場所に飛ばすことが出来る。ちなみに、デフォルト状態でスムーススクロールするので、JS/jQueryのカスタマイズは不要。プラグインも要らない。
ページ内リンクの実装で使わせてもらった情報は下記の通り。
- Elementor – リンククリックで特定のセクションまでスクロールさせる方法：NoCodeWeb
「トップへ戻るボタン」実装方法
ユーザビリティを考えた時、「トップへ戻るボタン」は重要なパーツだ。LP/SPをはじめとする固定ページでは必要ないが、How Toやサポート系コンテンツは「閲覧者の好きなように閲覧出来ること」が重要なポイントとなる。
なので、コンテンツに関しては「トップへ戻るボタン」と「Table of Contents」とを併設すべきだと思っている。
「トップへ戻るボタン」自体はElementorの「メニューアンカー」と「ボタン」ウィジェットで実装可能だ。しかし、投稿ごとにボタンの設置をするのでは時間効率が悪すぎる。結果、Single Pageなどのテンプレートにボタンを表示する→Elementor Proが必要…という図式が成り立つ。
ページ内リンクの項で触れた通り、デフォルト状態でスムーススクロールするので、JS/jQueryのカスタマイズは不要。プラグインも要らない。そして、スクロール中にふわりと表示／非表示させることも可能だ。「トップへ戻るボタン」実装で使わせてもらった情報は下記の通り。
- Elementor – リンククリックで特定のセクションまでスクロールさせる方法：NoCodeWeb
- 「ページ上部に戻る」ボタンについて：TOFUラボ
