📸 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
Open the Elementor editor.
Drag the Image widget from the Basic section into your section or column.
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.
