Elementor Galleryウィジェットを使って複数画像のレイアウト

Galleryウィジェット

Galleryウィジェット(Elementor Pro版)を使い複数画像のレイアウトを調整できます。


画像を複数選択します。
Galleryを編集>コンテンツタブ>リンクをメディアファイルにしておくと画像選択するとLightbox表示になります。

次の3種類のレイアウトとカラムを調整して様々なレイアウトが可能になります。
(1)Gridレイアウト(それぞれの画像の縦横を同じ比率で表示)
(2)均等割付レイアウト(それぞれの画像を同じ高さで表示)
(3)Masonry レイアウト(それぞれの画像の比率を保ったまま格子状に表示)

サンプル作成しました。
デモ画面

これまで外部JSのMasonryやCollagePlusなどを組み込まなければ実現できなかったレイアウトが簡単にできるようになりました。あぁElementorおそろしや(-_- ; )

ロールオーバー処理

ロールオーバー処理に画像をにぼかしをかけたり色をつけたりすることができます。
上記のデモ画面でGridレイアウトに対してロールオーバーした時に文字を表示してみました。

複数のギャラリー表示

タイプよりMultiple(複数)を選択すると複数のギャラリーを表示できるようになります。

Elementorカテゴリ

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.