How to add an animated gif

Animated gifs are a great addition to your design and are proven in increase engagement. Their movement easily draws attention and will add variety to what would normally be a static email.


Topics covered in this article:

Support for animated gifs in email clients

Create your animated gif

Upload the animated gif to the Media library

Add the animated gif to your design

 

 

 

 

Support for animated gifs in email clients


Animated gifs won’t work in all email clients, mainly Outlook 2007 +. An easy workaround for Outlook is to make sure your opening frame is a static image. Send some test emails to see how the animation renders!

 

 

 

Create your animated gif

Create an animated .gif from images or a video. If you have Photoshop, creating one is pretty simple. If not, you might try one of these free online tools.  

http://makeagif.com/
http://gifninja.com/
http://gickr.com/

 

Since animated gifs are created from combining frames into one file you will need to make the gif the exact size for the image area in your Modern Editor design. If you need to resize it to a different size, first do the edits in one of the suggested tools to retain the animation. You won't be able to edit the size and retain the animation if you resize the image in Modern Editor since WordFly does not have access to all the frames in the gif file. Once you have the correct size you can follow the remaining steps in this post to add the gif to your email design!

 

 

Upload your animated gif to the Media library

Upload your animated gif into the Media library:

 

 

 

Add the animated gif to your design

Animated gifs are added to your design just like any other image file.

 

1. Open your design in Modern Editor.

2. Click on an image block from the preview panel (right side).

 

3. Click Browse to select your animated gif in the Media library or paste in the URL for your animated gif in the “src” field.

You can also add an animated gif to text areas of your email. There are two options to add your image in a text editor.

  1. Option 1: Click on any text block to open the Edit Content window on the left panel. In the text editor, select Add > Image. Then paste in the image URL for your animated gif in the src field.
  2. Option 2: Or, select the HTML button to add your animated gif directly in the HTML code. Your image code will look like this example:
    "< img src="http://www.wordfly.com/media/WordFlySchoolReminder_animatedgif.png"

 

 

 

 

Have more questions? Submit a request
Powered by Zendesk