How to Add Image in Elementor

Looking for easier ways to add mages to your WordPress site? Adding images lets you enhance your website, making it more interactive which also appears visually appealing.

In this blog, we are going to show you how to add images in Elementor so let’s get into it.

To Create a page go to the WordPress dashboard > pages > add new

Fig (a) Click on Add New Page

After the page is created it’s time to add a section to it. To Add the Section Click on the ‘ + ’ Icon.

 

add new section click on the plus icon

Fig (b) Click on the Icon to Add the New Section

Now select any structure you like according to your need. We are choosing the plain one for now.

Fig (c) Click on the Structure to Add the New Section

Search the image widget in the search bar and then drag and drop the widget in the section.

Fig (e) Add Image widget to the Section

Images play a vital role in web design, so you will most likely use the Image Widget a lot while designing your website. Let’s go over all of the settings you can control for this widget.

Content

Image – Upload an image or choose Dynamic to dynamically use Posts featured image, Site Logo, and Author Profile Picture.

Image Size – Choose the size of the image

Alignment – Set the image Alignment

Caption – Optionally, add a caption to the bottom of the image. Choose to either create a new custom caption or use the current Attachment Caption from the image’s location in the WordPress Media Library.

Link To – Set a link to a custom URL, media file, or no link. Choose “media file” to link directly to the location of the image within your media library. Choose “custom URL” to link to any page on any site. Choose “None” if you don’t want to add a link to the image at all.

content

Style

Width – Set the Image Width

Max Width – Set the Max Width for the Image

Hover Animation – Click the dropdown to choose a Hover Animation

CSS Filters – Set CSS Filters: Blur, Brightness, Contrast, and Saturation

Opacity – Set the Opacity

Transition Duration – Set the Hover Animation duration

Border Type – Set a Border Type

Border Radius – Set a Border Radius

Box Shadow – Set Box Shadow: Horizontal, Vertical, Blur, and Spread

Caption – Set the Alignment, Text color, Text Shadow, and Typography of the caption.

Note: Blend Modes/CSS Filters do not work with Internet Explorer.

Advanced

Set the Advanced options that apply to this widget

Click on the Content tab of the Edit Section and click on the “choose Image” icon in the image attribute to add an image to the section.

chooseimage

Fig: Choose the Image

Upload the Image 

Click on the Upload Files tab in the Insert Media Pane and select the image you want to Upload

Fig Upload the Image.

Once Uploaded Give it a proper title and alternate text and then click on the” Insert Media “ Button.

Here is the preview of the image once uploaded and styled using the options in the “style tab”

Fig(m) Preview

Alright! Now you know how to add image in Elementor. We hope this guide has helped you.

Feel free to contact us if you need any help regarding this topic. Do let us know the topics you want us to cover in the comment section or reach out to us with your queries by clicking the contact form below.