Adding a GIF

Adding a GIF


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 SiteCliq without any mentions.


Accessing the GIF address on GIPHY

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


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

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

Accessing the GIF address on Imgur

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


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


Accessing the GIF address on Gfycat

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


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

3. Choose the GIFs option on the text hover:
4. Copy the preferred URL in the new window:

Inserting a GIF to your site

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


2. Then, choose the Embed code block from the gallery:

... or add the Embed code element to the existing blocks:
3. Then, hover over and click on a “gear” in the block:
4. 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.

5. 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.



    • Related Articles

    • Adding Images

      Adding images to the site is an excellent way to illustrate what your page is about and attract the customers' attention to your company. With the help of our editor, you can add a picture to almost any of the ready-made blocks. Before you begin, we ...

    • Adding site's background

      A good background creates the tone for the website and complements the content. On SiteCliq, you can add an image, a video or a color to the site’s background, and easily adjust it to your needs. Follow the steps below to add a site's background. ...

    • Adding a slider

      Some blocks on our platform contain a slider allowing you to display images in a carousel where they change manually or automatically. You can add a ready-made slider to your website or enable this mode in existing blocks with a collection. Adding a ...

    • Adding a Before/ After Gallery

      If you want to showcase the changes by comparing 2 images, the Before/ After gallery will be a perfect solution. This functionality suits best for dentistry, beauty industry, construction and interior design companies, etc. The site visitors can pull ...

    • Adding and Setting a Gallery

      Use a gallery on your site to create your photographer portfolio, share some company's event or live photos of your products. Five different layouts will help you to choose the best way to present the images. Follow the instructions below to see how ...