Viewing Dynamic Image widget
Step 1 – Open your page with Elementor page builder, find the Dynamic Image widget and drop it in the working area.
Step 2 – Open the Content tab > Content accordion block and in the first dropdown you can see the Source dropdown. Here you can set the source from which you need to pull the thumbnail image (e.g., Thumbnail, Post Thumbnail).
Step 3 – You can also pull out the image from the custom post with the help of its ID which you have to enter in the Or enter custom meta field key text field.
Step 4 – Specify the size of the image by clicking one of the options in the Image Size dropdown.
Step 5 – In case you want to make the image clickable, toggle the Linked image option to Yes.
Step 6 – Move down to the Link Source dropdown and select the link that will be applied for the image (e.g.permalink).
Step 7 – In the event that you want to pull out the link from the custom post, enter its ID in the next Or enter post meta field key text area.
Step 8 – Enable the Open in new window option so that the link opens in a new window in your browser.
Step 9 – Specify the relationship between the image and the linked page with the help of Add “rel” attr option.
Step 10 – Set the alignment for the dynamic image item in the Alignment option.
Step 11 – Use the Hide if value is empty option in order for the field to be hidden if it’s not filled.
Step 12 – Add a Fallback image in JPG, GIF or PNG formats that will be displayed if the device, software or browser that the image is displayed on doesn’t support HTML5.
Step 13 – Open the Style tab and customize the only two available options – Border Type and Border Radius.
Step 14 – When everything is set click the Update button below to save the changes.
Great! Use knowledge from this tutorial by using JetEngine functionality.