How to Create Animated Gifs or Images

A lot of clients have expressed interest in animated website images, or images that show movement.  Here are three different types of animated images you can use on your website.  

1. Create a new page or post inside your website.  We chose a post for this page. We used an editor to enable easy content creation and editing.

2. Add a row, if you're using an editor 

3. Add an image, and place that image into your row

4. Find the animated image you want on sites like shutterstock.com or giphy.com. Sites like giphy.com typically enable you to copy a link, embed the image by source code, or download. Shutterstock will have a fee-based license per image. The site we used below, was giphy.com.

In the first two images below - we used the external URL link functionality.  Note that the first two images, and one of the images below, do not show GIPHY as the owner of that image, nor do they link to that original sourced image.  So, be sure you have an understanding and documentation of whether or not that particular image is open source and not copyright restricted. 

The last two images use an embed code feature, which require us to insert a row in the editor, insert Custom HTML, and place the animated giphy code. Some of the embedded images have the option of responsive. It's set to "OFF" as default. Note the last image on this page is a responsive image from giphy.com.

The above image is using a responsive ON setting for the embed image source code.  Ironically, the image is larger on a laptop/desktop screen.