Стена дат и абзацев редко прилипает. Однако поместите те же самые события на временную шкалу с центральной линией, датированными маркерами и аккуратными карточками, и история начнет читаться сама. Вехи компании работают таким образом. То же самое происходит с дорожной картой продукта, личным путешествием или последними сообщениями в блоге в порядке дат. Последовательность выполняет тяжелую работу.
И вам не нужен пользовательский код или другой плагин для каждого стиля. Мастер Аддоны Виджет временной шкалы обрабатывает все это из одного места. мы построим вертикальную временную шкалу, перевернем ее в горизонтальное положение, автоматически втянем посты, а затем все это стилизуем. как только вы узнаете, где живут настройки, это несколько минут работы.
Что делает виджет временной шкалы Элементора
Временная шкала - это хронологический список, превращенный в визуальную верстку Каждая запись находится на центральной линии, отмеченной точкой (точкой или значком), с картой, которая содержит дату, заголовок и ваш контент. виджет временной шкалы Master Addons дает вам два способа заполнить эти записи и два способа их раскладывания.
Эти двое типы хронологий являются пользовательские Хронология и Пост Хронология, Пользовательские означает, что вы вводите каждую запись вручную, что подходит фиксированный контент, как история компании или дорожная карта.Пост Хронология втягивает ваши сообщения WordPress автоматически, поэтому новый пост становится новой записью временной шкалы без ручной работы.
Эти двое стили хронологии вертикальные и горизонтальные. вертикальные стеки записей вниз по странице в чередующемся левом/правом узоре. горизонтальный раскладывает их рядом, как прокручиваемую карусель с навигационными стрелками. вы переворачиваете между любой из них из одного выпадающего, что является причиной того, что этот виджет остается в моем комплекте рядом с другим 80+ виджетов и расширений в Мастер Аддоны.
Перед началом: установите главные дополнения
Виджет Timeline поставляется с главными дополнениями для Elementor. оба стиля макета и оба типа контента находятся в бесплатной версии, поэтому ничто ниже не требует обновления.
- На панели управления WordPress перейдите по адресу Плагины > Добавить новое.
- Найдите “Master Addons для Elementor” и нажмите Установите сейчас, тогда Активировать. Вы также можете загрузите главные дополнения непосредственно с сайта WordPress.org.
- Откройте любую страницу с Elementor и найдите на панели виджетов “Timeline.”
Виджет отсутствует после активации? проверьте, включен ли он ниже Мастер-аддоны > Элементы. Там можно переключать каждый виджет, и это часть того, как плагин остается легким. Загрузка только тех виджетов, которые вы действительно используете, - один из самых простых способов ускорьте работу вашего сайта Elementor.
Как добавить временную шкалу в Elementor (шаг за шагом)
Начнем с пользовательской вертикальной временной шкалы Быстрее всего укладывается в голове, а все остальное от нее ответвляется.
Шаг 1: Перетащите виджет временной шкалы на страницу
Редактируйте свою страницу с помощью Elementor, найдите “Timeline” на панели виджетов и перетащите ее в раздел. Она заходит с тремя уже заполненными образцами записей, поэтому вы сразу видите рабочую временную шкалу вместо пустого поля. Мелкая вещь, но она спасает вас от угадывания того, что делает каждое поле.
Шаг 2: Установите тип и стиль временной шкалы
В Содержание вкладка, откройте раздел Хронология Два раскрывающихся списка выполняют большую часть работы здесь: Тип хронологии (Настраиваемый или почтовый) и Стиль временной шкалы (Вертикальный или Горизонтальный).Оставить Тип на “Custom Timeline” и Стиль на “Vertical Timeline” на данный момент.
Шаг 3: Измените элементы временной шкалы
Под Предметы, каждая запись отображается в виде строки ретранслятора (сэмплы датированы 2 февраля 2014 г., 10 мая 2015 г. и 21 июня 2016 г.). Нажмите на строку, чтобы расширить ее и отредактировать дату, название, контент и изображение. Добавить элемент создает новую запись, дубликат значка копирует существующую, и вы переупорядочиваете их, перетаскивая строки.
Это полная пользовательская временная шкала. Несколько кликов “Add Item,” дату и предложение в каждом, и вы задокументировали историю компании или дорожную карту проекта.
Пользовательская временная шкала против временной шкалы публикации
Выпадающий список Тип временной шкалы - это место, где этот виджет получает свое место. Переключитесь с пользовательского на Хронология публикации и вся панель меняется: вместо редактирования элементов вручную вы сообщаете виджету, какие публикации показывать, и он строит временную шкалу из вашего контента.
Дотянуться до Пользовательская временная шкала когда содержание исправлено и редакционное:
- История компании и вехи основания
- Дорожные карты продуктов или функций
- Биография или карьерный путь
- Расписание мероприятий и повестка дня программ
Дотянуться до Хронология публикации когда контент является вашим блогом и должен быть актуальным:
- Хронологический архив статей
- Лента новостей или объявлений
- Тематические исследования или записи в портфолио, опубликованные в виде сообщений
Создание графика публикации из вашего блога
Установите тип времени для Хронология публикации а панель Контент заполняется пост-контролем Это тот же динамический подход, который вы бы использовали создайте страницу блога в Elementor, только это выходит в виде временной шкалы, а не сетки.
Настройки, которые стоит знать:
- Показать название/заголовок Ссылка: отобразите заголовок сообщения и при необходимости привяжите его к сообщению.
- Тег заголовка: установите HTML-тег заголовка (H2, H3 и так далее), чтобы структура заголовка оставалась чистой для SEO.
- Показать разрешение изображения и изображения: потяните представленное изображение в виде миниатюры выбранного размера.
- Включить ссылки: сделайте кликабельными целые карты Если в вашем почтовом контенте уже есть ссылки, оставьте это, потому что ссылки внутри ссылок не разрешены.
- Формат даты и формат времени: контролируйте, как на линии отображается дата каждой записи.
- Сообщения на страницу, смещение и порядок сообщений: решите, сколько сообщений отображается, где начинается список и стоит ли на первом месте новейшее или самое старое.
Вы также можете фильтровать, какие сообщения появляются по категориям, тегам, авторам или конкретным идентификаторам сообщений. Одна временная шкала может показывать все в новостях, а другая - тщательно подобранный набор. Поскольку он читается прямо из ваших сообщений, он находится хорошо внутри Тема Строитель архив или единый шаблон, где он обновляется каждый раз, когда вы нажимаете "Опубликовать".
Переключение на горизонтальную временную шкалу
Изменить Стиль временной шкалы к “Horizontal Timeline” и верстка вращается Записи теперь сидят рядом вдоль горизонтальной центральной линии, каждая со своим точечным маркером над картой, а стрелки влево/вправо позволяют посетителям прокручивать их, как карусель.
Горизонтальный зарабатывает свою крепость, когда у вас есть несколько сильных вех и вы хотите, чтобы они были выше складки, скажем, последовательность запуска продукта на целевой странице. Вертикальный - более безопасный выбор для более длинных списков или текстовых записей, поскольку чтение сверху вниз кажется естественным на телефоне. Я столкнулся с одним: горизонтальная карусель и вертикальный стек не ведут себя одинаково на маленьких экранах, поэтому предварительный просмотр обоих против вашего адаптивные точки останова перед отправкой.
Стиль временной шкалы
The Стиль на вкладке есть раздел для каждой части временной шкалы: макет, карты, стрелка, даты, строка, точки, навигация и шаблоны. Здесь общий образец превращается в нечто, соответствующее вашему бренду.
Центральная линия и точки
Под Линия, задают цвет и толщину центральной линии Под Очки, решить, является ли каждый маркер простой точкой или Икона, затем выберите значок, его размер, цвет фона, и цвет точки. пикер значков открывает полную библиотеку, поэтому календарь для событий или флаг для вех находится в одном клике.
По умолчанию, наведение и фокусированные состояния
В разделе "Точки" есть три вкладки состояния: Дефолт, Наведите курсори Сосредоточенный.По умолчанию - это вид отдыха, Hover - это образ, на который можно навести указатель мыши, а Focused выделяет активный элемент. Последний из них имеет наибольшее значение в горизонтальной карусели, где он сообщает посетителям, какой вход в данный момент находится по центру. Стиль всех трех - это то, что заставляет временную шкалу чувствовать себя интерактивной, а не плоской.
Карты, даты и типографика
The Карты секция контролирует фон, границу, тень и интервал каждой записи. Даты плюс настройки типографики заголовка и контента позволяют сопоставлять шрифты вашего сайта. сохраняйте согласованность заполнения карт и возможность чтения контраста, потому что временная шкала живет или умирает от того, смогут ли люди ее сканировать.
Случаи практического использования
Несколько способов, которыми я заставил виджет "Таймлайн" работать над реальными проектами:
- О страницах: вертикальная индивидуальная временная шкала основных этапов компании в сочетании с a Виджет Counter Up для заголовков статистики, как годы в бизнесе.
- Страницы продукта: горизонтальная дорожная карта, показывающая, что отправлено и что будет дальше.
- Блог и новости: временная шкала публикации в виде хронологического архива, расположенного рядом с a Виджет Changelog для заметок о выпуске.
- Портфели: тематические исследования как датированные записи с избранными изображениями.
Советы по улучшению временной шкалы
- Содержимое записи держите коротким. два или три предложения на карту читаются намного лучше, чем полный абзац.
- Используйте значки, которые что-то значат: календарь дат, флаг для запусков, звезда для наград.
- Для долгих историй, идти вертикально. горизонтальная прокрутка изнашивается тонкий мимо пяти или шести пунктов.
- Установите разумный тег заголовка на временных линиях публикации, чтобы названия не конкурировали с H1 вашей страницы.
- Проверьте результат на мобильном телефоне и против вашего настройка SEO, поскольку избранные изображения и порядок заголовков являются поиском ленты.
Для каждого элемента управления и случая нечетного края Документация виджета хронологии идет глубже, чем я могу здесь. и если вы хотите премиум-макеты, белый ярлык, и остальная часть библиотеки, Мастер Аддоны Про разблокирует их.
Часто задаваемые вопросы
Виджет Elementor Timeline бесплатен?
Да. виджет временной шкалы Master Addons является частью бесплатного плагина. вы получаете как вертикальный, так и горизонтальный стили, плюс пользовательские и пост-типы временной шкалы, без обновления. Pro добавляет дополнительные виджеты, наборы шаблонов и белую метку, но сама временная шкала работает на бесплатной версии.
Могу ли я создать временную шкалу в Elementor без плагина?
Не легко. ядро Elementor не имеет элемента временной шкалы, поэтому вы бы строили один вручную с столбцами, разделителями и пользовательскими CSS. Виджет, как Master Addons Timeline обрабатывает центральную линию, маркеры, чередующиеся карты, и отзывчивость для вас в несколько кликов.
Чем отличается пользовательская и пост-таймлайн?
Пользовательская временная шкала использует записи, которые вы вводите вручную, идеально подходит для фиксированного контента, такого как история компании. временная шкала публикации автоматически удаляет ваши публикации WordPress, поэтому новые публикации становятся новыми. Выбирайте пользовательские для редакционного контента и публикуйте все, что должно обновляться.
Могу ли я создать горизонтальную временную шкалу в Elementor?
Да. во вкладке Содержимое виджета Хронология установить Стиль Хронология на “Horizontal Timeline.” Записи располагаются рядом по горизонтальной линии со стрелками навигации, работая как карусель Вы можете переключиться обратно на вертикаль с того же раскрывающегося в любое время.
Будет ли хронология хорошо выглядеть на мобильных устройствах?
Виджет отзывчив, и вы можете настраивать размеры на устройство Вертикальные временные линии наиболее естественно адаптируются к маленьким экранам Если вы используете горизонтальный, предварительно просматривайте его на мобильном телефоне и настраивайте точки останова, так как карты, расположенные рядом, ведут себя иначе, чем стек сверху вниз.
Завершение
Так что это как создать временную шкалу в Elementor конец в конец: перетащите в виджет, выберите свой тип и стиль, заполните или отфильтруйте записи, затем стиль линии, точек, и карт, чтобы соответствовать вашему бренду, Пользовательские временные шкалы удерживают ваши фиксированные истории, Почтовые временные шкалы держат себя актуальными. вертикальный и горизонтальный переключатель охватывает как долгие истории, так и жесткие дорожные карты.
Установите главные дополнения, поместите виджет временной шкалы на следующую страницу "О программе" или "Продукт" и превратите список дат во что-то, что люди действительно читают.
Связанное чтение: Создайте страницу блога с помощью Elementor · Как ускорить сайты Elementor · Просмотр всех виджетов Master Addons
