Хотите добавить красивую временную шкалу событий на свой сайт WordPress??
История может быть сложной, особенно когда есть много различных дат, фактов и другой информации, которую нужно понять. Создав временную шкалу событий, вы можете показать историю своей компании, личную хронологию или любую серию событий в более увлекательной форме.
В этой статье мы покажем вам, как можно добавить красивую временную шкалу событий в WordPress.
Зачем добавлять красивую временную шкалу событий в WordPress
Многие владельцы сайтов WordPress используют временные шкалы, чтобы показать серию связанных событий в хорошо организованном и визуально привлекательном виде.
Предприятия и организации часто используют временные шкалы, чтобы показать свою историю. Например, родительская компания WPBeginner Awesome Motive показывает временную шкалу того, как мы выросли из простого блога в семью премиальных плагинов WordPress.
Если вы ведете блог о путешествиях или сайт о фотографии, то вы также можете показать свои фотографии в красивой вертикальной временной шкале, которая показывает ваше путешествие по миру. Это может быть более увлекательным, чем написание вашей истории и добавление ее на сайт в виде страницы обычного текста.
Как добавить временную шкалу событий в WordPress
Самый простой способ добавить временную шкалу событий в WordPress — использовать плагин Cool Timeline.
Этот плагин добавляет новую область Timeline Addons в приборную панель WordPress, где вы можете построить свою временную шкалу. Используя эту область аддона, вы можете добавить каждое событие отдельно, введя заголовок и описание, установив главное изображение и добавив другую важную информацию, как вы можете видеть на следующем изображении.
Как только вы закончите добавлять события, Cool Timeline покажет все эти истории событий на одной временной шкале. Затем вы можете добавить временную шкалу на любую страницу или пост.
Этот метод идеально подходит, если вы хотите показывать одну и ту же временную шкалу несколько раз на вашем сайте. Однако он позволяет создать только одну временную шкалу.
Другой вариант — использовать блок Cool Timeline для визуального построения временной шкалы в редакторе блоков WordPress.
Добавив на свой сайт несколько блоков Cool Timeline Blocks, вы можете отображать разные временные шкалы в разных частях сайта. Однако этот метод не позволяет повторно использовать одну и ту же временную шкалу несколько раз на вашем сайте, если только вы не сохраните ее как шаблон блока.
В этом руководстве мы рассмотрим оба метода. Независимо от способа создания временной шкалы, вам нужно будет установить и активировать плагин Cool Timeline. Если вам нужна более подробная информация, ознакомьтесь с нашим руководством по установке плагина WordPress.
После этого вы можете создать свою временную шкалу, используя либо меню аддонов временной шкалы, либо редактор блоков. Если вы предпочитаете сразу перейти к определенному методу, воспользуйтесь приведенными ниже ссылками.
- Метод 1. Как создать многоразовую временную шкалу событий с помощью меню Timeline Addons
- Метод 2. Как создать несколько временных шкал событий в WordPress с помощью блока временной шкалы
Метод 1. Как создать многоразовую временную шкалу событий с помощью меню аддонов временной шкалы
Меню Timeline Addons — это новый раздел приборной панели WordPress, где вы можете создавать каждое событие отдельно. Cool Timeline добавит все эти события на временную шкалу, готовую к отображению на вашем блоге или сайте WordPress.
Чтобы создать свое первое событие, перейдите по ссылке Аддоны Timeline » Добавить новую историю. Затем вы можете дать этому событию название, введя его в поле «Добавить название».
В основном редакторе вы можете перейти к вводу текста, который вы хотите показать на вашей временной шкале. Обычно это будет описание события.
После того, как вы это сделали, нужно нажать на ссылку «Установить главное изображение».
Теперь вы можете выбрать изображение, которое будет представлять событие на вашей временной шкале. Вы можете либо выбрать изображение из медиатеки WordPress, либо загрузить новый файл изображения со своего компьютера.
Если вам нужна помощь в создании профессионально оформленных изображений для вашей временной шкалы, то вы можете посмотреть подборку лучших программ для веб-дизайна, составленную нашими экспертами.
Далее перейдите к разделу Настройки истории на временной шкале. Здесь нажмите на поле ‘Дата / год истории’. Теперь вы можете использовать всплывающее окно календаря, чтобы выбрать время и дату, когда произошло событие.
Вы также можете выбрать «Полное» или «Маленькое» изображение для события.
На следующем изображении вы можете увидеть пример «полного» изображения.
Более крупные изображения привлекут внимание посетителей к наиболее важным событиям на временной шкале. Однако «Полные» изображения занимают больше места.
На следующем изображении показано то же событие, но на этот раз с изображением «Small».
Если вы хотите добавить много различных событий на свою временную шкалу, то, возможно, вам стоит использовать настройку «Малый».
Это может предотвратить загромождение вашей временной шкалы.
После внесения этих изменений прокрутите страницу до самого верха и нажмите на кнопку «Опубликовать».
Теперь вы можете повторить эти шаги, чтобы создать больше событий.
Хотите увидеть все события, которые вы создали на данный момент?? Тогда просто перейдите в раздел Дополнения к временной шкале » Крутые истории временной шкалы.
После того, как вы создали все события, следующим шагом будет настройка того, как временная шкала будет выглядеть на вашем сайте. Для этого перейдите к разделу Дополнения к временной шкале » Настройки временной шкалы.
Для начала убедитесь, что вкладка «Общие настройки» выбрана.
В ‘Timeline Title’ вы можете ввести заголовок, который будет отображаться над вашей временной шкалой.
Cool Timeline может также показывать изображение над вашей временной шкалой, например, логотип вашей компании. Это может помочь усилить ваш брендинг и дать посетителям понять, что показывает временная шкала.
Чтобы добавить это дополнительное изображение, нажмите на кнопку «Загрузить».
Теперь вы можете выбрать изображение из медиатеки WordPress или загрузить новый файл с компьютера.
Если вы добавите много текста на временную шкалу, она может выглядеть загроможденной и непривлекательной.
Учитывая это, вы, возможно, захотите установить максимальное количество слов, которые будут показаны на временной шкале. Затем вы можете добавить ссылку «Подробнее» для посетителей, которые хотят узнать больше о событии.
Чтобы установить максимальный лимит слов, просто введите число в поле «Длина контента».
Если вы установили ограничение, то неплохо было бы добавить ссылки «Читать далее» на вашу временную шкалу. Cool Timeline добавит эту ссылку во все описания, которые превышают ваш лимит слов.
Чтобы добавить эту ссылку, найдите кнопку ‘Отображать Читать далее?’ раздел. Затем просто нажмите на кнопку «Да».
Теперь вы можете решить, будет ли нажатие на ссылку «Читать далее» показывать остальной текст в той же вкладке или в новой вкладке браузера. Чтобы сделать этот выбор, просто нажмите на радиокнопку «Та же вкладка» или «Новая вкладка».
По умолчанию временная шкала будет показывать год, когда произошло каждое событие. Однако, возможно, вам не всегда нужно показывать эту информацию, например, если все события произошли в один и тот же год.
Чтобы скрыть метку года, просто нажмите на ползунок «Метка года», чтобы переключить его из положения «Показать» в положение «Скрыть.’
По умолчанию первое событие в вашей временной шкале будет отображаться на правой стороне вертикальной линии временной шкалы.
Хотите показать это событие в левой части временной шкалы?? Затем просто нажмите на кнопку «Влево» рядом с «Вертикальная временная шкала начинается с.’
Когда вы будете довольны своими изменениями, нажмите на кнопку Сохранить, чтобы сохранить изменения.
Затем перейдите на вкладку ‘Настройки стиля’.
По умолчанию временная шкала не имеет фона.
Если вы хотите, вы можете добавить цветной фон на вашу временную шкалу, нажав на ползунок Timeline Background, чтобы переключить его с «Нет» на «Да».’
Затем нажмите на кнопку рядом с «Цвет фона истории».’
Теперь вы можете выбрать цвет фона, используя настройки выбора цвета.
На этом экране также есть аналогичные настройки цвета для всех различных частей временной шкалы, включая вертикальную линию и заголовки событий.
Чтобы изменить любой из этих цветов по умолчанию, просто нажмите на кнопку раздела, а затем воспользуйтесь появившимся выбором цвета.
Когда вы будете довольны сделанными изменениями, не забудьте нажать на кнопку Сохранить.
Далее перейдите на вкладку Настройки типографики. Здесь вы можете изменить размер и шрифт, который используется для различного содержимого вашей временной шкалы, например, для заголовка временной шкалы и названия истории.
Если вы измените настройки типографики по умолчанию, не забудьте сохранить изменения, нажав на кнопку Сохранить.
Закончив настройку временной шкалы, вы можете добавить ее на свой сайт.
Просто откройте страницу или пост, где вы хотите показать временную шкалу, а затем нажмите на кнопку +.
Теперь введите ‘Cool Timeline.’ У этого плагина есть несколько различных блоков, поэтому убедитесь, что вы нажали на «Блок шорткода Cool Timeline».’
Теперь вы можете обновить или опубликовать свою страницу в обычном режиме.
Теперь, если вы зайдете на свой сайт, вы увидите временную шкалу в реальном времени.
Метод 2. Как создать несколько временных шкал событий в WordPress с помощью блока Timeline
Вы также можете создать красивую временную шкалу событий в WordPress, используя редактор блоков и «Cool Timeline Block.’
В этом блоке много содержимого для заполнения. Чтобы создать свою временную шкалу, вам просто нужно заменить каждый заполнитель своим собственным текстом и изображениями. Таким образом, вы построите свою временную шкалу более наглядно.
Для начала просто откройте страницу или пост, где вы хотите добавить временную шкалу.
Затем вы можете нажать на значок + и ввести ‘Cool Timeline Block.’ Когда появится этот блок, нажмите, чтобы добавить его на страницу или пост.
В блоке «Крутая временная шкала» есть четыре события-заполнителя.
Чтобы начать, нажмите на первое событие на временной шкале. В правом меню замените заполнитель ‘Story Heading’ на заголовок, который вы хотите использовать для этого события.
Затем введите описание в поле «Описание истории».
После этого найдите поле ‘Primary Label (Date/Steps)’. Здесь введите дату, когда произошло это событие.
По умолчанию блок Cool Timeline показывает первое событие в правой части временной шкалы.
Если вы предпочитаете, то можете показать событие с левой стороны вертикальной линии, нажав на радиокнопку «Слева».
Блок Cool Timeline имеет изображение-заполнитель для каждого события. Чтобы заменить это место на свое собственное изображение, просто нажмите на кнопку «Удалить».
После этого нажмите на кнопку «Загрузить/выбрать изображение».
Затем вы можете выбрать изображение из медиатеки WordPress или загрузить новый файл со своего компьютера.
По умолчанию блок Cool Timeline отображает каждое изображение в полном размере. Если вы хотите показать изображение меньшего размера, просто откройте выпадающий список «Размер изображения» и выберите «Средний» или «Эскиз».’
Как только вы нажмете на изображение разного размера, блок обновится и покажет новое изображение. Это позволит вам попробовать разные размеры, чтобы увидеть, что лучше всего смотрится на вашем сайте.
По умолчанию временная шкала отмечает каждое событие на вертикальной линии точкой. Вы можете заменить эту простую точку на собственный значок. Например, вы можете использовать разные иконки для разных типов событий.
Чтобы посмотреть на различные пользовательские иконки, которые вы можете использовать для своей временной шкалы, просто нажмите на «Custom (Font Awesome Icon)».’
Затем нажмите на значок со стрелкой. Теперь вы можете прокручивать все различные значки.
Когда вы найдете значок, который хотите использовать для этого события, просто нажмите на него.
Теперь вы можете настроить остальные события-заполнители, следуя тому же процессу, который описан выше.
Если вы хотите добавить больше событий на временную шкалу, просто нажмите на иконку «Добавить историю».
Это добавляет новое событие-заполнитель, готовое к настройке.
Когда вы будете довольны тем, как выглядит временная шкала, вы можете обновить или опубликовать страницу в обычном режиме. Если вы зайдете на свой сайт, то увидите временную шкалу в реальном времени.
Мы надеемся, что эта статья помогла вам узнать, как добавить красивую временную шкалу событий на ваш сайт WordPress. Вы также можете ознакомиться с нашим руководством по отслеживанию посетителей вашего сайта WordPress и лучшими телефонными службами для малого бизнеса.
Источник: www.wpbeginner.com