Elementorによる段組ネスト

Inner Section

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

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

1.先ずは2段の段組の設定です。

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

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

2.次に左側の段組に2段の段組を設定

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

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

3.次に右側段組に3段の段組を設定

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

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

4.複数のカラム挿入でフォトギャラリーを実装

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

5.ELEMENTOR+カスタムCSSでリッチ画像が実現

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

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

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