Elementor の強力なウィジェット
We know that good design means good business.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
ELEMENTORによる段組ネスト
WordPressのプラグイン「ELEMENTOR」は、段組ありきのプラグインです。即ち、段組ファーストのページ編集ツールです。
その段組をELEMENTOR専用ウジェット「Inner Section」を使用することで、段組のネスト化が実現できます。
段組のネスト化とは、段組の中に子供の段組を設定する、所謂、段組のネストを実装することを意味しています。
この段組ネストを「ELEMENTOR」無しで設定するのは、ちょっと面倒くさい設定になります。
１．先ずは２段の段組の設定です。
先ずは一番簡単な段組設定として２段の段組を設定してみました。そこに２枚の画像をそれぞれの段組内に入れてみました。
使用した画像の大きさは横幅640pxです。その結果、段組内一杯に画像が表示されていると思います。
2．次に左側の段組に２段の段組を設定
次に左側の段組内に「Inner Section」というELEMENTOR専用ウジェットを画像の替りに挿入します。
左側の段組を２段のカラムで入れ替えた後、カラムの左右に画像を入れてみました。
その結果、段組全体の横幅サイズは「１：１：２」の大きさの３段の変則段組になっています。
この左側段組に「Inner Section」を入れるケースが、段組の中に段組を入れる正に「段組のネスト」に相当するページ編集になります。
3．次に右側段組に３段の段組を設定
次に、右側段組に３段の段組を入れるケースです。先ずは、前記と同様に右側段組に「Inner Section」を挿入します。
元々「Inner Section」は２段の段組そのものですので、２段の段組を３段の段組に変更する必要があります。
段組を増やす操作として「Addカラム」というELEMENTOR操作で３段の段組に変更してあげればいいわけです。
その結果、段組全体の横幅サイズは「３：３：２：２：２」という大きさの５段の変則段組になっています。
