Elementor特有の画像編集 | That's Elementor！エレメンターとは何か？

当サイトで「ELEMENTORの画像表現」という画像関連のページを掲載しております。Elementorでページに画像を挿入する際、リンク先の設定で３タイプの画像表現があるとの内容でした。今回は、更に画像編集絡み深掘りをしてみました。その内容は、以下の４点です。

画像にボーダーをつける

ボーダーとは、画像の周りに枠線、即ちボーダーと呼ばれる枠をつけることを意味しています。今回、その枠線の太さ（幅）を15ポイントの青色の直線で囲ってみました。

その枠線は、上下左右の4箇所の個々の設定如何で、枠の付き方が変わってきます。「左と下」に15ポイントを設定することで、左上図のようなボーダーが引かれます。

枠の引く位置を「上と右」で枠の色をグレイに設定したら左図のようになりました。

画像にボーダーをつける代わりに、ブラックシャドウ（影）をつけてボーダーと同じような効果を得られます。

ブラックシャドウは影をつけることを意味しますが、ぼかしを「０」にすると影でなくて前記のボーダーみたいになります。

ボーダーでなくて「影」にするには、ぼかしを「10」ぐらいに設定すると、画像そのものが立体的に見えるから不思議です。

２枚の画像を下図のように重ねて表示したい時があります。
先ず、２枚の画像をページに挿入します。

そして、「画像を編集」～「レイアウト」～「位置」を「絶対」にして画像の上にオンマウスすると画像をドラッグして好きな場所に移動できます。

この機能を２枚の画像のそれぞれに機能させて画像を重ねることが可能となります。

Z-indexの値で重なった画像のどちらを上にするかが制御できます。Z-indexの値（数値）が大きほど重なった表面に来るように重なります。

今回、画像の上に見出しテキストを重ねて表示してみたいと思います。
画像は、画像ウジェットで挿入するのではなく、カラムの背景に画像を入れるのがミソです。そして、そのカラム上にスペーサーを被せると高さの出る画像が現れます。

セクションのレイアウトで「垂直方向に整列」で、右側の見出しテキストが右側カラム内で縦方向の真ん中位置に来る。

右側のカラムに見出しウジェットを挿入して、高度な設定のマージンの左に-100ぐらいの値に設定すると、画像の上に見出しテキストが重なります。

トリミング対象の元の画像が正四辺形なら、Elementorの画像編集の中の「枠線の丸み」の設定のみで、下記のような正円にトリミングした画像表示が可能です。その場合の枠線の丸み＝160ぐらいで正円になります。

そもそも「枠線の丸み」とは、四角い画像の角を丸くする機能です。その丸みの度合いを大きくすれば円形になると言うことです。