How to embed a gif in wordpress

New Page

How to add animated .gif images to your website

  • 4 months ago
  • Updated

Follow

You can add some action to your page with animated gifs (.gif file format). They are perfect for showing your products in different dimensions, adding an animated image with a promotion or bringing movement to your event with a short video without having to embed the video file. 

Adding an animated .gif image

Here’s how to add a gif to your site:  

  1. Click on the image you want to replace with a gif to activate the image controls.
  2. Click the Upload Image icon and then click the Upload File option from the drop-down menu.no-logo-add-gif-1.png
  3. When your computer’s storage opens, locate the gif you want to upload, click it, and then click Open . In a few seconds your gif will be downloaded as part of the image. 

Customize your gif

After downloading the animated gif, you may find that it doesn’t match the picture frame perfectly. The good news is that you can adjust the position of gifs the same way as the rest of the images.

You can crop them, resize them and change their focal point like in the video below. 

Note: Although animated images add movement and context to your page, it’s a good idea to use them sparingly.

  • Facebook
  • Twitter
  • LinkedIn

Did you find this article useful

0 out of 0 found this helpful

You have more questions ? Submit a request

back to the top

Related Articles

  • Adding images
  • Recommended image sizes
  • Creation of several lines of company logos
  • Add videos to your page
  • Add a form

comments

0 comment

Please sign in to leave a comment.

How to embed a GIF

  1. On giphy.com or the GIPHY mobile app, click on the selected GIF.
  2. Once you click on the selected GIF, you will be directed to the GIF detail page.
  3. Click “< > Embed” located on the right hand side of the GIF.
  4. From there, you will be presented with two embed options via the GIPHY Embed Player:
    1. Select the “Responsive Off” switch for the iFrame embed version.
    2. Select the “Responsive On” switch for the HTML5 embed version
  5. Paste the code into your post and publish!     

¿Te resultó útil este artículo

Related articles

  • How to Send GIFs, Stickers, and GIPHY Text in iMessage
  • GIPHY Privacy Policy
  • How To Use GIFs in Instagram Stories
  • Get Your GIFs & Stickers Into GIPHY’s Search
  • How to use GIPHY Sticker Maker

Cómo agregar un GIF a WordPress

Publicado en Marketing por Samantha Rodriguez

Última actualización el 1 de febrero de 2022

Captar la atención de las audiencias en línea puede volverse cada vez más desafiante a medida que aumentan las opciones de entretenimiento. Incluir elementos dinámicos en formas pequeñas y sencillas puede ser una forma eficaz de atraer a los usuarios objetivo a su contenido. 

Esta es una de las razones por las que agregar GIF animados a su sitio web puede ser útil. Ya sea que los cree usted mismo, los compre en línea o los obtenga de un repositorio gratuito, los GIF pueden ser una forma divertida de transmitir significado y aumentar el compromiso. 

En este artículo, cubriremos cómo agregar un GIF a su sitio web de WordPress. También le proporcionaremos una guía de solución de problemas, en caso de que tenga algún problema. Si estás listo, ¡comencemos!

Cómo agregar un GIF a WordPress en 5 sencillos pasos

Agregar un GIF a su sitio web puede parecer un proceso bastante sencillo. Sin embargo, existen algunos trucos para asegurarse de que la animación realmente funcione. Con eso en mente, en los siguientes pasos recorreremos el proceso de agregar un GIF funcional a su contenido de WordPress.

Paso 1: optimiza tu GIF

Al igual que con sus otras imágenes y medios, querrá asegurarse de que sus GIF no reduzcan la velocidad de carga de su sitio . Puedes evitarlo optimizando tus GIF con una herramienta como Compressor.io : 

Dar este paso ayudará a que su sitio funcione sin problemas y rápido. Eso es especialmente importante si planea alojar sus medios en el servidor de su sitio web, en lugar de en un host de medios separado o en una red de entrega de contenido (CDN) .

Paso 2: agrega un bloque de imagen a tu página

Une fois que vous avez préparé votre fichier GIF, vous pouvez ouvrir n’importe quelle page ou publication dans WordPress et ajouter un bloc d’image à l’aide de l’icône Ajouter un bloc :

Vous pouvez également saisir “/Image” dans la zone vide :

Either method inserts a block that serves as a placeholder for a media element on your page.

Step 3: upload your GIF file

You now have three options for placing a GIF on your page. We will talk about the media library later. For now, choose Import:

With this option, you can upload your new GIF directly to your post.

