内部セクションの廃止
前回ご紹介したループグリッドウイジェット。このウイジェットはセクション内には配置出来ずコンテナ内でのみ使用できます。
そして、このウイジェットを使用するために、ダッシュボード＞Elementor＞実験中 から「Loop」と「Flexbox Container」を「有効」にすると「内部セクション」がウイジェットから姿を消します。
長年使用してようやく使い慣れた「セクション・内部セクション・カラム」を利用したウエブ制作。「ループ」の利用開始とともに「内部セクション」が選択出来ないのであれば、これはもう「コンテナ」をいち早くマスターするしかありません。
この章ではこの「コンテナ」について簡単に学びます。
え！内部セクションやカラムが無いということはページデザインの方法が大きく変わりますよね？操作に慣れるまでが大変そうです…。
セクションの中に内部セクションを入れカラムを分割してという複雑な構造が、エレメンターの動作が遅くなる原因ともなっていたみたいですね。コンテナもコンテナ内にコンテナが入れられるので内部セクションの考え方は生きてくるかもしれません。
見出し一覧
コンテナとは
ここではコンテナと呼んでいますが、正式名称は「Flexbox Containers」です。コンテナは、フレックスボックス CSS の機能を使用して Web サイトの構築を高速化し、必要なデザインを正確に作成するための自由度をこれまで以上に高め、ページの読み込みを改善し応答性の高い制御を提供します。これは、各アイテムの幅、高さ、および順序を変更して、コンテナの使用可能なスペースを最適に埋める機能を提供することによって行われます。
では、実際のコンテナを見てみましょう。
コンテナの構造
下は一番外側のコンテナ（コンテナ1）の中にコンテナが4つ入った状態です。一番外側のコンテナの編集画面で4つのコンテナの配置を制御します。レイアウト＞商品＞Direction を「→」に設定、Wrap をオンにしています。Direction が「↓」となると、幅 40% に設定したコンテナ3 と 4 が縦方向に並びます。Wrap を外すと Direction「→」に従い、4つのコンテナは横並びとなり、コンテナ3 と 4 のみ 40% ずつ幅を取ります。
コンテナ2（幅100%）
コンテナ3（幅40%）Grow ON
コンテナ4（幅40%）Grow ON
コンテナ5（幅100%）
Wrap を外すと Direction「→」に従い、4つのコンテナは横並びとなり、コンテナ3 と 4 のみ 40% ずつの幅を取ります。上の説明画像でコンテナ3 と 4 が 40% と設定されているのに、横いっぱいに広がっているのは 3 と 4 の高度な設定の Size に Grow が設定されているためです。
コンテナ2
コンテナ3
コンテナ4
コンテナ5
ここがポイント！
コンテナ内でコンテナがどう動くかの説明をしました。コンテナ内に配置するウイジェットに関しても同じ内容となります。スマホ表示にした際のコンテナの並び順も制御できますのでまた別な機会にご説明します。
