By following these steps, you should be able to resolve the issue of your images not displaying correctly on your WordPress website using the Elementor Image Widget.
Symptoms:
– An image is not displaying on your WordPress website, leaving a blank space or appearing cropped.
– The WordPress media library displays the image correctly.
– The image displays in Elementor Edit mode but disappears in Preview mode.
– Your browser’s Developer Tools show that the image is being loaded from the server.
Cause:
Incorrect “Style” values in your Elementor Image Widget can result in the image not displaying correctly.
Solution:
To resolve the issue of the image not displaying correctly, follow these steps:
Step 1: Access Elementor Editor
1. Log in to your WordPress admin panel.
2. Navigate to the page where the image is not displaying correctly.
3. Click “Edit with Elementor” to access the Elementor editor for the specific page.
Step 2: Edit Image Widget
1. Identify the Elementor Image Widget that is not displaying the image correctly on your page.
2. Click on the Image Widget to open its settings in the left sidebar.
Step 3: Adjust Image Widget Settings
1. In the Elementor Image Widget settings, locate the “Style” section.
2. Check the values for “Width,” “Max Width,” and “Height.”
Step 4: Recommended Settings
– Set the “Width” to 100% to ensure the image takes up the full available width within its container.
– Set the “Height” to 100% to maintain the image’s aspect ratio and prevent distortion.
Step 5: Save and Preview
1. After adjusting the settings, click the “Update” or “Save” button to save the changes you made to the Image Widget.
2. Preview your web page to see if the image displays correctly.
Additional Resources:
If you need further assistance with using the Elementor Image Widget, refer to the Elementor Image Widget documentation.
If you encounter any other issues or need more advanced customization, consider reaching out to the Elementor support or community forums for expert help.
