Image Widget

Share This Post

📸 What It Does

The Image widget allows you to easily place an image into your page layout. It supports both static and dynamic images and offers basic styling controls for customization.


➕ How to Add It

  1. Open the Elementor editor.

  2. Drag the Image widget from the Basic section into your section or column.

  3. Click it to open the content settings and upload or choose an image from your media library.


✍️ Content Settings

  • Image Selection: Upload or choose an image from the media library.

  • Link (optional): Add a URL—choose to open it in the same window or a new one.

  • Size Control: Choose predefined sizes, custom dimensions, or let it adjust automatically.

  • Alignment Options: Align the image left, center, or right within its container.

  • Caption (optional): Display image captions—manually entered or pulled from the media metadata.


🎨 Style Customization

Located under the Style tab:

  • Width & Max Width: Define image width in pixels or as a percentage.

  • Opacity: Adjust transparency levels.

  • CSS Filters: Apply visual effects like blur, brightness, contrast, saturation, and hue.

  • Border: Add border width, style, color, and radius for curved or rounded edges.

  • Box Shadow: Add shadow with control over color, blur, spread, and position.

  • Hover Effects: Choose from zoom, blur, brightness, or grayscale effects to activate on mouseover.


🧭 Advanced Settings

In the Advanced panel, you can:

  • Control padding, margin, z-index, responsive visibility, and custom positioning.

  • Add motion effects or entrance animations.

  • Apply custom CSS, attributes, and HTML anchors for advanced behavior.


📝 Recommended Uses

  • Feature images in hero sections or headers.

  • Illustrate articles, blogs, or product pages.

  • Add decorative or informative visuals within content flow.

  • Use as clickable banners or calls-to-action.


🔧 Pro Tips

  • Use custom dimensions or responsive settings to ensure images load appropriately on different devices.

  • Apply CSS filters or shadows for stylized overlays that enhance brand identity.

  • Enable hover effects only when they add value—like zooming gallery thumbnails or soft highlight transitions.

  • Use captions for accessibility and content clarity.

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

Do You Want To Boost Your Business?

drop us a line and keep in touch

Learn how we helped 100 top brands gain success.

Let's have a chat

Have a Question? Ask us anything.

The right website makes everything else easier — sales, trust, growth.