How to Use The Elementor Image Widget

Images play a vital role in web design, so you will most likely use the Image Widget a lot while designing your website. Let’s go over all of the settings you can control for this widget.

image widget

Content

  1. Image – Upload an image or choose Dynamic to dynamically use Posts featured image, Site Logo, and Author Profile Picture.
  2. Image Size – Choose the size of the image
  3. Alignment – Set the image Alignment
  4. Caption – Optionally, add a caption to the bottom of the image. Choose to either create a new custom caption or use the current Attachment Caption from the image’s location in the WordPress Media Library.
  5. Link To – Set a link to a custom URL, media file, or no link. Choose “media file” to link directly to the location of the image within your media library. Choose “custom URL” to link to any page on any site. Choose “none” if you don’t want to add a link to the image at all.

Style

  1. Width – Set the Image Width
  2. Max Width – Set the Max Width for the Image
  3. Height – set a specific height for the image. When you set a height, you will be able to choose an Object Fit. The options for Object Fit are:
    • Fill – The image will completely fill the container, regardless of the original dimensions.
    • Cover – The image will expand to fit the entire width of the container, regardless of its original dimensions.
    • Cover – The image will expand to fit the entire width of the container, regardless of its original dimensions.
  4. Hover Animation – Click the dropdown to choose a Hover Animation
  5. CSS Filters – Set CSS Filters: Blur, Brightness, Contrast and Saturation
  6. Opacity – Set the Opacity
  7. Transition Duration – Set the Hover Animation duration
  8. Border Type – Set a Border Type
  9. Border Radius – Set a Border Radius
  10. Box Shadow – Set Box Shadow: Horizontal, Vertical, Blur, and Spread
  11. Caption – Set the Alignment, Text color, Text Shadow, and Typography of the caption.

Note: Blend Modes/CSS Filters do not work with Internet Explorer.

Advanced

Set the Advanced options that are applicable to this widget

在社交網絡上分享它

今天開始使用Elemenor

加入數百萬專業人士,使用Elementor更快、更好地構建WordPress網站

本頁內容