Ключевые выводы
- У Elementor нет виджета дорожной карты, поэтому дорожная карта Elementor обычно строится с помощью виджета временной шкалы, где каждый элемент представляет собой одну функцию или фазу.
- Виджет временной шкалы Master Addons позволяет каждому элементу отображать пользовательскую метку вместо даты, что соответствует статусам дорожной карты, таким как "Отправлено", "В процессе", "Далее" и "Исследование".
- Дорожная карта общедоступных продуктов лучше всего работает со статусными этикетками или кварталами, поскольку точные даты на дорожной карте превращаются в обещания, которые помнят клиенты.
- Виджет "Таймлайн" может отображать дорожную карту вертикально с выравниванием влево, по центру, наложением или вправо или в виде горизонтальной карусели со стрелками.
- Сфокусированное состояние на вкладке Стиль виджета Timeline дает предмету, прокрученный посетителем до собственного фона карты и цвета точки.
Страница дорожной карты Elementor показывает клиентам, что вы отправили, что вы строите и что будет дальше. Элементор не включает виджет дорожной карты, но дорожная карта - это временная шкала со статусами вместо дат, поэтому виджет временной шкалы выполняет эту работу. Это руководство использует Виджет временной шкалы Master Addons.
Пример представляет собой дорожную карту программного обеспечения из четырех пунктов: Отправлено, В процессе, Далее и Исследование. Та же самая сборка работает для плана курса, графика строительства или процесса адаптации. Вы настроите элементы, поменяете даты для меток, выберете макет и стилизуйте фазы.
Оглавление
Что находится на странице дорожной карты продукта
На странице дорожной карты продукта перечислены запланированные работы в порядке того, насколько близко они должны быть выпущены. для каждой записи нужны три вещи: статус, короткое имя и одно предложение о том, что получает клиент.
В большинстве дорожных карт общего пользования для определения статуса используется одна из двух систем:
| Система | Пример меток | Используйте его, когда |
|---|---|---|
| Знаки состояния | Отправлено, В процессе, Далее, Исследование | Вы не хотите связываться с датами |
| Ведра времени | Первый квартал 2027 г., второй квартал 2027 г., позже | Вы планируете по квартирам и можете стоять за ними |
| Точные даты | 14 марта 2027 г. | Дата фиксированная, например, событие или запуск |
Метки состояния - самый безопасный выбор для программного обеспечения.Сдвинутая дата на общедоступной странице получает скриншот, и метка, как “Next up” не может соскользнуть.
Как построить дорожную карту в Элементоре
Вам нужны Elementor и Master Addons. сама дорожная карта - это один виджет временной шкалы, установленный на пользовательскую временную шкалу.
Шаг 1: Планируйте этапы
Напишите список перед открытием редактора Четыре-восемь пунктов - это достаточно. для этого примера:
| Этикетка | Особенность | Однострочное описание |
|---|---|---|
| Отправлено | Редизайн оформления заказа | Одна страница оформления заказа с сохраненными корзинами. |
| В процессе | Рабочие пространства команды | Общие проекты, роли и комментарии. |
| Следующий | Мобильное приложение | Приложения для iOS и Android с автономным режимом. |
| Изучение | Публичный API | Веб-крючки и REST API для интеграции. |
Шаг 2: Добавьте виджет "Хронология"
Отредактируйте страницу дорожной карты с помощью Elementor, найдите панель виджетов Хронология и перетащите его на страницу. Сохранить Тип хронологии на Пользовательская временная шкала. Виджет начинается с трех образцов элементов. Использовать Добавить элемент для четвертого или дубликат значка в строке для его копирования.
Новое в виджете? Как создать временную шкалу в Elementor проходит через каждый контроль.
Шаг 3: Замените даты пользовательскими метками
Откройте первый пункт Изменить Шоу от даты до Пользовательская этикетка, затем введите статус в Этикетка поле. в редакторе контента сделайте первую строку заголовком с именем функции и напишите под ней описание.
Повторяйте для каждого пункта. Необязательно Ссылка field делает кликабельной всю карту, что полезно для отправки отправленной функции на ее публикацию или документы.
Шаг 4: Выберите макет
В центральной раскладке выше чередуются карты слева и справа. Две другие раскладки хорошо подходят для дорожной карты.
Левый выровнен. На вкладке Стиль откройте Макет и набор Горизонтальное выравнивание слева. каждая карта находится на одной стороне с меткой внутри нее. Это читается как список, который легче сканировать, когда описания работают дольше.
Горизонтальный. На вкладке Содержимое установите Стиль временной шкалы к Горизонтальной временной шкале. фазы становятся каруселью с метками над строкой. это занимает одну строку, поэтому она помещается на домашней странице или под таблицей цен.
Настройки карусели покрыты как создать горизонтальную временную шкалу в Elementor.
Шаг 5: Стилизируйте фазы
Откройте вкладку Стиль и пройдите четыре раздела.
- Карты: заполнение, радиус границы, а также цвета заголовка и контента. На вкладке "Сфокусированная" размещена карта, к которой прокрутил посетитель.
- Даты: типографика и цвет для меток состояния Жирный шрифт с цветом бренда заставляет их читать как метки.
- Линия: Фон - это полный трек, и цвет прогресса заполняется по мере прокрутки посетителя.
- Очки: точка, значок или изображение с отдельными цветами по умолчанию, наведение и фокусировка.
Каждый элемент также имеет свою вкладку Стиль в панели Содержимое, для настройки точки и цвета только на этом элементе. Используйте его, чтобы придать Отгруженному элементу цвет точки, отличный от остальных, поэтому готовая работа видна с первого взгляда.
Хотите сначала увидеть больше макетов? выше Виджет временной шкалы Elementor у Пейджа есть живые демо, включая горизонтальную дорожную карту.
Что обвести дорожную карту
Страница дорожной карты читается лучше с небольшим контекстом над и под временной шкалой.
- Короткое вступление это говорит о том, как часто страница обновляется.
- Линия обратной связи в соответствии с временной шкалой на форму или доску запросов функций.
- Журнал изменений за то, что уже отправлено. The Виджет Changelogs перечисляет записи версий на той же странице.
- Номераесли они у вас есть. Ряд Встречный виджеты могут отображать функции, поставляемые в этом году.
- Показатель прогресса для одного большого проекта, используя Виджет Прогресс Бар.
Если дорожная карта предназначена только для клиентов, то руководство по условиям отображения показывает, как скрыть раздел от вышедших из системы посетителей.
Часто задаваемые вопросы
Есть ли у Elementor виджет дорожной карты?
Нет. Elementor и Elementor Pro не имеют дорожной карты или виджета временной шкалы. Большинство дорожных карт Elementor построены с помощью виджета временной шкалы из дополнения, при этом каждый элемент используется как одна фаза или функция.
Могу ли я показать дорожную карту без дат в Элементоре?
Да. в виджете временной шкалы главных дополнений установите "Показать на пользовательской метке" на каждом элементе и введите такой статус, как "Отправлено" или "Далее". Этикетка занимает место даты рядом с точкой.
Должна ли дорожная карта общего пользования быть вертикальной или горизонтальной?
Используйте вертикальное, когда каждая фаза имеет несколько строк описания, и горизонтальное, когда дорожная карта представляет собой короткую полосу из трех-шести фаз внутри другой страницы. виджет временной шкалы переключается между ними с помощью элемента управления стилем временной шкалы.
Как отметить пункт дорожной карты?
Измените его метку на Отправлено и дайте ему другой цвет точки на вкладке Стиль самого товара Вы также можете добавить ссылку на публикацию релиза, чтобы посетители могли прочитать, что изменилось.
Заключительные мысли
Дорожная карта Элементора - это один виджет временной шкалы с четырьмя-восемью элементами пользовательской временной шкалы, отображение набора пользовательской метки и статус в каждом поле метки. Выберите центр, левый или горизонтальный для макета, затем используйте разделы "Карты", "Даты", "Линия" и "Точки", чтобы отгруженная работа стояла отдельно от запланированной работы.
Начните с демо-версии Страница виджета временной шкалы и замените образцы элементов своими собственными этапами.
Связанное чтение
