A GIF is an image file format commonly used for images on the web and sprites in software programs. In simple words, GIFs are a series of images or soundless video that loops continuously and doesn't require anyone to press play. Learn how to insert a GIF to your site to relieve a text-based content and add animated elements to attract the attention of your users.

Important: This option is available for Pro sites only.

Finding a GIF

There are plenty of platforms that allow you to store, download, and share short animated images. Most of them allow you to embed the image using the iframe tag — you can find this information in the Help Center of the relevant app. However, the GIF will consist of the third-party service's branding and most likely will stand out from the overall design of your site.

We've gathered the most popular apps to show you how you can embed the GIF to Weblium without any mentions.

Accessing the GIF address on GIPHY

Open the GIPHY app, choose the needed GIF from the database or upload your own to the platform.

Select a GIF and click Copy link in the right menu:



Copy the GIF Link in the pop-up window to your clipboard:

Accessing the GIF address on Imgur

Open the Imgur app, choose the needed GIF from the database or upload your own to the platform.

Click on the GIF with the right mouse button and select Copy image address in the opened menu:

Accessing the GIF address on Gfycat

Open the Gfycat app, choose the needed GIF from the database or upload your own to the platform.

Open a GIF and click the paper airplane sharing button in the corner of the page:



Choose the GIFs option on the text hover:



Copy the preferred URL in the new window:

Inserting a GIF to your site

Firstly, open the site's editor and navigate to the page where you want to add the GIF to.

Then, choose the Embed code block from the gallery:



... or add the Embed code element to the existing blocks:



Then, hover over and click on a “gear” in the block:



Paste the address into the Code snippet / HTML tab and add the following code around the address:

<img src="Your address here.gif">

Here's how the code should look like:



Note: If you're comfortable with HTML manipulations, you can make your GIF responsive by adding an extra code of your choice.

Hit the Save button and publish your site for the changes to take an effect.

Done! Here's how your GIF will look as an embedded element:



Tip: If you want to center your GIF on the page, firstly, add the class="center" attribute just before the closing > in the <img> tag. Then, insert the following code in the CSS tab:

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Important: Questions regarding custom code modifications or troubleshooting fall out of the scope of our support team. In case you need some assistance, contact the support of the third-party service you're using.

Updated on: 02/09/2023