Ключевые выводы
- Elementor и Elementor Pro не имеют виджета временной шкалы, поэтому горизонтальной временной шкале Elementor требуется виджет-дополнение или ряд контейнеров ручной сборки с пользовательским CSS.
- Виджет временной шкалы Master Addons переключается с вертикального на горизонтальный с помощью одного элемента управления, стиля временной шкалы, который находится на вкладке "Содержимое" в разделе "Хронология".
- Горизонтальная временная шкала в виджете Master Addons представляет собой карусель, а его управление навигацией предлагает шесть вариантов: стрелки и точки, стрелки и дробь, стрелки, точки, прогресс и нет.
- Настройки карусели в виджете Timeline включают макет карусели или Coverflow, автозапуск со скоростью по умолчанию 5000 мс, паузу при наведении, слайды для прокрутки, центральный слайд и цикл.
- Горизонтальный макет работает только с элементами пользовательской временной шкалы, поскольку временная шкала публикации, построенная из сообщений в блоге, остается вертикальной.
Горизонтальная временная шкала Элементора указывает даты слева направо, с точкой на линии над каждой картой и стрелками для перемещения по ней. Элементор не имеет собственного виджета временной шкалы, поэтому в этом руководстве используется Виджет временной шкалы в главных дополнениях, где горизонтальная компоновка представляет собой одно раскрывающееся изображение.
Шесть шагов ниже начинаются с обычной вертикальной временной шкалы и заканчиваются рабочей каруселью. каждый скриншот приходит от Elementor 4.3 с виджетом на тестовой странице. если вы еще не разместили временную шкалу, полное руководство по хронологии сначала охватывает основы.
Оглавление
Когда горизонтальная временная шкала является лучшим выбором
Используйте горизонтальную временную шкалу, когда у вас есть короткий пробег шагов и ограниченное вертикальное пространство Вертикальная временная шкала с тремя картами может занять более чем полный экран прокрутки Те же три карты, расположенные рядом, подходят в один ряд, поэтому горизонтальные макеты появляются на домашних страницах и целевых страницах, а вертикальные подходят длинным страницам О страницах.
| Фактор | Горизонтальная временная шкала | Вертикальная временная шкала |
|---|---|---|
| Лучшая длина | от 3 до 8 предметов | Любая длина |
| Пространство, которое ему нужно | Один ряд | Растет с каждым элементом |
| Как перемещаются посетители | Стрелки, точки или свайп | Прокрутка страницы |
| Типичное использование | Этапы процесса, дорожная карта продукта, годовые обзоры | История компании, журнал изменений, длинная история |
| Источник в Master Addons | Изготовленные на заказ элементы временной шкалы | Пользовательские элементы или сообщения в блоге |
Горизонтальная временная шкала - это своего рода карусель. если вы не уверены, какой из двух терминов соответствует вашему дизайну, карусель против слайдера в Элементоре объясняет разницу.
Как создать горизонтальную временную шкалу в Elementor
Вам нужно Elementor и Master Addons установлены, затем шесть шагов в редакторе Ничто ниже не нуждается в пользовательских CSS.
Шаг 1: Добавьте виджет "Хронология"
Откройте свою страницу с помощью Elementor, найдите панель виджетов Хронология и перетащите его на страницу. Он приходит как вертикальная временная шкала с тремя образцами элементов. Оставить Тип хронологии на Пользовательская временная шкала, потому что горизонтальная компоновка предлагается только для нестандартных предметов.
Шаг 2: Переключите стиль временной шкалы на горизонтальный
На вкладке Содержимое откройте Хронология раздел и изменение Стиль временной шкалы от вертикальной временной шкалы до Горизонтальная временная шкала. Карты перемещаются в ряд, линия проходит вверху, и каждая точка находится над своей картой с датой над ней. На панели появляются два новых раздела: Навигация и Настройки карусели.
Шаг 3: Отредактируйте элементы
Щелкните строку ниже Предметы чтобы открыть его. каждый элемент имеет три небольшие вкладки: Контент, Медиа и Стиль.
- Шоу решает, что находится над точкой: Дата или Пользовательская метка, такая как “Фаза 1”.
- Дата и Дата Формат установите дату и способ ее написания.
- Ссылка делает всю карту кликабельной.
- Редактор контента держит заголовок и описание. отдельного поля заголовка нет, поэтому первая строка - это заголовок.
- выше Медиа вкладка добавляет изображение на карту.
Широкие изображения работают здесь лучше, чем высокие Три высокие фотографии толкают текст далеко вниз по экрану.
Шаг 4: Выберите навигацию
Открыть Навигация раздел и выберите, как посетители перемещаются по временной шкале. В раскрывающемся списке "Навигация" есть шесть вариантов.
| Навигационный вариант | Что видят посетители | Хороший для |
|---|---|---|
| Стрелки и точки | Предыдущая и следующая стрелки плюс точка на слайд | Большинство сроков |
| Стрелки и дробь | Стрелки плюс счетчик, например 2/6 | Длинные временные рамки, где точки становятся многолюдными |
| Стрелки | Только стрелки | Чистые расклады |
| Точки | Только точки | Дизайны касанием |
| Прогресс | Бар, который заполняется по мере продвижения карусели | Шаги процесса |
| Нет | Только пролистывание или автовоспроизведение | Декоративные полоски |
Ниже раскрывающегося списка можно включить Динамические пули?, добавить полосу прокрутки с Показать панель прокрутки?, установите позицию и поменяйте местами значки "Далее" и "Предыдущий". Скрыть стрелку на мобильном телефоне? включен по умолчанию, что оставляет посетителям телефона свайп и точки.
Шаг 5: Установите поведение карусели
Открытый Настройки карусели чтобы контролировать движение временной шкалы.
- Макет: Карусель для плоского ряда, или Покровный поток для 3D-эффекта с управлением поворотом, растяжением и глубиной.
- Автовоспроизведение и Скорость автозапуска: скорость по умолчанию составляет 5000 мс, поэтому новый слайд появляется каждые пять секунд.
- Пауза на зависании: прекращает автовоспроизведение, пока указатель находится на временной шкале.
- Слайды для прокрутки: сколько карт перемещается за клик, устанавливается на устройство.
- Центр Слайд, Курсор захвата и Режим перетаскивания бесплатно для ощущения сопротивления.
- Петля: возвращается к первому пункту после последнего.
- Скорость анимации (мс): сколько времени занимает каждый переход слайда, 500 по умолчанию.
Для реальной временной шкалы, подумайте дважды об автоиграх, Даты имеют заказ, и карта, которая ускользает, пока кто-то читает ее раздражает Автоигра с Паузой на Ховере - это справедливая золотая середина.
Шаг 6: Создайте стиль стрелок, очков и карт
Переключитесь на вкладку Стиль. в ней десять разделов: Предметы карусели, макет, изображения, посты, карты, стрелка, даты, линия, точки и навигация.
- Карты: заполнение, радиус границы, цвета заголовка и содержимого, а также отдельный вид для сфокусированной карты.
- Даты: типографика и цвет даты или этикетки над каждой точкой.
- Линия: цвет и толщина дорожки.
- Очки: простая точка, значок или изображение с размером и цветом.
- Навигация: цвета и размеры стрелок, точек и полосы прокрутки.
Опубликуйте страницу и протестируйте ее на телефоне. карты в строке опускаются на экранах меньшего размера, поэтому убедитесь, что текст все еще подходит.
Хотите также вертикальную планировку? выше Виджет временной шкалы Elementor на странице перечислены все варианты макета, выравнивания и стиля в одном месте.
Видеоурок
Это видео строит временную шкалу с пустой страницы и переключает ее на горизонтальную карусель в 3:44.
Четыре вещи, которые идут не так
Большинство проблем с горизонтальной временной шкалой возникает из-за того, что она рассматривается как вертикальная.
- Слишком много предметов. Примерно за восемь посетителей перестают нажимать. Используйте вертикальную временную шкалу или разделите историю по годам.
- Неравномерная высота карт. Одно длинное описание растягивает ряд Обрежьте текст или включите Авто Высота в Настройках Карусели.
- Стрелки над первой картой. Если стрелки расположены поверх содержимого, измените положение в разделе "Навигация".
- Ожидание сообщений в блоге. Тип временной шкалы Post вертикальный. Для сообщений в ряд используйте Виджет блога в режиме карусели.
Также читайте: 20 шаблонов ползунков элементаров, которые включают в себя дизайн ползунка временной шкалы.
Часто задаваемые вопросы
Могу ли я создать горизонтальную временную шкалу в Elementor без Elementor Pro?
Да. Elementor Pro также не включает виджет временной шкалы, поэтому Pro здесь не имеет никакого значения. Добавьте виджет временной шкалы из такого дополнения, как Master Addons, установите стиль временной шкалы на горизонтальную временную шкалу, и элементы станут каруселью.
Как добавить стрелки в горизонтальную временную шкалу в Elementor?
Откройте раздел Навигация во вкладке Содержимое и выберите Стрелки и точки, Стрелки и дробь, или Стрелки. затем вы можете установить положение стрелки и заменить значки Следующий и Предыдущий из того же раздела.
Может ли автовоспроизведение по горизонтальной временной шкале?
Да. включите автовоспроизведение в настройках карусели и установите скорость автовоспроизведения в миллисекундах. по умолчанию - 5000, что составляет пять секунд на слайд. пауза на наведении останавливает его, пока посетитель читает.
Отзывчива ли горизонтальная временная шкала?
Да. это карусель, поэтому она показывает меньше карт на планшетах и телефонах и посетители свайп для перемещения. слайды для прокрутки имеет отдельные значения для каждого устройства.
Могу ли я показывать сообщения в блоге в горизонтальной временной шкале?
Не с типом Post Timeline, который только вертикальный Добавить сообщения вручную как Пользовательские элементы Хронологии, или использовать пост карусель.
Заключительные мысли
Горизонтальная временная шкала Elementor сводится к одной настройке и двум разделам: Стиль временной шкалы, установленный на горизонтальную временную шкалу, затем навигация с шестью вариантами и настройки карусели для автовоспроизведения, цикла и скорости. Сохраните количество коротких карт от трех до восьми и протестируйте их на телефоне.
выше Страница виджета временной шкалы имеет живые демо-версии обоих макетов, включая a демонстрация горизонтальной дорожной карты.
Связанное чтение
2 ответа
Точку, что горизонтальный макет работает только с элементами Пользовательской временной шкалы, а не с Post Timeline, легко пропустить и сломать сборку поздно. перед переключением Стиль временной шкалы, подтвердить каждый элемент является пользовательским, так как блог-пост-ориентированные временные шкалы остаются вертикальными. практическая настройка: установить навигацию в стрелки и точки, затем проверить на узкой ширине телефона, потому что карусельные стрелки могут толкнуть карты и точки сделать свайп более понятным для читателей.
Спасибо, что поделились этими полезными советами! 😊 Вы абсолютно правы, что проверка типа элемента временной шкалы и тестирование макета на меньших экранах могут помочь избежать неожиданных проблем.Мы ценим, что вы указали на это и помогли другим пользователям Master Addons построить лучшие, более отзывчивые временные рамки. Спасибо, что являетесь частью нашего сообщества!