段組ネスト | LightHouseで作る試作見本サイトです

Elementorによる段組ネスト

WordPressのプラグイン「ELEMENTOR」は、段組ありきのプラグインです。即ち、段組ファーストのページ編集ツールです。その段組をELEMENTOR専用ウジェット「Inner Section」（左記）を使用することで、段組のネスト化が実現できます。

「Inner Section」とは、段組の中に子供の段組を設定する、所謂、段組のネストを実装することを意味しています。この段組ネストを「ELEMENTOR」無しで設定するのは、ちょっと面倒くさい設定になります。

先ずは一番簡単な段組設定として２段の段組を設定してみました。そこに２枚の画像をそれぞれの段組内に入れてみました。
使用した画像の大きさは横幅640pxです。その結果、段組内一杯に画像が表示されていると思います。

そして今回、ホバー時のアニメーション機能を使い、オンマウスした時に画像がちょっと拡大変形する機能を追加してみました。

次に左側の段組内に前記の「カラム（Inner Section）」というELEMENTOR専用ウジェットを画像の替りに挿入します。
左側の段組を２段のカラムで入れ替えた後、カラムの左右に画像を入れてみました。

その結果、段組全体の横幅サイズは「１：１：２」の大きさの３段の変則段組になっています。
この左側段組に「カラム」を入れるケースが、段組の中に段組を入れる正に「段組のネスト」に相当するページ編集になります。

次に、右側段組に３段の段組を入れるケースです。先ずは、前記と同様に右側段組に「カラム」を挿入します。
元々「カラム（Inner Section）」は２段の段組そのものですので、２段の段組を３段の段組に変更する必要があります。

段組を増やす操作として「Addカラム」というELEMENTOR操作で３段の段組に変更してあげればいいわけです。
その結果、段組全体の横幅サイズは「３：３：２：２：２」という大きさの５段の変則段組になっています。

前記のカラムを複数件実装して、以下のようなフォト・ギャラリー仕様のページが作成できます。
画像の上でクリックすると、オリジナルのファイルサイズでポップアップ画像が表示されます。

前記のフォトギャラリーの事例を見てもお分かりなると思いますが、WordPressのELEMENTOR操作で、
カラム（またはコラム）の追加機能と画像挿入の機能で、多様なフォトギャラリーが実装できることが分かりました。

そのフォトギャラリーにホバー時のアニメーション機能を追加することで、さらに画像表現が豊かになったように
思いませんか？　

全てはプラグインELEMENTORの為せる技としか言いようのない素晴らしい機能です。
WordPressを志向するユーザーの強力なツールとなることを実証した事例です。