画像ウィジェットの設定

ページ内に画像を配置するときもウィジェットを選ぶだけで簡単に設置できます。

一番基本的な方法として画像ウィジェットです。




基本設定はコンテンツ

[コンテンツ] で、まずは画像を選択し、他にも、リンクの設定や画像にマスクをかけることもできます。また、表示される画質が悪い時はImage Resolutionの解像度を変更することで問題が解決することがあります。





詳細設定をスタイルで

[スタイル] では配置(左・中央・右)の指定、サイズで幅、幅の上限、高さを決めることができます。ここで高さに数値を入力するとObject Fitという項目が数値を入力した下に現れます。「塗りつぶし」「カバー」「含む」から選択でき、これは取り込んだ画像を縦横どこで合わせて表示させるかを設定できます。





他にも、マウスオーバーした時の効果、アニメーションを付与できたり、不透明度変更、CSS Filterからパネルを開き、明るさや彩度等の変更したりもできます。

また、枠線も選ぶことができます。枠線の丸み(border-radius)は角毎にそれぞれ設定が可能です。
上:左上の角
右:右上の角
下:右下の角
左:左下の角

画像ウィジェットのスタイルでは枠線が設定できるので、高度な設定と合わせ二重で異なる線で囲うことも可能です。


まとめ

Web制作で気をつけたいところとして、画像選びはサイトのクオリティの大部分を占めるという点です。項目にあった写真、明るさ、他のセクションで使用の写真との統一感など、少し気にすることでサイトから受ける印象が大きく変わります。



次回:そのほかの基本的なウィジェット

recent post

わざわざカラムを分ける必要なし!テキストの「段組み(カラム分割)」機能

スクロールで背景が動く!プロっぽい「パララックス(視差効果)」の作り方(後編)(※Elementor Pro)

スクロールで背景が動く!プロっぽい「パララックス(視差効果)」の作り方(前編)

ファーストビューに最適!画面ぴったりに表示する「100vh」の設定

Elementorで文字をくるっと丸く曲げる!テキストパスの活用法

Making Design Make Sense.
デザインを、感覚から理解へ。
© Design Decode. 901