Image Banner (General Elements)

The Image Banner widget allows you to display an image with an optional title overlay and link, perfect for highlighting featured areas, categories, or promotions on your real estate website. Use it when you want a strong visual element to draw attention to specific sections of your site.

How to Add the "Image Banner" Widget

1. Open the page in Elementor where you want to add the banner.
2. Search for Image Banner in the Elementor sidebar.
3. Drag and drop the widget into your desired section.

Configuration Options

Content Tab

• Choose Image: Upload or select the image you want to display.
• Image Resolution: Choose the image size (Full, Medium, Thumbnail, etc.).
• Text: Add a title overlay on the image.
• Link: Set the image to link to a page, external URL, or none.

Style Tab

• Image:
  • Width, Max Width, Height
  • Object Fit (Default, Cover, Contain)
  • Normal & Hover states (opacity, CSS filters)
  • Border Type, Border Radius, Box Shadow
• Text:
  • Typography (font, size, weight, style)
  • Color (normal and hover states)

Best Practices

• Use high-quality, optimized images to maintain performance.
• Ensure overlay text is readable by using contrasting colors or subtle image filters.
• Link banners to relevant pages (e.g., property searches, categories, or promotions).
• Keep titles short and clear for better user engagement.