Elementorコンテナとは
Elementorコンテナは、非常に柔軟でレスポンシブなページレイアウトを作成するためのElementorページビルダーの新機能です。コンテナは従来のセクションレイアウトよりも強力なコントロールとより多くのレイアウトオプションを提供します。FlexboxとGridの2つのレイアウトモードに対応しています。
1.Elementorコンテナを有効にするには？
まず、Elementor Page Builder プラグインをElementor Pro プラグイン最新バージョンにアップグレードする。
プラグインを最新バージョンにアップグレードした後、次の場所に移動します。エレメンタ>セットアップページの「機能」タブ
厩舎の特徴グリッドコンテナ活性化する：
アクティブ化フレックスボックス・コンテナElementor付属のメガメニューを使用したい場合は、ネストされた要素とメニューの機能も有効にする必要があります。
設定が完了したら、ページを一番下にドラッグ＆ドロップし、保存ボタンをクリックします。
2.ページ内のセクションをコンテナに変換する方法は？
ページエディターに入った後、コンテナに変換したいセクションを選択し、コンテナを選択したスライダーにドラッグします。
変換後、変換後のセクションモジュールの下に、同一のコンテナモジュールが自動的にコピーされます。Containerモジュールに問題がないことを確認したら、Sectionモジュールを直接削除することで、SectionからContainerへの変換が完了します。
3.セクションに対するElementorコンテナのいくつかの利点
3.1 応答性の向上
Containerは、レイアウト内のコントロールをフル活用して、自動的にレスポンシブな調整を行います。つまり、ほとんどの場合、コンテンツの自動レスポンシブレイアウトを実現するために多くの設定を行う必要はありません。一方、セクションは、完璧なレスポンシブ効果を実現するために、さまざまなデバイス用に手動で設定・調整する必要があります。
コンテナはまた、特定のニーズを満たすために、さまざまなデバイス用にレスポンシブレイアウトをカスタマイズすることができます。
3.2 レイアウトコントロールの拡大
コンテナはセクションよりも自由度が高く、柔軟性がある。複数のレベルのコンテナを入れ子にしたり、幅や高さをカスタマイズすることができます。これにより、機能が豊富で複雑なテンプレートをより速く簡単に作成できます。セクションレイアウトはウィジェットをセクションとカラムに分割することしかできませんが、コンテナは従来のレイアウトよりも柔軟性があります。
3.3 ページ速度の改善
Elementorは遅いですか？セクションレイアウトは少し遅いかもしれませんが、コンテナではありません！
Elementor Containerは、使用するセパレータの数を減らすことでページ速度を向上させます。一方、セクションは通常、より多くのカラムと内部セクションを含み、セパレータが増えるほど、DOM（Document Object Model）が大きくなり、ページのロード時間が長くなります。コンテナを使用すると、データ・リクエストの数が減り、DOMが縮小されるため、ページの読み込み速度が大幅に向上します。
3.4 コンテナに直接リンクを追加する
ループアイテムを作る場合、各要素にリンクを追加するのではなく、コンテナ全体にリンクを追加すればよい。コンテナのHTMLタグを次のように変更するだけです。<a>タグが実現できる。これにより、リンク管理がより簡単で効率的になる。
4 Elementorコンテナの基本設定
4.1 ElementorコンテナのFlexBoxとグリッド
FlexBoxとGridは異なるデザインニーズに対応する2つのレイアウトモードで、FlexBoxは自由度の高いレイアウトに適しており、Gridはグリッドに従います。あなたの特定のニーズに応じて適切なレイアウトモードを選択することができます。
a. FlexBoxコンテナとは何ですか？
FlexBoxコンテナは、あなたのウェブサイトのための自由度の高いレイアウトオプションを提供する柔軟なレイアウトです。
b. グリッドコンテナとは？
グリッドコンテナは、行と列を設定することで要素の配置を制御し、すべてのグリッドに高い一貫性を保つグリッドレイアウト手法です。グリッドレイアウトが必要なページでは、グリッドコンテナを使用すると便利で効率的です。
4.2 コンテナをページに追加するには？
a. キャンバス経由での追加
Elementorのキャンバスでコンテナを追加する必要がある場所で、下のモジュールの+記号をクリックし、ポップアップエリアで+記号をクリックします。
次に、ポップアップレイアウトでFlexboxまたはGridをクリックして、対応するコンテナをページに追加します。
このメソッドは、ページの一番外側のレイアウト・コンテナであるトップ・コンテナを追加するために使用されます。トップコンテナはページキャンバスの外部にあり、他のコンテナをネストすることはありません。
ページに複数のコンテナを使用することも、1つのコンテナを使用して他のレイアウト・コンテナをその中に入れ子にすることも、レイアウト計画に応じて選択できます。
b、ドラッグ＆ドロップでレイアウト要素を追加する。
Elementorキャンバスの左側にあるElementor要素ライブラリで、Layoutの下にあるContainer要素を見つけ、対応する領域にドラッグします。
ドラッグ・アンド・ドロップした後、ナビゲーターを通して、コンテナ内にネストされたドラッグされたコンテナを観察することもできます。
以下に追加されたコンテナは、すべてデフォルトです。フレックスボxモードは、レイアウト設定でお好みに合わせて変更できます。グリッドモードだ。
4.3 コンテナレイアウトの設定
1.コンテナの一般設定
コンテナレイアウトを設定するには、以下の手順に従ってください：
- 設定したいコンテナをマウスで選択する。
- 左のウィンドウで「レイアウト」タブに切り替える。
- このタブでは、幅、高さ、配置の調整など、コンテナのレイアウト設定を行うことができます。
Container Layoutは、コンテナのレイアウトを切り替えるために使用され、FlexboxとGridの2つのオプションがあります。
コンテンツ幅コンテナの幅を設定するために使用し、"Boxed "または "Full Width "を選択できます。デフォルトでは "Boxed "に設定されており、これはコンテンツの幅が固定値に基づいていることを意味します。Elementorのサイト設定で、グローバルなコンテンツ幅を設定できます。
Boxedのデフォルトの幅は、Site Settingでグローバルに設定したコンテンツの幅です。
全幅デフォルトの幅は、ラップされたコンテナを基準に広げられます。キャンバスの一番外側にあるコンテナの場合は、デフォルトでブラウザウィンドウを基準に広げられます。幅はスライダーで調整できます。
最低高さContainerの最小の高さを設定するために使用します。コンテナ内にコンテンツが無いか少ない場合は、最小の高さで表示され、コンテナ内にコンテンツが多い場合は、コンテンツの高さに応じて自動的に調整されます。バーをスライドさせるか、値を入力することで高さを変更できます。
コンテナレイアウトは、FlexboxとGridのアイテム設定の違いで、FlexboxからGridに切り替えることができます。
2、フレックスボックスの項目設定
Container LayoutをFlexboxに設定すると、Itemの設定は以下のようになります：
方向は表示方向を表し、矢印の方向風に従って4つのオプションがあります：左から右へ、上から下へ、右から左へ、下から上へ。
Direction（方向）」を使用して、コンテナ内に配置する要素の方向と順序を変更します。
コンテンツの正当性コンテナ内の要素の主軸方向の配置を設定するために使用する。DirectionがHorizontal（左から右、または右から左）に設定されている場合、Justify Contentは水平方向の要素の整列を設定するために使われます。DirectionがVertical（上から下、または下から上）に設定されている場合、Justify Contentは垂直方向の要素の整列を設定するために使われます。
Jコンテンツの正当性コンテナの内部要素の主軸上の配置を設定するために使用され、以下の5つのオプションがある：
- スタートコンテナのレイアウト方向の先頭から要素を並べる。
- センターコンテナ内の要素を中央に配置します。
- 終了Containerのレイアウト方向の端から要素を並べる。
- スペース・ビトウィーン最初の要素は最初に、最後の要素は最後に配置され、残りの要素は均等に配置される。
- 周辺空間各要素は同じ周囲空間を持つ。
- 均等なスペース各要素間の距離は等しい。
アイテムの整列コンテナの内部要素の主軸方向への整列を設定するために使用される。以下の4つのオプションがある：
- スタート: レイアウト方向Directionの始点を基準にコンテナ内の要素を整列します。
- センターDirection レイアウト方向に基づいてコンテナ内の要素を中央に配置します。
- 終了: レイアウト方向Directionの終点を基準にコンテナ内の要素を整列します。
- ストレッチコンテナのサイズに合わせて要素をストレッチする。要素が'auto'サイズであれば、コンテナのサイズに合わせてストレッチされます。
4、追加オプション其他选项设置
コンテナの追加オプションには2つのオプションがある。
オーバーフロー オーバーフロー設定
コンテナのコンテンツがブラウザウィンドウに収まらないかどうか、またオーバーフローを非表示にするか表示するかを制御し、その結果水平スクロールが発生します。
オーバーフロー選択肢は3つある：
- デフォルトでは、コンテナ外のアイテムがオーバーフローする。
- ヒドゥン オーバーフローしたアイテムを非表示にし、オーバーフローしたアイテムにアクセスできないようにする。
- Auto スクロールバーを作成し、コンテンツがオーバーフローしてもアイテムにアクセスできるようにします。
非表示の状態では、コンテンツがはみ出した場合、はみ出したコンテンツは見えません。
4.4 コンテナのスタイル設定
コンテナのスタイル］タブに切り替えて、コンテナのスタイルを設定します。
1）背景（バックグラウンド）
コンテナの背景色はbackgroundで設定できます。
コンテナの背景画像を設定することもできます。
(2) 背景オーバーレイ）
背景オーバーレイでは、設定した背景に色や画像のマスクをオーバーレイすることができ、実現したい効果に合わせて色や画像の透明度を設定することができます。
3) ボーダー（枠線の設定）
Borderは、コンテナの境界線と投影効果を設定するために使用します。
4) シェイプディバイダー（形状分割機）
シェイプスプリットラインは、UAEプラグインが提供する機能であるスプリットエフェクトの間のいくつかのコンテナを行うために使用することができます。
TopとBottomを切り替えることで、コンテナの上部または下部の分割形状を設定するかどうかを選択することができます。
概要
この記事では、Elementor コンテナを有効にする方法、ページ上のセクションをコンテナに変換する方法、そして、より高い応答性、柔軟なレイアウト制御、ページ速度の向上など、セクションに対するコンテナの利点について説明します。このチュートリアルでは、Flexbox や Grid レイアウトモードの使用、Container にリンクやカスタムスタイルを追加する方法など、Container のレイアウト設定についても説明します。初心者でも経験豊富なウェブデザイナーでも、このチュートリアルを読めば Elementor Container のパワーをフルに活用し、ウェブデザインの効率と効果を向上させることができます。
| お問い合わせ |
|---|
| 記事が読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！ |
| ① 電話：020-2206-9892 |
| ② QQ咨询：1025174874 |
| 三 Eメール：info@361sale.com |
| ④ 勤務時間：月～金、9:30～18:30、祝日休み |
