クリックしにくい部品は「構造」から選びます。入れ物と中の部品の関係が一覧で分かります。
開発環境の実画面で説明しています。赤い番号と手順を見比べて進めてください。撮影：2026年9月23日／Elementor 4.3.0。従来の「基本」「一般」のウィジェットとコンテナを使います。「Atomic エレメント」は別の設定です。練習には新しい下書きページを使いましょう。
1．構造パネルを開く
画像を大きく見る（赤い番号付き）
- 上部の①「構造」ボタンを押します。
- ②「コンテナ」の左の矢印を押すと、中に入っている部品が開きます。
- ③見出しなどの行を押し、ページ上の選択枠と左の編集名を確認します。
成功の目印
狙った部品の設定が左側に表示されます。
2．親と子の違いを知る
| 選ぶもの | 調整する内容 |
|---|---|
| 親コンテナ | 中の部品全体の並び・間隔・背景 |
| 子コンテナ | 画像と説明など、小さなまとまり |
| ウィジェット | 見出しの文章、画像、ボタンなど個別の内容 |
右に少し下がって並んでいる行は、上のコンテナの中身です。部品だけの文字色を変えたいときは、その部品を選びます。
3．名前を付けて迷いにくくする
- 「コンテナ」などの行の名前をダブルクリックします。
- 「案内の見出し」「サービス説明」など、自分が分かる名前を入力してEnterを押します。
- この名前は編集時の目印です。ページに表示される見出しの文章を変更する操作ではありません。
4．並べ替えて確認する
- 移動したい行を、同じ親コンテナ内の目的の位置へドラッグします。
- 前後の間に入れるのか、別コンテナの中に入れるのかを挿入線で確認します。
- パソコンとスマホを切り替えて確認し、下書き保存します。表示順が変わらない場合はコンテナの「方向」や逆順設定も確認します。
目のアイコンは編集画面で選びやすくするための表示操作の場合があります。公開ページの端末別表示は「高度な設定」→「レスポンシブ」で確認してください。
成功の目印
構造の並びと、実際に見せたい順番が一致しています。