Как создать временную шкалу в Elementor (вертикальная, горизонтальная и пост-хронология)

Элементор не имеет собственного виджета временной шкалы, в бесплатной версии или в Pro. чтобы поместить временную шкалу на странице Elementor, вы добавляете ее из дополнения. в этом руководстве используется виджет "Хронология" в бесплатном режиме Мастер Аддоны плагин, который охватывает вертикальные макеты, горизонтальные карусели и временные рамки, которые строятся на основе сообщений в вашем блоге.

Каждый снимок экрана ниже приходит из Elementor 4.2.4 с Главными дополнениями 3.2. Пользовательские временные шкалы, как макеты, так и вся вкладка Стиль бесплатно. Post Timeline нуждается в Pro, и он помечен там, где он появляется.

Можете ли вы создать временную шкалу в Elementor без плагина?

Технически да, и это больше работы, чем выглядит. Вы бы укладывали контейнеры, давали бы одну левую границу, чтобы подделать центральную линию, абсолютно располагали точку в каждой строке и чередовали левую и правую центровку с пользовательским CSS. Тогда вы бы сами написали правила реагирования, потому что эта чередующаяся компоновка должна свернуться в один столбец на телефонах.

Это падает на обслуживание. Добавление вехи в середине означает перестановку каждой строки под ним вручную. виджет сохраняет строку, маркеры, чередование и точки останова в качестве настроек, поэтому добавление записи - один клик.

Найдите на панели виджетов “timeline” на стоковой установке Elementor, и вернется ровно один результат - виджет Master Addons.

Установить плагин

С панели управления WordPress перейдите по адресу Плагины → Добавить плагин, искать Мастер-аддоны для Elementorзатем установите и активируйте. Откройте любую страницу с помощью Elementor и найдите панель виджетов хронология.

Если после активации ничего не возникнет, проверьте Мастер-аддоны → Библиотека виджетов и убедитесь, что Timeline включен Виджеты можно отключить индивидуально, чтобы не использовать неиспользуемый код на входной стороне, что в любом случае стоит сделать, если вы заботитесь о Скорость страницы Элементора.

Как добавить временную шкалу в Elementor, шаг за шагом

Шаг 1: Перетащите виджет на страницу

Отредактируйте страницу с помощью Elementor, найдите Хронология, и перетащите его в контейнер. Он приходит с тремя образцами записей уже заполнены, так что вы можете увидеть, что каждое поле делает, прежде чем вы измените что-либо.

Шаг 2: Выберите тип временной шкалы

На вкладке Содержимое откройте Хронология раздел. Первое раскрытие Тип хронологии.

Пользовательская временная шкала является бесплатным. вы вводите каждую запись самостоятельно, что вы хотите для истории компании, дорожной карты продукта или расписания событий, где содержание фиксировано и редакционное.

Хронология публикации является функцией Master Addons Pro. он читает ваши сообщения WordPress и строит временную шкалу из них, поэтому публикация сообщения добавляет запись самостоятельно. есть раздел на нем далее вниз.

Шаг 3: Выберите вертикальный или горизонтальный

Второе раскрытие Стиль временной шкалы.

Вертикальные пробежки вниз по странице с картами чередуя слева и справа от центральной линии Горизонтальные кладут записи рядом как карусель со стрелками Оба свободны, и вы можете переключаться между ними в любой точке, не теряя свои записи.

Один предел, который стоит знать сейчас: Стиль временной шкалы появляется только для пользовательских временных шкал. Временные линии публикации только вертикальные, и раскрывающийся список исчезает при переключении типа.

Шаг 4: Измените свои записи

Под Предметы, каждая запись - это строка ретранслятора Нажмите один, чтобы открыть его.

Каждая строка имеет вкладку Содержимое и вкладку Медиа.Поля, которые имеют значение:

• Шоу: Дата или пользовательская метка. дата дает вам выбор даты; пользовательская метка позволяет вам писать что угодно, а именно то, как вы получаете “Q3 2026” или “Founded” на линии вместо календарной даты.
• Дата Формат: предустановки плюс пользовательский. Пользовательский принимает строку даты PHP, так что F Y печатает “Июнь 2019” и удерживает веху хронология от выглядеть как журнал изменений.
• Ссылка: делает щелкаемой всю карту. оставьте её, если текст карты уже содержит ссылку, потому что ссылка внутри ссылки является недопустимой HTML и браузеры отбросят одну из них.
• Поле контента представляет собой полноценный редактор. Отдельного поля заголовка нет, так что заголовок записи идет сюда как заголовок 3.
• Вкладка Медиа добавляет изображение на карту и задает её разрешение.

Добавить элемент создает новую строку, значок копирования дублирует ее, а строки перетаскиваются для повторного упорядочения.

Шаг 5: Опубликуйте и посмотрите на это

Четыре записи, даты отформатированы как месяц и год, значки флагов на маркерах, все это на бесплатном плагине.

Карты чередуются по сторонам, а даты располагаются напротив каждой, но вы ничего не размещаете.

Почему карты выглядят пустыми, пока вы не прокрутите

Карты временной шкалы начинаются скрытыми и анимируются, когда они прокручиваются в поле зрения, а точка, ближайшая к вашей позиции прокрутки, принимает сфокусированное состояние, которое вы стилизуете отдельно в разделе "Точки".

Таким образом, временная шкала, размещенная под сгибом, выглядит пустой в инструменте снимков экрана, в экспорте PDF или в аудите скорости страницы, который никогда не прокручивается. Прокрутите страницу, и появятся записи.

Создание горизонтальной временной шкалы в Elementor

Набор Стиль временной шкалы к горизонтальной временной шкале и макет поворачивается: записи располагаются рядом, точки располагаются над картами по горизонтальной линии, а стрелки прокручиваются через них.

