Додавання кругового лічильника.

Вивчення DXPR BuilderСтворення сторінокДодавання вмістуДані й анімація

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

Круговий лічильник із фіолетовою дугою прогресу, заповненою на 78%, значком діаграми та міткою Renewal rate

Додавання кругового лічильника

Відкрийте свою сторінку, увійшовши до сайта: елементи керування конструктором з’являються, коли ви наводите вказівник на область вмісту. Основи показує сторінка Ваша перша сторінка.

  1. Наведіть вказівник на стовпець і натисніть + на його панелі керування або натисніть Додати елементи на порожній сторінці. Відкрийте вкладку Вміст і натисніть Круговий лічильник. Він з’явиться вгорі стовпця, і відкриється діалог його налаштувань.
  2. Перетягніть повзунок Відсоток, щоб задати заповнення кільця, або введіть значення в поле поруч із ним. Тут ми задаємо 78.
  3. Виберіть колір дуги в полі Колір переднього плану.
  4. Відкрийте розділ «Вміст кола» й введіть мітку Текст для метрики.
  5. У полі Значок нижче введіть chart у полі Пошук і натисніть значок у сітці.
  6. Натисніть Зберегти у діалозі. Потім натисніть Зберегти на панелі інструментів угорі області вмісту, щоб зберегти сторінку.

Що ви бачите

Кільце заповнюється до заданого вами відсотка, а ваші значок і мітка містяться посередині. У відео воно фіолетове, заповнене на 78 відсотків, із написом Renewal rate. Кільце анімується, коли прокручується в область перегляду. Відвідувачі побачать його, коли ви збережете сторінку й її буде опубліковано.

Налаштування кругового лічильника

Наведіть вказівник на елемент і відкрийте Більше > Налаштування на його панелі керування. Параметри:

  • Відсоток: заповнення кільця від 0 до 100.
  • Розмір: розмір кола в пікселях від 100 до 500.
  • Колір переднього плану: колір заповненої дуги.
  • Колір тла: колір порожньої доріжки.
  • Колір заливки: колір усередині кола.
  • Ширина переднього плану: товщина дуги.
  • Анімація: заповнює дугу з нуля. Тривалість анімації і Затримка анімації задають час у мілісекундах.
  • Анімація в області перегляду: чекає з анімацією, доки коло не прокрутиться в область перегляду.

Кожен повзунок має поле з числом поруч для точних значень. Розділ Вміст кола визначає, що показується посередині:

  • Показувати прогрес: показує число відсотка замість ваших тексту й значка. За промовчуванням вимкнено.
  • Текст: коротка мітка. Розмір шрифту і Колір тексту її оформлюють.
  • Інформація: менший другий рядок під текстом.
  • Значок: значок перед текстом. Розкривний список біля поля Пошук обмежує сітку одним набором значків. Розмір значка і Колір значка його оформлюють.

Якщо ви його не бачите

  • Кругового лічильника немає на вкладці «Вміст». Ваш профіль користувача його приховує. Попросіть адміністратора увімкнути його в розділі Профілі користувачів.
  • Він зник після перезавантаження. Сторінку не було збережено. Додайте його знову й натисніть Зберегти на панелі інструментів угорі області вмісту.
  • Кільце бліде або відсутнє. Колір переднього плану і Колір тла надто близькі до кольору сторінки. Наведіть вказівник на елемент і відкрийте Більше > Налаштування, потім виберіть кольори з більшим контрастом.
  • Кільце не анімується. Анімація вимкнена, або кільце чекає, доки прокрутиться в область перегляду. Увімкніть Анімацію і прокрутіть коло в область перегляду.
  • Ваші текст і значок не показуються. Показувати прогрес увімкнено, тож кільце показує відсоток замість них. Вимкніть Показувати прогрес у розділі Вміст кола.

Що далі?

Вкладка «Стиль», щоб змінити відступи й тло свого кругового лічильника.