Додавання індикатора прогресу.

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

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

Фіолетовий смугастий індикатор прогресу на 73% із міткою Website redesign

Додавання індикатора прогресу

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

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

Що ви бачите

Смуга з вашою міткою заповнюється до заданого вами значення вибраним вами кольором. Мітка розташована всередині заповненої частини. У відео смугаста смуга показує напис Website redesign і заповнює 73% своєї доріжки. Відвідувачі побачать її, коли ви збережете сторінку й її буде опубліковано.

Налаштування індикатора прогресу

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

  • Мітка: текст на смузі. Також можна натиснути мітку на сторінці й відредагувати її там.
  • Прогрес: заповнення смуги від 0 до 100 відсотків. Стандартно 50.
  • Висота смуги: висота смуги в пікселях. Стандартно 45.
  • Колір заду: колір порожньої доріжки.
  • Колір переду: колір заповненої частини.
  • Анімація зростання: за промовчуванням вимкнена. Коли увімкнена, смуга починається порожньою й заповнюється, коли половина її опиняється в області перегляду.
  • Смуги: Додати смугастий візерунок до смуги додає діагональні смуги. Анімувати смуги (потрібен смугастий візерунок) змушує їх рухатися.

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

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

Що далі?

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