Elementorのコンテナは、ウェブサイトのデザインを自由自在に構築するための重要なパーツです。
この記事では、コンテナの概念、効果、そして設定方法について解説します。
Elementorの編集操作について詳しく知りたい場合は、以前の記事をご覧ください。
01. コンテナとは？
コンテナは、Elementorのページビルダー上で、他の要素（テキスト、画像、ボタンなど）をグループ化するための枠のようなものです。
コンテナを使用することで、複数の要素をまとめて扱い、レイアウトを調整することができます。
02. コンテナウィジェットの使い方
コンテナを編集画面へ挿入
Elementorの編集画面より、コンテナを挿入・追加する為の操作を行います。（参考：添付画像↑）
コンテナの追加・削除
【コンテナの追加方法】
方法①：Elementorエディタ内で「+」をクリックし、コンテナを選択して追加します。
方法②：ウィジェット一覧の「コンテナ」からドラッグ＆ドロップでコンテナを追加する事も可能です。
※複数のコンテナをネスト（入れ子）して配置することも可能です。
【コンテナの削除】
方法①：コンテナを選択し、右クリックして「削除」を選択します。
方法②：Elementorエディタ内で「×」をクリックしコンテナを「削除」することも可能です。
方法③：または、コンテナを選択した状態でキーボードのDeleteキーを押すことでも削除できます。
※Macを使用している方は「fn」キーを押した状態で「delete」キーで削除できます。
コンテナにコンテンツを配置する
コンテナ内にウィジェットをドラッグ&ドロップして、テキスト、画像、ボタンなどを配置する事が出来ます。
コンテナのレイアウト設定
【カラムの分割】
コンテナ内に新たなコンテナを追加する事で、コンテンツを整理する事ができます。
そして各コンテナに異なるウィジェットを配置し、レイアウトを自由にカスタマイズできます。
【コンテナの並べ替え】
コンテナ内の要素はドラッグ&ドロップで並べ替えることができます。
また、Flexboxの設定を使用して、要素を水平または垂直に配置することも可能です。
コンテナ編集パネル（左）の「商品」欄の「方向」にて、適切な設定を施す事でコンテナ内のコンテンツ要素の向きを（水平・垂直）変更する事が出来ます。
コンテナのスタイル設定
コンテナをクリックし、左側のパネルで「スタイル」タブを開きます。
コンテナの背景色や画像の入れ込み、ボーダー、ボックスシャドウなどの設定が行えます。
コンテナの高度な設定
左側のパネルの「高度な設定」では、マージンやパディングといった余白の調整やデバイスごとに異なるスタイルを適用させるレスポンシブ設定を行う事が出来ます。
コンテナがもたらす効果
- レイアウトの自由度向上: コンテナを使用することで、複雑なレイアウトを簡単に作成できます。
- デザインの一貫性: 複数のページで同じデザインのコンテナを再利用することで、サイト全体のデザインの一貫性を保てます。
- 効率的な編集: コンテナ内の要素をまとめて選択し、一括でスタイルを変更できます。
- レスポンシブデザイン: コンテナのサイズや配置をデバイスに合わせて調整することで、どんなデバイスでも最適な表示を実現できます。
03. まとめ
この記事では、Elementorのコンテナの使い方について、ざっくりと解説しました。
コンテナの機能には、ここで紹介した内容以外にもたくさんの機能が備わっています。
この情報を参考に、一度手を動かしみてコンテナの使い方を覚えてみてください。