How to Add a GIF in Elementor

GIFs are great ways to add attention-seeking images to your blogs and pages. They can help increase engagement and keep audiences on your website for longer. However, if you add an animated GIF to your WordPress website, there is the common problem that the animation is lost.

The reason for this is that WordPress automatically generates multiple sizes of the images, but it will only do so from the first frame of the animation. Therefore, the images that are saved are just the first frame of the animation.

That doesn’t mean that it can’t be done. Instead, you want to be using Elementor and get the website builder to help you build a better design where you can easily add GIFs without a problem.

The first step for anything is that you’re going to have a new page or open up a page/blog post for editing. Once inside there, you need to create a new image section or go to the image section where you would like the GIF to be added.

Ensure that you go into the section where you can add a new image into this section. Then you can click on the ‘Upload’ button and select the GIF from your computer. Alternatively, you can select the ‘Media Library’ option and choose a GIF that has already been added to your website.

Do not use the link to your GIF by clicking on the option to ‘Insert from URL’. From experience, this doesn’t help you to upload GIFs and is better for static images.

The GIF should take several moments to install. Then you will need to select the ‘full size’ option from the ‘Image Size’ option on the right-hand side menu.

The full-size image is the original animated GIF you uploaded by you a moment ago. Using this option prevents WordPress from using static images and not playing the animation.

When you’ve completed the changes that you want on your website, you can update or publish the page. Then you should visit the page to check that the GIF is working.