コンテナは、見出し・画像・文章などをまとめる「入れ物」です。中の部品を横や縦に並べ、間隔や余白をまとめて調整できます。
OptiBの実際の画面で説明します。スクリーンショットの赤い番号と、説明の同じ番号を見比べて進めてください。
① コンテナを追加し、中に部品を入れる
- 編集したいページを「Elementorで編集」で開き、左上の「＋」（要素を追加）を押します。
- 「レイアウト」の「コンテナ」を、ページの入れたい場所へドラッグします。
- コンテナの枠の内側へ「見出し」「画像」「テキストエディター」などをドラッグします。写真と文章を1セットにする場合は、内側に子コンテナを作ってまとめると調整しやすくなります。
- 外側のコンテナのハンドルを選び、左上に「コンテナを編集」と出ることを確認します。選びにくいときは上部の「構造」から選べます。
親コンテナは全体の並び、子コンテナは1つのまとまりを調整します。画像や文章を選択していると、コンテナの設定は表示されません。
② 幅・並ぶ方向・間隔を決める
赤い番号と同じ番号の手順を確認してください。
- 「レイアウト」を開き、「コンテナのレイアウト」がFlexboxになっていることを確認します。
- 「コンテンツ幅」を選びます。「ボックス」は本文の最大幅を決めるとき、「全幅」は入れ物の横幅いっぱいに広げるときに使います。「幅」で必要な大きさを調整します。
- 「方向」で右向きの矢印なら横並び、下向きなら縦並びにします。写真と説明を横に置くなら横並びから始めます。
- 「Gaps」で部品同士の間隔を設定します。まず20pxを目安に、右側の表示を見ながら調整します。揃える位置は「コンテンツの配置」「項目の配置」で整えます。
③ 内側・外側の余白を整える
コンテナを選択したまま「高度な設定」→「レイアウト」を開きます。
赤い番号と同じ番号の手順を確認してください。
- 「マージン」はコンテナの外側の余白です。前後のまとまりとの距離を空けたいときに使います。
- 「パディング」はコンテナの内側の余白です。まず上下左右24pxなどを入力し、文章が端にくっつかないようにします。鎖マークで4方向を連動・解除できます。
使い分け
部品と部品の間 → Gaps
枠と中身の間 → パディング
枠の外側の空き → マージン
④ スマホでは縦並びを確認する
- 上部のスマートフォンのアイコンを選びます。
- 「レイアウト」→「方向」の下向き矢印で縦並びにします。端末マークのある設定は、画面幅ごとに調整できます。
- 左右の余白・文字の折り返し・画像の幅を確認し、デスクトップ表示へ戻して元の並びも確認します。
上部のスマートフォンのアイコンで確認し、右上の「公開」または「更新」で保存します。作成途中なら下書き保存を選びます。保存後は実際のページも開いて確認しましょう。
完了チェック
- 部品が目的の順番で並んでいる。
- スマホで横にはみ出さず、文字が読める。
- Gaps・パディング・マージンを重ねすぎていない。
うまくいかないとき
方向を変えても、並び方が変わらない
部品を直接入れている親コンテナを選べているか「構造」で確認します。子の幅が100%になっていると横に並びきらない場合があります。
余白を減らしても空きが残る
親・子のコンテナ、部品自体の余白、「最小の高さ」、スペーサーを順に確認します。
画面は撮影時のバージョンです。「Atomic エレメント」の部品とは設定が異なります。