GIF — це рухомі зображення або відео без звуку, які безперервно відтворюються в автоматичному режимі. Дізнайтеся, як вставити GIF на свій сайт, щоб полегшити текстове навантаження і додати анімовані елементи.

Важливо: ця опція доступна лише для Pro сайтів.

Пошук GIF-зображення

Існує безліч платформ, що дозволяють зберігати, завантажувати і обмінюватися короткими анімованими зображеннями. Більшість з них дають змогу додати такі зображення на сайт за допомогою тега iframe — цю інформацію ви можете знайти в довідковому центрі відповідного сервісу. Проте зображення буде містити брендинг стороннього сервісу і, швидше за все, буде вирізнятися серед загального дизайну вашого сайту.

Ми зібрали найпопулярніші програми, щоб показати вам, як ви можете додати GIF-зображення на свій сайт на Weblium без будь-яких зайвих згадок про інші сервіси.

Доступ до GIF-адреси на GIPHY

Відкрийте GIPHY, оберіть потрібну GIF-ку з каталогу або завантажте власну.

Оберіть GIF-ку та натисніть Copy link у меню справа:



Скопіюйте GIF Link у новому вікні:



Доступ до GIF-адреси на Imgur

Відкрийте Imgur, оберіть потрібну GIF-ку з каталогу або завантажте власну.

Натисніть на зображення правою кнопкою миші та оберіть Copy image address у списку:



Доступ до GIF-адреси на Gfycat

Відкрийте Gfycat, оберіть потрібну GIF-ку з каталогу або завантажте власну.

Відкрийте зображення та натисніть на іконку паперового літака в кутку сторінки:



Оберіть опцію GIFs у новому вікні:



Скопіюйте потрібне посилання:



Додавання GIF-зображення на свій сайт

Зайдіть у редактор сайту та відкрийте сторінку, де ви хочете розмістити GIF-зображення.

Додайте блок Сторонній код з галереї:



... або додайте елемент Вбудований код до наявного блоку:



Наведіть на доданий елемент або блок та натисніть на шестерню:



Вставте адресу у вкладку Code snippet / HTML та додайте наступний код навколо посилання:

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

Ось як має виглядати код:



Примітка: якщо ви знаєтеся на HTML, ви можете зробити GIF-ку більш адаптивною за допомогою додаткового коду на власний розсуд.

Натисніть Зберегти та опублікуйте свій сайт, щоб відобразити на ньому зміни.

Готово! Ось як буде виглядати ваше зображення як елемент у блоці:



Підказка: якщо ви хочете відцентрувати ваше зображення на сторінці, додайте атрибут class="center" перед > у попередньому тегу <img>. Потім додайте наступний код у вкладку CSS:

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


Важливо: питання щодо стороннього коду, його зміни або доопрацювання, не можуть вирішуватися командою підтримки Weblium. Якщо вам потрібна допомога, зверніться до підтримки сервісу, який використовуєте.
Чи була ця стаття корисною?
Скасувати
Дякуємо!