Video Transcript:

► This Video's Contents...

0:00 - Minimum and Recommended EverWeb versions for this video

0:17 - What is GIPHY? with EverWeb

0:32 - Integrating GIPHY  with EverWeb

0:44 - Finding Your GIF

1:04 - Using the Share Option

2:06 - Using the Embed Options

2:20 - Using the Embed Responsive OFF

3:26 - Using the Embed Responsive ON option

For the features described in this video you can use EverWeb version 2.8 or later, but we recommend using the latest version of EverWeb .

If you have ever wanted to add an animated GIF in to your EverWeb made website, you can do so easily with GIPHY, the popular animated GIF app that lets you share, embed and even create your own animated GIFs.

In this video I am going to show you a couple of ways in which you can add an animated gif to your site and how you can  customize the gif to suit your needs.

First go to GIPHY.COM and use the search box to find the animated GIF that you want to use.

Once you have located the GIF you want, click on it.

On the right hand side of the GIF you will see Share and Embed options.

Let’s start by clicking on the Share option. Select the file size that you want to use then click on the ‘Copy GIF Link’ button.

Now go to the page in your EverWeb site where you want to add the link.

In my example, I have created a button that when clicked upon, will display the GIF.

I first select the button, then go to the Hyperlinks Inspector and check the ‘Enable as Hyperlink’ box.

Click on the dropdown for the ‘Link To’ option and select ‘An External Page’.

You can also choose what happens when a visitor clicks on the link by using the Behavior dropdown.

In my example I am going to choose ‘Open in a new window’.

In the URL field, paste in the link from the Clipboard.

Preview to test before publishing.

The second option in GIPHY is to embed the GIF in your site using the ‘Embed’ option. When you select Embed, you can make the animated GIF either fixed or responsive.

Let’s start by choosing the Responsive ‘OFF’ option.

Click on the ‘Copy Code’ button, then go to your page in EverWeb where you want to embed the GIF.

In this example, I am using a fixed Width, Center Aligned, page.

Drag and drop the HTML Snippet widget from the Widgets tab on to the page.

In the HTML Code box, paste in the code from the Clipboard.

Press Apply to finish.

You can adjust the size of the GIF by changing the height or width of the GIF in the code you have copied e.g. I might want to change the width to 280, so I just change the width value in the code.

To keep the proportions of the GIF constant, replace the current Height value with the word ‘auto’.

Remember! If you make changes in the HTML Code box, you must click the ‘Apply’ button for the changes to take effect.

The second option for the animated GIF is the Responsive ‘ON’ option.

Again, you can use this option in either a fixed width or responsive page in your site. In my example, I am going to use a responsive page.

In GIPHY select the Responsive ON option then copy the code to the Clipboard using the ‘Copy Code button.

Next, go to the page in your EverWeb site where you want to embed the GIF, in this example a responsive page.

Drag and drop the HTML Snippet widget from the Widgets tab on to the page.

Now in the HTML Code box, paste in the code from the Clipboard.

Press Apply to finish.

You can see that the GIF scales properly as I change the width of the browser window.

You can customize the look of the GIF by adding margins to the GIF via the Metrics Inspector and you can change the height and width percentages of the GIF by editing their values in the HTML Code then clicking on the Apply button.