Step 4 – Adjust Image Size Settings

Once you have placed the GIF in your content, you will need to go to the right side of the editing window and scroll down to image size. By default, it will likely be set to Large. To keep the GIF animation, you’ll need to choose Full Size instead: 

Setting your GIF to full size will ensure that it doesn’t display as a static image. 

Step 5 – Insert your GIF from the media library (optional)

If you’ve already uploaded your GIF to your site’s media library, you can choose the Media Library option instead after adding a new image block:

Once in the Media Library, you can select the GIF you want to insert into your content:

You can then adjust the GIF’s settings as in the example above, to ensure it displays at its maximum size.

At this point, your GIF should be playing its animation on the page as part of WordPress’ live preview feature. However, if your GIF is not working properly, you can refer to the troubleshooting information below. 

How to Fix Common GIF Problems

As we discussed earlier, GIFs can be a dynamic and fun way to grab your readers’ attention and convey meaning. However, you may encounter some common issues when integrating them into your content. Here are some of the most frequently asked questions about GIFs.

1. Can I use GIPHY GIF on my website?

The answer to this question is both yes and no. GIPHY is an online repository for posting GIFs. The site also offers free software that you can use to create your own GIFs.

However, as with other forms of digital content, it is important to know the rules. If you want to use a GIF that you find on GIPHY that you did not create, you must follow the Digital Millennium Copyright Act in accordance with GIPHY’s Usage Policy. This means that you cannot use someone else’s personal or copyrighted intellectual property for commercial purposes.

GIPHY makes it easy to embed content on your website by providing a shareable link. Still, it’s best to research the content you want to use before putting it on your site.

2. Can I copy and paste a GIF in WordPress?

If the GIF you want to use is active on the Internet, you can right-click on it and copy the image. You can then paste it into a WordPress post or page.

It’s important to note that this method does not add the actual GIF file to your media library, but rather links to it via its URL. This is something to keep in mind, as you won’t have any control over the GIF. If the owner deletes or modifies it, it will affect its content. 

3. Why did my GIF stop moving?

When a previously working GIF stops moving, there are several possible causes. Depending on the tool the GIF was created with, there may be a limit to the looping function. If the GIF has not been set to loop infinitely, it may stop on its own after a while.

Also, your website or browser code may have interfered with the display of the GIF. You can try viewing the GIF in another browser or on another device to determine if this is the case.

4. How do I fix my GIF animation?

Finding the cause of your GIF problem is the first step in resolving any malfunction. Always check that your GIF file is set to Full Size in WordPress.

If you copied and pasted the GIF, you may need to check the location of the original file to see if it still works. Otherwise, your GIF probably won’t work either. Ultimately, creating your own GIFs and storing the files safely is the best way to avoid unwanted problems. 

Customize your site’s experience with WP Engine

The flexibility and diversity of WordPress design options are just two of the reasons it’s such a great content management system (CMS). With the right development tools and resources, you can create a unique and engaging experience for your website visitors.

Of course, your content will shine brighter if it’s backed by a reliable web host. Check out our different WordPress hosting options and take your website to a new level of functionality!


Video How to embed a gif in wordpress

Related Posts

How to add seo keywords in wordpress

Contents1 Cómo agregar palabras clave de SEO en WordPress (aumentar el CTR y las clasificaciones)1.1 Post Title1.2 Headline1.3 Header Tags1.4 Introduction and Conclusion1.5 Body Copy1.6 URL1.7 Meta…

How to embed google calendar into wordpress

Contents1 How to Add a Google Calendar in WordPress (Step by Step)2 Add a Google calendar to your website3 calendario de Google3.1 Versatile plans and pricing4 Video…

How to change the logo in wordpress

Contents1 How to Add a Custom Logo to Your Site Header2 Site Logo2.1 Planes y precios versátiles3 Add, remove or edit a custom logo4 Video How to…

How to add a popup on wordpress

Contents1 Easily create a WordPress emergent form (2 forms)1.1 ¿Por qué usar un formulario emergente de WordPress?1.2 Método #1: Crear un formulario emergente con OptinMonster + WPForms1.3…

How to roll back wordpress version

Contents1 How to Revert WordPress: Undo WordPress Updates (Easy Way)2 How to Downgrade WordPress & Roll Back to a Previous Version2.1 1. A WordPress update included significant changes…

How to rollback wordpress version

Contents1 How to Downgrade WordPress and Revert to an Older Version1.1 1. A WordPress update included significant changes that are not compatible with your theme or plugins1.2…