Стрелки настроены на вкладке Стиль в разделе Навигация Два элемента управления, легко смешиваются:

• Размещение находится внутри или снаружи карусели.
• Должность это то место, где они сидят, от левого верхнего угла до правого нижнего.

Установка Позиция на значение, которое принадлежит Размещение опускает стрелки в верхний левый угол, поверх вашей первой записи. Нижний-центр с внешним размещением является безопасным сочетанием, и это то, что скриншот использует.

Горизонтальные подходит четыре-шесть сильных вех над складкой, как последовательность запуска продукта на целевой странице. После шести записей читатель нажимает стрелку неоднократно, чтобы увидеть контент, который он не может сканировать, и вертикальные выигрывает. Вертикаль также является более безопасной ставкой на телефоны, где чтение сверху вниз - это то, что люди ожидают. что бы вы ни выбрали, проверьте это по сравнению с вашим адаптивные точки останова прежде чем отправить товар, потому что две планировки рушатся по-разному.

Стиль линии, очков и карт

Вкладка Стиль состоит из одиннадцати разделов: Предметы карусели, Макет, Изображения, Посты, Карты, Стрелка, Даты, Линия, Точки, Навигация и Шаблоны.

Линия задает цвет и толщину центральной линии. Карты обрабатывает фон, кайму, тень и набивку. Даты а элементы управления типографикой соответствуют тексту ввода в вашу систему шрифтов.

Очки стоит ли проводить время в разделе. Это Тип control выбирает то, что находится на каждом маркере, и имеет три вкладки состояния: Дефолт, Наведите курсор и Сосредоточенный. Фокусировка относится к записи, ближайшей к позиции прокрутки читателя, поэтому оставление ее без стиля - это то, что заставляет временную шкалу читать как плоский список, пока читатель прокручивает мимо нее. Стиль все три.

Набор Тип значки и маркер берет значок, что и используются здесь скриншотами. Немедленно проверьте его на переднем конце: если маркер отображается как пустой круг, значок не загрузился, и переключение типа обратно на "По умолчанию" дает вам однотонную точку, которая всегда работает.

Построение временной шкалы из сообщений в вашем блоге

Переключить тип временной шкалы на Хронология публикации и панель полностью меняется Вместо того, чтобы набирать записи вы описываете, какие публикации следует вытащить, и виджет строит из них временную шкалу.

Элементы управления, которые стоит установить:

• Показать название, Название Ссылка и Тег заголовка. Установите тег заголовка на H2 или H3, чтобы заголовки сообщений располагались под заголовком H1 страницы в порядке заголовков. Это то же самое правило порядка заголовков, которое имеет значение, когда вы создайте страницу блога в Elementor.
• Показать изображение и Разрешение изображения поместите избранное изображение на карту.
• Дата Формат и Формат времени. Время по умолчанию печатается рядом с датой, которая странно читается на временной шкале. Установите формат времени на отсутствие или используйте собственный формат даты.
• Сообщения на страницу, Счетчик сообщений смещения, Почтовый заказ и Заказать По.
• Категория, Фильтр по тегу, Автор и Сообщения, которые следует исключить сузьте запрос, чтобы одна временная шкала могла быть “everything в News”, а другая - тщательно подобранным набором.
• Включить ссылки делает всю карту кликабельной. такое же предупреждение, как и пользовательская версия: выключите ее, если содержимое карты имеет свои собственные ссылки.

Поскольку эта версия читает сообщения напрямую, она аккуратно переходит в a Тема Строитель архив или единый шаблон, и он обновляется при публикации. Post Timeline является частью Мастер Аддоны Про.

Пользовательская или пост-хронология: какая

Если публикация сообщения должна добавить запись, используйте Post Timeline. Если записи являются историей, которую вы написали один раз, используйте Custom.

Где стоит использовать временную шкалу

• О страницах. Вертикальная история компании, с Встречный строка над ним для номеров заголовков.
• Страницы продукта. Горизонтальная дорожная карта поставляемых функций и что дальше. Четыре-шесть записей, не больше.
• Примечания к выпуску. Временная шкала публикации отфильтрована до одной категории, рядом с a Перевёрток изменений виджет.
• Портфели и тематические исследования. Записи с датами и избранными изображениями, за которые платит вкладка "Медиа".
• Расписание мероприятий и курсов. Пользовательские метки вместо дат, поэтому строка читает “День 1, День 2, День 3”.

Семь вещей, которые делают хронологию читаемой лучше

1. Держите каждую карту в два или три предложения. временная шкала - это формат сканирования, и полные абзацы его побеждают.
2. Используйте пользовательские метки для вех. “2019” бьется “Jun 17, 19”, когда точный день не имеет значения.
3. Держите один уровень заголовка внутри карт. поле содержимого не имеет поля заголовка, поэтому установите каждый заголовок записи на один и тот же тег вместо смешивания H2 и H4.
4. Переключитесь на вертикальное положение за шесть записей, потому что горизонтальная прокрутка быстро становится утомительной.
5. Стиль Состояние Фокусирован Именно тот, который сообщает читателю, где они находятся.
6. Проверьте маркеры на лицевой стороне после выбора значка Пустой круг означает, что значок не загружался, а точки по умолчанию являются безопасным запасным элементом.
7. Проверьте это на телефоне. чередующийся макет сворачивается до одного столбца, и длинные пользовательские метки - это первое, что плохо обернуто.

Часто задаваемые вопросы

Связанное чтение

• Виджет временной шкалы Elementor, страница функций со всеми перечисленными элементами управления
• Документация виджета хронологии
• Как создать страницу блога с помощью Elementor
• SEO-практики для страниц Elementor
• Мастер-адреса на WordPress.org