How to Add an Image in Elementor

Adding an image to your website with Elementor is quick and straightforward. Follow these steps to insert an image using the Elementor editor:

Step 1: Open the Elementor Editor

  • Log in to your WordPress dashboard.
  • Navigate to the page or post you want to edit.
  • Click Edit with Elementor to launch the Elementor editor.

Step 2: Add an Image Widget

  • In the Elementor editor, locate the Widget Panel on the left side.
  • Search for the Image widget by typing “Image” in the search bar.
  • Drag and drop the Image widget onto your desired section or column on the page.

Step 3: Upload or Select an Image

  • In the Image widget settings, click the Choose Image button.
  • Upload a New Image: Click the Upload Files tab, then drag and drop your image or click Select Files to upload from your computer.
  • Select an Existing Image: Choose an image from the Media Library.
  • Once you’ve selected or uploaded your image, click the Insert Media button.

Step 4: Customize Image Settings

  • Use the Content tab to adjust basic settings such as:
    • Image Size: Select from preset sizes (e.g., Thumbnail, Medium, Full) or set custom dimensions.
    • Alignment: Align the image to the left, center, or right.
    • Link: Choose whether the image links to a URL, the media file, or no link.
  • Use the Style tab to customize design elements such as:
    • Border: Add borders and adjust their radius.
    • Shadow: Apply shadow effects.
    • Opacity: Adjust the image’s transparency.
  • Use the Advanced tab to add spacing, motion effects, or custom CSS if needed.

Step 5: Save Your Changes

  • After customizing your image, click the Publish button at the top right of the editor to save your changes.
  • Preview your page to ensure the image appears as intended.

Help Center

How can we help?

Table of Contents