Анімовані числа - це потужний спосіб візуалізації даних та побудови довіри з вашими відвідувачами. Незалежно від того, чи демонструєте ви відсоток виконання проєктів, рівень задоволеності клієнтів або фінансові показники, ці елементи перетворюють статичні дані на захопливий досвід.
Ви можете обрати один із двох типів елементів:
Число:
Статистика, яка складається з таких типів макетів:
- Коло
- Дуга
- Індикатор
- Прогрес-бар
Як додати елемент
Є два способи додати число/статистику (або будь-який інший елемент) на вашу сторінку:
У новому розділі: натисніть на знак плюс (+) у центрі будь-якого порожнього розділу.
В існуючому розділі: наведіть курсор на розділ, щоб відкрити панель керування у верхньому лівому куті, і натисніть на іконку "бургер" (три лінії).
Щойно відкриється список елементів, прокрутіть вниз до категорії «Число» або скористайтеся рядком пошуку, щоб швидко його знайти.
Налаштування контенту та значень
Давайте розглянемо налаштування, які визначають дані, що відображатимуться у вашому елементі. Натисніть на елемент, щоб відкрити налаштування:
Значення: введіть кінцеве число, якого має досягти елемент (наприклад, 50).
Макс.: встановіть загальний ліміт для обчислення. Анімація використовує це значення, щоб визначити, наскільки "зааповнити" коло або смугу. Наприклад, якщо ваше значення 50, а максимум - 100, смуга заповниться на 50%.
Опис: необов'язкове текстове поле для додавання підпису або контексту під числом.
Суфікс та Префікс (тільки для елемента "Число"): дозволяють додавати текст до та після анімованого числа.
Формат відображення: оберіть, як виглядатиме ваше число. Ви можете обрати: Число, Відсотки, Валюта, Відстань, Площа, Об'єм або Маса.
Додати елемент: використовуйте це, щоб згрупувати кілька чисел разом. Якщо ви додасте більше одного, іконка олівця у верхньому лівому куті зміниться на іконку "бургер", що дозволить вам перемикатися між ними та керувати кожним конкретним числом у групі.
Налаштування дизайну та анімації
Щоб змінити візуальний стиль, натисніть на елемент і перейдіть на другу вкладку (іконка шестерні).
Тут ви можете детально налаштувати зовнішній вигляд:
Тип макета: перемикайтеся між п'ятьма різними стилями (Коло, Дуга тощо).
Налаштування макета: регулюйте специфічні параметри геометрії, такі як товщина лінії, розмір фігури, радіус країв та кольори.
Налаштування числа: налаштуйте розмір і колір як основних цифр, так і символу одиниці виміру.
Налаштування опису (з'являються лише якщо додано опис): налаштуйте розмір і колір тексту опису.
Налаштування анімації: керуйте типом руху та швидкістю відліку. Ви також можете скористатися функцією попереднього перегляду, щоб побачити анімацію в дії, не публікуючи сторінку.
Поширені питання та їх вирішення
Коли починається анімація?
Коли починається анімація?
Анімація запускається під час прокручування. Це означає, що числа почнуть відлік лише тоді, коли елемент стане видимим у вікні браузера відвідувача. Якщо елемент знаходиться внизу сторінки, анімація не відтвориться, доки користувач не прокрутить сторінку до нього.
Чи можу я відображати десяткові числа (наприклад, 95.5%)?
Чи можу я відображати десяткові числа (наприклад, 95.5%)?
Так, просто введіть ваше значення та відокремте десяткові числа крапкою.
💡Бажаєте залишити відгук до цієї статті? Будь ласка, напишіть у наш чат або за адресою support@onepage.io, і ми зможемо її покращити. Дякуємо! 🙂