Особенности плагина Divi - модуль временной шкалы Divi

Один из самых интересных способов отображения хронологической информации - это временная шкала. Будь то пошаговые инструкции, список опыта для резюме, список проектов для портфолио или даже сообщения в блоге, временные шкалы могут сделать информацию визуально привлекательной. Вы можете создавать свои собственные временные шкалы в Divi Builder, используя плагин под названием Divi Timeline Module.

Divi Timeline Module, который является сторонним плагином Tortoise IT через Elegant Marketplace, добавляет несколько новых модулей (основной модуль и три дополнительных модуля) в Divi Builder для создания двух разных типов временных шкал:

1. Один, в котором вы создаете контент для каждой точки на временной шкале. Каждый элемент на временной шкале может иметь собственное содержимое, ссылки, цвета, шрифты, значок и т. Д.
2. Тот, который использует ваш существующий контент со страниц, сообщений, мультимедиа или проектов.

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

Установка подключаемого модуля модуля временной шкалы Divi

Установка проста. Просто загрузите плагин и активируйте его, как любой другой плагин. Никакой другой настройки не требуется.

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

Есть четыре модуля: (Сообщение) - Вертикальный , Контент , Рекомендуемое изображение и Вертикальное . Хотя он будет работать с макетами с несколькими столбцами, макеты с одним столбцом работают лучше всего. Временная шкала - вертикальная или временная шкала (сообщения) - вертикальная будет использоваться на страницах. Остальное будет использовано для создания макета.

Вертикальная шкала времени

Добавьте модуль Timeline - Vertical в строку с одним столбцом.

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

При нажатии на « Добавить новый элемент временной шкалы» открывается редактор содержимого с текстом, мультимедиа, меткой, кнопкой «Показать дополнительные», значком, цветом значка, цветом фона и анимацией изображения / значка. Он также включает в себя все стандартные расширенные настройки дизайна, а также пользовательский CSS .

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

Вертикальный результат на временной шкале

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

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

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

Хронология публикации

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

Вам нужно будет сделать две вещи:

1. Создать макет
2. Создайте страницу и выберите этот макет

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

Создать макет

Сначала создайте макет. На панели инструментов перейдите в Divi , Divi Library и выберите Add New . Дайте макету имя, которое имеет для вас смысл (я выбрал макет временной шкалы публикации). Выберите Макет в качестве типа шаблона . Не устанавливайте флажок Global . Щелкните " Отправить" .

Созданный вами макет будет отображать сообщения (или выбранный вами тип сообщения). Думайте об этом как о создании собственного модуля блога, только вы можете разрабатывать макет сообщений. Дело не в этом, но этот пример помог мне легко понять это. Ну, вроде как, но не совсем. Двигаемся дальше.

Этот макет построен с использованием модулей Timeline Content , Featured Image и Post Title , которые включены в плагин.

Чтобы создать макет, выберите макет с двумя столбцами и поместите модуль Timeline - Featured Image справа, а Timeline - Post Title и Timeline - Content модули слева. Конечно, вы можете немного поэкспериментировать с макетами, например, использовать только изображение или заголовок или разместить их в разных конфигурациях, но давайте сначала создадим обычный макет.

Примечание. Эти модули не используются на странице, как большинство модулей Divi Builder. Они предназначены для использования в макете, который будет вызываться модулем Timeline (Posts) - Vertical .

Это макет, как он выглядит в Divi Builder. Как и ожидалось, каждый из этих модулей имеет свои собственные параметры, включая Общие настройки , Расширенные настройки дизайна и Пользовательский CSS .

Я использую макет 1/3, 2/3, но 1/2, 1/2 тоже работает. Это частично будет зависеть от размера избранного изображения, которое вы хотите использовать, и количества контента, который вы хотите отобразить, а также от других настроек, таких как размеры шрифта.

После того, как вы разместили свои модули и выбрали все настройки, выберите « Обновить» справа в разделе « Опубликовать» .

Рассмотрим подробнее каждый модуль.

Модуль избранного изображения

Модуль Featured Image делает именно то, что вы ожидаете - он отображает избранное изображение сообщения. В нем есть раскрывающийся список, в котором вы можете выбрать размер изображения. Он также включает в себя альтернативный текст, заголовок, открытие в лайтбоксе, URL-адрес ссылки, открытие в том же окне или в новой вкладке, анимацию, удаление пространства под изображением, выравнивание, отключение для устройств и метку администратора.

Выбираю средний размер изображения и отключаю анимацию.

Модуль заголовка сообщения

Модуль заголовка сообщения позволяет вам ссылаться на контент и изменять метку администратора и устанавливать настройки CSS. Я рекомендую оставить для параметра " Ссылка на контент" значение " Да" . Для остальных я оставил значения по умолчанию.

Модуль содержимого

Модуль содержимого позволяет вам выбрать отображение экспертов или контент, а также отобразить кнопку « Подробнее» . Я установил для него отображение отрывка и кнопку «Читать дальше».

Создать страницу

Создайте новую страницу с помощью Divi Builder и перетащите модуль Timeline (Posts) - Vertical в макет с одним столбцом.

Временная шкала (сообщения) Вертикальные настройки модуля

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

Чтобы вызвать созданный вами макет, выберите его из раскрывающегося списка под названием Loop Layout . Прокрутите вниз и выберите « Сообщения» в качестве типа сообщения , чтобы отображать сообщения в блоге.

После того, как вы сделали все свои выборы, опубликуйте страницу.

Публикация результатов на временной шкале

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

Пример блога

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

Я создал макет в одном столбце с изображением вверху, содержимым в середине и заголовком внизу.

Затем я создал страницу с модулем блога и временной шкалой (сообщения) - вертикальным модулем. Я установил модуль Блог для отображения трех сообщений в сетке. Я установил для модуля Timeline смещение 3, чтобы он игнорировал сообщения, которые будет отображать модуль Blog , и начинал с сообщения номер 4. Я поместил модуль Text между ними с сообщением, которое предупреждает посетителя о том, что содержимое под блогом сообщения по-прежнему являются частью блога.

Результат страницы блога

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

Последние мысли

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

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

Мы хотели бы получить известие от вас. Вы использовали модуль временной шкалы Divi? Расскажите нам о своем опыте в комментариях.

Изображение предоставлено дизайнером Олли / shutterstock.com