グリッドは、列と行で区切ったマス目に部品を並べるレイアウトです。サービス紹介や特徴を、同じ幅で整列させるときに使います。
OptiBの実際の画面で説明します。スクリーンショットの赤い番号と、説明の同じ番号を見比べて進めてください。
① 「レイアウト」のグリッドを追加する
- 「Elementorで編集」でページを開き、左上の「＋」（要素を追加）を押します。
- 「レイアウト」の「グリッド」をページへドラッグします。
- グリッドの枠を選択し、左上が「グリッドを編集」になっていることを確認します。
ここで説明するのは「レイアウト」のグリッドです。「Atomic エレメント」のグリッドや、投稿を自動表示する「ループグリッド」とは別の部品です。
赤い番号と同じ番号の手順を確認してください。
- 「コンテナのレイアウト」がグリッドになっていることを確認します。
- 「コンテンツ幅」でボックスまたは全幅を選び、必要に応じて「幅」を調整します。
② 列数・行数・間隔を決める
左の設定パネルを少し下へスクロールし、「アイテム」の項目を表示します。
赤い番号と同じ番号の手順を確認してください。
- 「カラム」は横に並べる列数です。撮影画面と同じ均等な列なら「3」で3列にします。右上の単位は撮影画面の「fr」のまま始めます。
- 「行」は縦方向の行数です。まず「2」にすると、3列×2行の6マスを用意できます。
- 「Gaps」はマス同士の間隔です。「カラム」は列の間、「行」は行の間の空きです。列数・行数の入力欄とは役割が異なります。
- 「オートフロー」を「行」にすると、通常は左から右へ順に配置し、次の行へ進みます。「項目の両端揃え」「項目の配置」でマスの中の揃え方を整えます。
部品を入れる例：サービス紹介を3列にする
各マスに子コンテナを1つずつ入れ、その中に「画像＋見出し＋説明」を入れます。1サービスを1つの子コンテナにまとめると、写真と説明が別のマスへ分かれるのを防げます。
編集画面の点線は配置の目印です。公開ページの枠線を付けたい場合は「スタイル」の枠線設定を使います。
③ スマホでは1列にする
先に上部のスマートフォンのアイコンを選びます。以下はモバイル表示に切り替えた実際の画面です。
赤い番号と同じ番号の手順を確認してください。
- 端末マークがスマートフォンになっていることを確認し、「カラム」を1にします。カードが縦に並ぶ形になります。
- 「Gaps」で縦方向の間隔を整えます。子コンテナや画像も確認し、横幅いっぱいに広がっているか、文字が切れていないか確認します。
タブレットでは2列、デスクトップでは3列など、端末ごとに設定できます。空きの行が目立つ場合は、端末ごとの「行」や「最小の高さ」も見直します。
④ 表示と保存を確認する
上部のスマートフォンのアイコンで確認し、右上の「公開」または「更新」で保存します。作成途中なら下書き保存を選びます。保存後は実際のページも開いて確認しましょう。
完了チェック
- PCは3列、スマホは1列など、意図した列数になっている。
- 写真・タイトル・説明が同じマスにまとまっている。
- 不要な空きの行や、画面外へのはみ出しがない。
うまくいかないとき
写真と説明が別々のマスに入る
グリッド直下の部品はそれぞれ配置対象になります。1枚のカードとして扱いたい部品は、子コンテナにまとめてください。
スマホでも3列のままになる
編集対象が親のグリッドか、モバイル表示を選択しているかを確認し、モバイルの「カラム」を1にします。
画面は撮影時のバージョンです。「Atomic エレメント」の部品とは設定が異なります。