What is this？ ⇒ これは「イメージ・アコーディオン」の事例です。
ELEMENTORによる段組ネスト
Inner Section
WordPressのプラグイン「ELEMENTOR」は、段組ありきのプラグインです。即ち、段組ファーストのページ編集ツールです。その段組をELEMENTOR専用ウジェット「Inner Section」（左記）を使用することで、段組のネスト化が実現できます。
「Inner Section」とは、段組の中に子供の段組を設定する、所謂、段組のネストを実装することを意味しています。この段組ネストを「ELEMENTOR」無しで設定するのは、ちょっと面倒くさい設定になります。
１．先ずは２段の段組の設定です。
先ずは一番簡単な段組設定として２段の段組を設定してみました。そこに２枚の画像をそれぞれの段組内に入れてみました。使用した画像の大きさは横幅640pxです。その結果、段組内一杯に画像が表示されていると思います。
そして今回、カスタムCSS機能を使い、オンマウスした時に画像がちょっと拡大変形する機能を追加してみました。
2．次に左側の段組に２段の段組を設定
次に左側の段組内に前記の「カラム（Inner Section）」というELEMENTOR専用ウジェットを画像の替りに挿入します。左側の段組を２段のカラムで入れ替えた後、カラムの左右に画像を入れてみました。
その結果、段組全体の横幅サイズは「１：１：２」の大きさの３段の変則段組になっています。この左側段組に「カラム」を入れるケースが、段組の中に段組を入れる正に「段組のネスト」に相当するページ編集になります。
3．次に右側段組に３段の段組を設定
次に、右側段組に３段の段組を入れるケースです。先ずは、前記と同様に右側段組に「カラム」を挿入します。元々「カラム（Inner Section）」は２段の段組そのものですので、２段の段組を３段の段組に変更する必要があります。
段組を増やす操作として「Addカラム」というELEMENTOR操作で３段の段組に変更してあげればいいわけです。その結果、段組全体の横幅サイズは「３：３：２：２：２」という大きさの５段の変則段組になっています。
４．「コラム」が「Inner Section」に変わった
ELEMENTORでウジェットの一つに「コラム」というパーツがありました。現在のバージョンでは「Inner Section」と言うウジェット名に変更されております。ごく最近の話です。
以前は「コラム」とか「カラム」とか紛らわしい名称で呼ばれていましたが、いずれも英語名の「Column」と同じ意味です。即ち、ELEMENTORでの段組みを「コラム」から「Inner Section」に統一されたと解釈されます。
何故、その「コラム」が「Inner Section」なったのか疑問に思いますが、段組みの中に更に段組みを入れる、即ち、段組ネストをイメージすれば、「Inner Section」がイメージしやすいのでないかと納得せざるを得ません。
５．複数のカラム挿入でフォトギャラリーを実装
前記のカラムを複数件実装して、以下のようなフォト・ギャラリー仕様のページが作成できます。画像の上でクリックすると、オリジナルのファイルサイズでポップアップ画像が表示されます。
６．ELEMENTOR+カスタムCSSでリッチ画像が実現
前記のフォトギャラリーの事例を見てもお分かりなると思いますが、WordPressのELEMENTOR操作で、カラム（またはコラム）の追加機能と画像挿入の機能で、多様なフォトギャラリーが実装できることが分かりました。
そのフォトギャラリーにカスタムCSS機能を追加することで、さらに画像表現が豊かになったように思いませんか？ 全てはプラグインELEMENTORの為せる技としか言いようのない素晴らしい機能です。WordPressを志向するユーザーの強力なツールとなることを実証した事例です。
７．フィルター可能ギャラリー
Elementorの「Essential Addons」という追加拡張機能の中に「フィルター可能ギャラリー」という新しいギャラリーがあります。
単なるフォトギャラリーではなくて、フィルタとなるキーワードを選択すると、キーワードに相当する新たなサブギャラリーが編集されて画面に表示される凄い機能があります。「百聞は一見に如かず」です。先ずはご覧あれ！！