左のサイトは、WordPressテーマ：Astraの初心者用に作られたスターターテンプレート「クリスティーナのメイクアップスタジオ」で作成された見本ページです。
そのトップページのアイキャッチ画像の直下にある以降の画像に目が釘ずけになりました。４人の女性の画像が４列のカラム（段組）で表現されています。
目を引く画像は、どのように作成されたのか？
普通の画像処理では、左記のような画像表現はできないと思います。即ち、４カラムの２カラム目と４カラム目の画像が他のカラムの画像より下方向に50pxずれているのです。
普通では、このようなイレギュラーな画像設定はできないと思いますが、Elementorならできるのです。今回、その驚くべき設定方法を明らかにしてみました。
画像はカラムの背景画像として設定
先ず、二段のカラム（段組み）を設置します。そして左の段組み内に内部セクションを挿入して、その段組み複製で４段の段組みを設定します。
一番左の段組み内に背景画像として最初の画像を挿入します。画像挿入は画像ウジェットで挿入するのではなくて、背景画像として挿入するのが、今回のミソと言えます。
何故そうなのかは後で分かると思いますので、ここでは理由は敢えて述べません。そして「カラムを編集」で位置として「中央の中」を選択します。これは、画像の中心と段組の中心を合わせる設定にします。
そしてサイズで「カバー」を選択します。
背景画像の角を丸くする設定
次に、「カラムを編集」の「枠線」のボーダータイプを「なし」にして、枠線の丸みを「12」に設定すると画像の４隅が直角から丸みを持った角になります。
この辺の設定が、単なる画像ウジェットによる画像挿入ではできない機能なので、敢えて背景画像として画像挿入することになるのです。
背景画像を見えるようにするには？
ここで注意する設定として背景画像を見えるようにするための処理を忘れてはなりません。
背景画像は、その上にオーバーレイしたウジェットがあって始めて表面に現れる特性があります。
一般的に上に被せるウジェットは「スペーサー」が使われます。即ち、背景画像を設置したカラム（段組み）の上に「スペーサー」を設置します。
設置した「スペーサー」の高さを400pxくらいにして背景画像を覆うようにします。
「マージン」設定で画像の縦方向のズレを表現する
「カラムを編集」の最後の設定が「高度な設定」になります。
「高度な設定」のマージンを全て５pxに設定します。これは、隣接する背景画像の余白を10pxにするための設定となります。
以上で、４つの背景画像の最初の背景画像の設定処理が終わります。あとは２列目～４列目の背景画像の設定を繰り返すことで目的が達成されます。
但し、左記のマージン設定は１列目と３列目のマージン設定となります。２列目と４列目のマージン設定は次のところで記載します。
２列目及び4列目のマージン設定
左記のマージン設定は、４列の背景画像設定の内の２列目と４列目のマージン設定になります。
４つあるマージン設定の最初のマージン50は、背景画像の縦下方方向に50pxずらすことを意味します。
マージン３番目の-50は、背景画像の縦下方方向に50pxにずらすことを意味します。
このことはマージン１番目の50とマージン３番目の-50がペアとなって背景画像を段組み枠の中で下方方向に50pxずらすことになるのです。
元の写真の画像サイズは、300x500pxです。
元々の画像は、横300px、縦500pxの縦長画像です。
その画像を単純に横に並べると左記のようになります。
完成画像は背景画像です。
上記の画像加工を、施した結果、完成した画像が左になります。
背景画像＋モーション効果です。
前記の結果に、モーション効果を追加してみました。
その効果をもう一で見たい場合には、ブラウザの更新ボタンを押してみて下さい。