Додавання вбудованої анімації

Ви можете додати вбудовану анімацію двома способами:

Глобально (для всього сайту): одна вибрана анімація буде застосована до всіх елементів на сайті
Локально (для кожного елементу): різні типи анімації буде застосовано для кожного елементу сайту окремо

ПРИМІТКА. Елемент “Код для вставки” не підтримує вбудовану анімацію

Додавання анімації для всього сайту

Перейдіть до панелі “Стилі сайту” (“Website styles”) у конструкторі сайтів. Відкрийте вкладку “Анімація” (“Animations”) та виберіть потрібний стиль анімації (згасання, ковзання, масштабування):

Конструктор сайтів: у розділі Website styles відкрито вкладку Animations

У такий спосіб вибрана анімація буде застосована до всіх елементів і розділів Вашого сайту. Ви можете вимкнути анімацію для певного елемента в його налаштуваннях, наприклад, ось як вимкнути її для текстового елемента:

Конструктор сайту: меню «More options» для налаштування анімації тексту

Після увімкнення або вимкнення анімації, оновіть сайт. Щоб побачити результат, перейдіть у режим попереднього перегляду або відкрийте робочу версію сайту.

Додавання анімації для окремих елементів

Натисніть на елемент і виберіть “Редагувати” (“Edit”) або “Змінити” (“Change”), щоб відкрити його налаштування. Потім знайдіть параметр анімації та налаштуйте все, що потрібно. Наприклад, налаштування текстового елемента:

Редактор сайту: у меню «More options» відкрито налаштування анімації, вибрано Slide

Налаштування зображення:

Конструктор сайтів: вкладка Animation в налаштуваннях зображення виділена

Налаштування кнопки:

І так далі! Увімкнувши анімацію, оновіть сайт. Аби перевірити, як виглядає сайт після внесення змін, перейдіть у режим попереднього перегляду або відкрийте робочу версію сайту.

Додавання анімованих елементів сторонніх розробників

Ви можете вставляти безкоштовні анімації на сайт за допомогою інструментів сторонніх розробників. У цьому прикладі використано анімації Lordicon.

1. Увійдіть у Lordicon і натисніть на будь-яку анімацію, яка Вам подобається; налаштуйте її, якщо потрібно:

Lordicon: кнопка зі стрілкою для відкриття повного редактора конфеті

2. Натисніть на HTML і скопіюйте код:

Кнопка Copy HTML Code в вікні Embed on WEB для анімації hover

3. Тепер відкрийте конструктор сайтів і додайте код для вставки в бажане місце на сторінці.

4. Вставте код анімації в цей елемент і анімація з’явиться на Вашій сторінці:

Кнопка Embed code у вікні вставки коду в конструкторі сайтів

У разі потреби можна змінити розмір елемента коду.

5. Насамкінець оновіть сайт.

Щоб перевірити, як виглядає сайт після внесення змін, перейдіть у режим попереднього перегляду або відкрийте робочу версію сайту.