Elementor: How to Make Image Full Width

There are numerous advantages of an image on a website. For instance, you can add meta tags to the image that can improve the website’s SEO ranking. Though this can be done by using Yoast SEO and some alternative SEO plugins, these will all mention having an image on a website with the right details.

In addition, websites with images convert more visitors. The exact figure of the growth can be very challenging to judge. The size of the image, the quality, and even the placement can have a massive impact on the success rate of the image conversion.

Another bonus of images on a website is that they can break up text on a page. Therefore, users are more enticed to stay on the website and read more. Improving the visitor time on Elementor websites allows you to have more chances to convert them and improves website performance on search engines.

Of course, there are always some disadvantages to images on a website. For instance, images require a lot more memory space than other forms of content (except video and audio). More memory requires more loading time.

Loading time can have a massive impact on your website’s conversion, with every second loading costing your website 7% in revenue. Therefore, you need to optimize images so they take less memory. One option is to use a tool like RIOT to minimize the memory. Another option is to change the file format to WebP, which is a web format for images that utilizes much less space.

Another option is lazy loading, which is where images are only loaded as they’re required. So if they’re below the fold, the image isn’t loaded to the browser until the user reaches down there.

Full-width images can be particularly enticing. They can fill blank spaces and improve a website’s general appearance.

To do this on Elementor, it is relatively simple. You need to set the image as the background to the section and then you want to set the position to ‘center’ and ‘repeat’ to ‘no repeat’. This can be found in the image settings on the image widget in the Elementor widget sections. Just be sure to drag it into the right space on the website.

If you want to have the image as a full-size hero, then you might need to set the height to 100vh.