Как создать страницу временной шкалы с помощью блоков

Следующим в нашей серии « Создание из блоков » будет краткое руководство о том, как создать страницу временной шкалы. Хронология дает брендам и организациям визуальный способ представить себя и рассказать об основных моментах из своей истории. Редактор блоков делает создание временной шкалы проще, чем когда-либо с устаревшими плагинами.

Для этого примера я выбрал Timeline Block For Gutenberg от Cool Plugins , который доступен на WordPress.org. Это один из немногих плагинов, которые предлагают блоки временной шкалы. Это упрощает создание гибкой временной шкалы, которую можно настроить в соответствии с брендом организации, с предварительным просмотром в реальном времени в процессе создания.

Я использовал относительно новую тему Blockpress от MotionBlocks , которая поддерживает полное редактирование сайта, поэтому пользователи могут настраивать все прямо на странице. Я обнаружил, что с этой темой легко работать при создании примера веб-сайта для этого проекта. Он также совместим с WooCommerce, если вы продаете что-то на своем сайте. Плагин Timeline Block for Gutenberg будет работать с любой темой, поддерживающей редактор блоков, но мне хотелось поиграть с Blockpress.

Первый шаг — установить тему и плагин. Как только оба активируются, создайте новую страницу, на которой будет размещена временная шкала. Нажмите на средство вставки блоков и выберите Блок временной шкалы.

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

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