Как создать график в WordPress с элементом

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

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

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

Типы сроков и их варианты использования

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

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

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

Варианты использования для вертикальных сроков:

• История компании или путешествие по росту
• Резюме или карьерные основные моменты
• Серия сообщений в блоге или прогресс статьи
• Пошаговый процесс объяснений
• Вехи разработки продукта

2. Горизонтальная временная шкала

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

Варианты использования для горизонтальных сроков:

• Проектные дорожные карты или этапы планирования
• Графики событий
• Маркетинговые кампании или запуска продуктов
• Портфельные презентации
• Образовательные сроки или исторические обзоры

Как создать график в WordPress с элементом

Как уже говорилось, Elementor-это плагин Builder Cract-Drop. Но печальная новость заключается в том, что он не включает в себя виджет для создания сроков. Тем не менее, плагин имеет много дополнений, с помощью которых вы можете расширить функции плагина Core Elementor.

HappyAddons - один из них. Он поставляется с более чем 130 виджетами и 22+ функциями, которые могут преодолеть многие недостатки элементар. Итак, установив плагин HappyAddons, вы можете включить больше функций дизайна на вашем сайте. Во многих случаях вам даже не понадобится Elementor Pro, если у вас есть HappyAddons.

Давайте теперь рассмотрим, как создать сроки в WordPress с Ementor и HappyAddons.

Как создать горизонтальную временную шкалу в WordPress

Надеюсь, вы уже знаете, что такое горизонтальная временная шкала. У HappyAddons есть горизонтальный виджет временной шкалы , который полностью свободен в использовании. Таким образом, вам нужны следующие плагины, которые будут установлены и активированы первым на вашем сайте.

• Элементар
• HappyAddons

После того, как у вас установлены плагины и активированы на вашем сайте, начните выполнять шаги, объясненные в учебном пособии ниже.

Шаг 01: Создайте раздел на холсте Ementor

Откройте сообщение или страницу с элементом. Создайте раздел с нужной структурой столбца Flexbox, чтобы создать график.

Шаг 02: Добавьте горизонтальный виджет временной шкалы на холст

Найдите горизонтальный виджет временной шкалы на панели Elementor. Как только вы найдете его, перетащите виджет на холст.

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

Шаг 03: Выберите предустановку для виджета

Предуставление - это предопределенный стиль дизайна или макет, который вы можете мгновенно применить к виджету для быстрой настройки. Если вы не хотите разрабатывать виджет с нуля, вы можете выбрать предустановку. Горизонтальный виджет сроков поставляется с шестью пресетами.

Выберите предварительную установку , которая вам нравится для виджета.

Шаг 04: Добавьте содержимое в виджет горизонтальной временной шкалы

Расширить раздел временной шкалы . Здесь вы получите параметры, чтобы добавить контент в виджет. По умолчанию вы получите четыре вкладки. Нажмите на любую вкладку , чтобы расширить ее. Это откроет много полей, где вы можете разместить и добавить желаемую информацию.

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

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

Точно так же добавьте контент во все вкладки сроков. Вы можете видеть, что мы сделали это на изображении, прикрепленном ниже.

Чтобы добавить больше вкладок в виджет, нажмите кнопку «Добавить элемент» под вкладкой Timelive.

Шаг 05: Настройте настройки для виджета горизонтальной временной шкалы

Как только часть контента будет выполнена, разверните раздел «Настройки» на вкладке Content. Вы можете настроить заголовок HTML, выравнивание контента, стрелку содержимого, включить Lightbox, скорость анимации, количество слайдов, чтобы показать, значок и многое другое.

Они так легко настроить. Мы надеемся, что вы сможете сделать их в одиночку сами.

Шаг 06: стилизовать горизонтальный виджет временной шкалы

Чтобы стилизовать виджет, перейдите на вкладку «Стиль» на панели Elementor.

Во -первых, расширить раздел временной шкалы .

Вы получите варианты для настройки толщины линии, цвета линии, расстояния дат, типографии даты, цвета, значка, радиуса границы, типа границы, ширины границы, цвета фона и т. Д.

Исследуйте их и выполните необходимые настройки.

Вы можете видеть, что мы внесли некоторые изменения в горизонтальную временную шкалу.

