Image

The Image Widget allows you to add, style, and control images anywhere on your Elementor-powered page. It’s perfect for displaying visuals like photos, illustrations, icons, or promotional graphics with customizable styling options and responsive settings.

Whether you’re designing a portfolio, landing page, team section, or feature showcase, the Image Widget makes it easy to present images with precision and style.

Key Features:

• Add up to three responsive images
• Choose from multiple layout styles
• Control visibility for different devices
• Customize box styling, spacing, border, and shadows
• Fully responsive and optimized

🚀 How to Enable the Image Widget

To start using the Image Widget, follow these steps:

1. Navigate to your WordPress dashboard.
2. Go to Topper Pack → Widgets.
3. Locate the Image widget from the list.
4. Toggle the switch to “On” to enable it.
5. The widget is now available in the Elementor editor.

🧩 How to Use the Image Widget in Elementor

Step 1: Add the Widget to Your Page

1. Open your desired page using Elementor Editor.
2. Search for “Image” in the Elementor widget panel.
3. Drag and drop the Image TP widget onto your page canvas.

🔄 Tip: It includes the TP badge, which means it’s from the Topper Pack.

Step 2: Select Image Style

• After inserting the widget, scroll to the Style → Styles panel.
• Choose a layout style from the predefined style library. This controls how your images are visually arranged and displayed.

Step 3: Upload and Configure Images

1. Under the Style → Image section:
   • Use the Enable Image toggle to activate each image slot (Image One, Two, Three).
   • Choose the Image Resolution (e.g., Medium 300×300, Large 1024×1024).
   • Click Choose Image to upload or select an image from the Media Library.
2. Set visibility settings:
   • Use the Image Visibility dropdown to control where the image appears (Desktop, Tablet, Mobile).
   • Adjust the Gap and Direction (left/right alignment) for spacing and layout flow.

Step 4: Style the Image Box

• Go to the Style → Box section:
  • Choose Box Direction (row, column).
  • Set Alignment, Gap, and Background Type.
  • Adjust Border Type, Border Radius, and add Box Shadow.
  • Manage Margin and Padding for each side (top, bottom, left, right).

✅ Final Preview and Save

Once your image settings and style options are applied:

1. Click Preview Changes to see how it looks.
2. Hit Publish or Update to save your page.