Ключевые выводы
- Все эти восемь примеров временной шкалы Elementor построены с одним виджетом, виджетом временной шкалы Master Addons, и каждый из них имеет открытую демо-страницу.
- Шесть из восьми проектов временной шкалы являются вертикальными, а два - горизонтальными каруселями, что соответствует тому, как используются макеты: вертикальные для длинных историй и горизонтальные для коротких последовательностей.
- В вертикальных примерах используются три из четырех выравниваний виджета Timeline: Центр для чередующихся карт, Левый для одностороннего списка и Правый для зеркального одностороннего списка.
- Большая часть визуального различия между восемью дизайнами происходит из четырех разделов стиля виджета Timeline: карты, даты, строка и точки.
- Elementor и Elementor Pro не включают виджет временной шкалы, поэтому любой шаблон временной шкалы Elementor зависит от устанавливаемого дополнения.
Хорошие примеры временной шкалы Элементора найти трудно, потому что большинство демо - это три серые карты с lorem ipsum.В восьми приведенных ниже проектах используются реальные истории: перестройка органа, пролет моста, клиническое испытание, первый год пекарни. все они построены с помощью Виджет временной шкалы Master Addons и у каждого есть живое демо.
Для каждого примера вы получаете то, для чего он хорош, что заставляет дизайн работать, и настройки, лежащие в его основе, поэтому вы можете использовать его в качестве шаблона для своей собственной страницы. если вы не построили временную шкалу раньше, начните с как создать временную шкалу в Elementor.
Оглавление
Краткий обзор восьми примеров временной шкалы
Сначала выбирайте по макету, затем по настроению. В этой таблице показано, какой дизайн временной шкалы Elementor подходит для какой работы.
| # | Дизайн | Макет | Изображения | Хороший для |
|---|---|---|---|---|
| 1 | Чередование Перестройка | Вертикальный, центральный | Нет | Журналы проектов, реставрации |
| 2 | Поле изображения Arch | Вертикальный, с одной стороны | Да, выгнутый | Сезонные или годовые заметки |
| 3 | Правое расследование | Вертикально, верно | Нет | Хронологии, файлы дел |
| 4 | Горизонтальное изготовление | Горизонтальная карусель | Да | Этапы производства |
| 5 | Неделя разделенных карт | Вертикальный, одноколонный | Нет | Расписание по неделям |
| 6 | Чередующиеся Arch Media | Вертикальный, центральный | Да, выгнутый | Истории бренда и основателя |
| 7 | Испытание световой карты | Вертикальный, с одной стороны | Нет | Вехи исследований и процессов |
| 8 | Горизонтальный год | Горизонтальная карусель | Нет | История по годам |
1. Чередование сроков восстановления
Это классическая вертикальная временная шкала Элементора: карты чередуются слева и справа от центральной линии, с пронумерованной точкой и датой для каждого этапа. демо-версия рассказывает историю органа, перестроенного в течение трех лет.
Используйте его для реставраций, строительных дневников или любого проекта с четкими этапами. цифры дают порядок еще до того, как вы прочитаете дату. Чтобы построить его, используйте набор Horizontal Align в центр, тонкую линию, маленькие точки и фон карты лишь немного легче страницы.
Откройте демо-версию Alternating Rebuild
2. Хронология поля изображения арки
Односторонняя временная шкала на кремовом фоне, где каждая запись имеет арочную фотографию рядом с текстом. Демо-версия рассказывает о десяти зимах закладки живой изгороди на ферме.
Используйте его для полевых заметок, сезонной работы, путешествий журналы, или что-нибудь фото-светодиод. арочный урожай делает обычные фотографии выглядят преднамеренно. чтобы построить его, используйте одностороннее выравнивание, и большой радиус на верхних углах только в Стиль, Изображения, Граница радиус.
Откройте демо-версию Arch Image Field
3. Правильно согласованный график расследования
Здесь линия проходит по правому краю и карты сидят слева, с правым выровненным текстом Это зеркало обычного макета. демо-версия - хронология двухлетнего информационного запроса.
Используйте его для расследований, юридических или соответствия хронологий, или тематических исследований. необычное выравнивание делает временной шкалы только текст выглядит разработанным. чтобы построить его, используйте Горизонтальный выравнивание установить вправо, Точки с границей и без заполнения.
Откройте демо-версию расследования в правильном направлении
4. График горизонтального изготовления
Первый из двух горизонтальных примеров. меток месяца сидят над липово-зелеными точками, и карты изображений скользят под ними с круглыми кнопками стрелок. демо-версия охватывает пролет моста, изготовленный в пять этапов.
Используйте его для производственных или производственных этапов, или пятиэтапного процесса Фотографии несут каждый этап, и текст остается в три строки, Чтобы построить его, используйте Timeline Style set to Horizontal Timeline, Навигация set to Arrows, и изображение на вкладке Медиа каждого элемента.
Откройте демо-версию Horizontal Fabrication. Органы управления каруселью поясняются в как создать горизонтальную временную шкалу в Elementor.
5. Хронология недели разделенных карт
Единый центрированный столбец белых карточек. каждая карта разделена на две части: узкая полоса с неделей слева и содержимым справа. демо-версия представляет собой перевес музея, запланированный неделю за неделей.
Используйте его для расписаний, спринтерских планов или контуров курса. столбце этикетки выстраивается вверх по странице, поэтому вы можете сканировать недели, не читая карты. чтобы построить его, используйте пользовательскую этикетку на каждом элементе (“Week 1 · 6 января”) вместо даты, легкие карты с мягкой тенью.
Откройте демо-версию недели разделенных карт
6. Хронология чередующихся арочных носителей
Снова чередуя карты, на этот раз с черно-белыми фотографиями, обрезанными на арку поверх каждой карты. демо-версия - это первый год работы пекарни, начиная с одной духовки и банковского кредита.
Используйте его для О страницах, истории основателей или временной шкалы истории Элементора для малого бизнеса. Один акцент цвет и монохромные фотографии делают изображения смешанного качества похожими на набор. Чтобы построить его, используйте Горизонтальный выравнивание, установленное в центре, изображение на предмет, тот же акцент в Даты и точки.
Откройте демо-версию Alternating Arch Media
7. Сроки пробной версии световой карты
Световые карты на темно-фиолетовом фоне, все по одну сторону линии, с янтарными точками. демо-версия отслеживает клиническое исследование от финансирования до поправки к протоколу.
Используйте его для основных этапов исследования, раундов финансирования или процессов утверждения. контраст между картой и фоном делает работу, поэтому карты не нуждаются в границе или тени. Чтобы построить его, используйте горизонтальное выравнивание, установленное влево, светлый фон карт, маленькие заполненные точки.
Откройте демо-версию пробной версии световой карты
8. Горизонтальный график года
Второй горизонтальный дизайн ставит большие годы над линией (1982, 1986, 1989) с короткой картой под каждым. демо-версия - это шестнадцать лет автоматизации маяка, и она объединяет временную шкалу со таблицей до и после.
Используйте его для истории компании по годам, поколениям продуктов или юбилеям. год является самым большим текстом на экране, что люди ищут в истории. чтобы построить его, используйте Horizontal Timeline, пользовательский лейбл, держащий только год, и большие Даты типографики в акцент цвет.
Открыть демо Горизонтальный год
Хотите все шестнадцать? Демо-просмотрщик на Виджет временной шкалы Elementor пейдж держит еще эти восемь плюс восемь, включая журнал изменений, дорожную карту и повестку дня мероприятия.
Как использовать их в качестве шаблонов
Вы можете восстановить любой из них Элементор шаблоны временной шкалы за несколько минут, потому что все различия находятся в настройках. чтобы разместить его на полной странице, см Шаблоны страниц Элементор.
- Добавьте виджет "Хронология" и введите свои собственные элементы: дату или метку, заголовок, краткое описание и дополнительное изображение.
- Выберите макет. Стиль временной шкалы выбирает вертикальный или горизонтальный, а Стиль, макет, горизонтальное выравнивание выбирает левый, центральный, накладной или правый.
- Соответствовать цветам. сначала установите фон страницы или контейнера, затем Карты, Даты, Линия и Точки.
- Проверьте состояние "Сфокусированность". Каждый пример дает записи в поле зрения немного другую карту или точку, чтобы читатель сохранил свое место.
- Посмотрите на это на телефоне Вертикальные временные линии перемещаются в одну сторону на маленьких экранах, а на горизонтальных отображается меньше карт.
Показ сообщений на временной шкале имеет собственное руководство: как показывать сообщения в блоге на временной шкале в Elementor.
Также читайте: 20 шаблонов ползунков элементаров, которые включают ползунок временной шкалы с реальным интервалом между годами.
Часто задаваемые вопросы
Поставляется ли Elementor с шаблонами временных шкал?
Нет. Elementor и Elementor Pro не имеют виджета временной шкалы, поэтому их библиотека шаблонов также не имеет истинной временной шкалы. Шаблоны временной шкалы для Elementor всегда полагаются на виджет дополнения или на пользовательский CSS.
Какой макет временной шкалы лучше всего подходит для истории компании?
Чередующаяся вертикальная временная шкала соответствует долгой истории с фотографиями, например, пример 6. Для короткой истории с пятью или шестью основными годами горизонтальная годовая временная шкала, такая как пример 8, занимает меньше места.
Могу ли я использовать эти проекты временных шкал с какой-либо темой?
Да. дизайны сделаны в редакторе Elementor с собственными элементами управления стилем виджета Timeline, поэтому они не зависят от темы. шрифты следуют глобальной типографике вашего сайта, если вы не установите их в виджете.
Сколько пунктов должно быть на временной шкале?
Четыре-восемь - это комфортный диапазон. под четырьмя, простой список более ясный. за десять, разделить временную шкалу по году или десятилетию, или сократить каждую карту до заголовка и одной строки.
Заключительные мысли
Эти восемь примеров временной шкалы Elementor охватывают макеты, необходимые большинству сайтов: два чередующихся дизайна, три односторонних, одноколоночное расписание и две горизонтальные карусели. все они происходят от одного виджета, а различия заключаются в четырех разделах стиля: карты, даты, линия и точки.
Откройте демо-версии, выберите ближайшую и создайте свою версию с помощью Виджет временной шкалы.
Связанное чтение