Затем разверните раздел стрел . Отсюда вы можете настроить значки стрел, их позиции, размеры, ширину границы, радиус и многое другое .

Точно так же расширить раздел контента вкладки «Стиль». Вы можете настроить радиус границы, прокладку, пространство между содержимым, тип границы, ширину границы, цвет, тень, типография и больше виджета.

Сделайте необходимые изменения.

Шаг 07: Предварительный просмотр виджет горизонтального срока

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

Как создать вертикальную временную шкалу в WordPress

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

• Элементар
• HappyAddons
• HappyAddons Pro

После того, как они будут доступны на вашем сайте, начните следовать учебному пособию, объясненному ниже.

Шаг 01: перетаскивать виджет временной шкалы на холст Ementor

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

Вертикальная временная шкала будет создана на холсте с макетом по умолчанию.

Шаг 02: Выберите предустановку для виджета вертикальной временной шкалы

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

Шаг 03: Добавьте контент в вертикальную временную шкалу

Расширить раздел временной шкалы . По умолчанию вы увидите две вкладки. Разверните любую вкладку, нажав на нее, как мы показали вам выше.

Надеюсь, вам не нужно много говорить здесь. Потому что вы можете добавить почти тот же тип контента в временную шкалу Verticle, что и в случае горизонтальной временной шкалы.

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

Завершите добавление контента к временной шкале. Вы даже можете добавить больше элементов в временную шкалу, нажав на элемент + добавить, как показано выше.

Шаг 04: Настройте настройки для виджета вертикальной временной шкалы

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

Сделайте настройки самостоятельно. Но для нас выравнивание по умолчанию выглядит хорошо. Итак, мы придерживаемся этого для учебника.

Шаг 05: стилизовать вертикальный виджет сроков

Приходите на вкладку «Стиль» на панели Elementor. Вы можете настроить все типы контента и визуальных элементов на виджете с этой вкладки.

Во -первых, разверните контент . Вы можете настроить типографику, цвет, цвет стрел, тип фона, тип границы и ширину границы . Сделай это.

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

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

Точно так же настройте внешний вид времени и даты . Мы изменили его цвет, вес и типографику.

Наконец, разверните раздел кнопки . Вы можете стилизовать его цвет фона, копировать типографику и другие .

Шаг 06: предварительный просмотр вертикального виджета сроков

Приходите на страницу предварительного просмотра и проверьте, работает ли график Verticle или нет. Сделайте это, прокрутив виджет. Мы надеемся, что с вашей стороны будет нормально работать.

Таким образом, вы можете создавать различные типы разделам сроков на своем веб -сайте, чтобы чудесно представить различный контент.

Вещи, которые вы можете делать с HappyAddons

HappyAddons, честно говоря, всеобъемлющий плагин. Вы обязательно влюбитесь в этот плагин сразу после его использования на этот раз. Посмотрите на следующие вещи, которые вы можете сделать с плагином.

а Используйте бесплатный строитель темы

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

беременный Woocommerce Friendy

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

в Крестная копия вставки

С помощью этой функции вы можете напрямую скопировать те же виджеты, разделы и страницы с одного веб -сайта в другой домен. Это может сэкономить вам ценное время, так как вам не всегда нужно начинать с нуля. В следующем видео объясняется функция Cross-Domain Copy Paste в плагина.

дюймовый Проектируйте креативный контент

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

эн. Показать статистическую информацию

В отличие от многих других дополнений Elementor, этот плагин предлагает несколько виджетов диаграммы, с помощью которых вы можете продемонстрировать статистическую информацию и создавать инфографические посты и страницы. Узнайте, как создать инфографическую страницу с элементом.

В дополнение ко всем этим, есть еще много вещей, которые вы можете сделать с плагином HappyAddons.

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

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

Если вам понравился этот пост, мы просим вас сообщить нам через поле для комментариев ниже. Кроме того, если у вас есть какие -либо вопросы относительно плагина HappyAddons, вы можете оставить сообщение в поле чата. Наш живой агент поддержки придет, чтобы ответить вам как можно скорее.

Спасибо, что были с нами до конца. Мы желаем вам счастливого дня впереди.