JetElements

Обзор JetElements хочется начать с того, что плагин появился в 2017 году, когда Elementor набирал стремительную популярность. Предприимчивые разработчики начали ловить волну и ребята из Zemez не исключение. Сейчас можно купить JetElements двумя способами:

  1. Как отдельный виджет;
  2. В составе пакета Crockoblock.

JetElements — творение украинских разработчиков и что особенно хорошо, так это поддержка на русском языке. Равно, как и интерфейс. На момент видеообзора, русского ещё не было, а теперь есть.

 

Содержание

Обзор виджетов и функций JetElements

Вес пакет состоит из трёх основных частей:

  1. Дополнительных виджетов;
  2. Дополнительных опций для других элементов Elementor. Например, опции параллакс выводятся в настройках секции;
  3. Готовых шаблонов и блоков.

Все примеры вы можете посмотреть перейдя на страницу покупки JetElements и нажав на кнопку Демо.

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

Advanced Carousel — карусель контента

Виджет состоит из собственных элементов, настраиваемых непосредственно в самом виджете и не предназначен для вывода родных или произвольных записей WordPress. Можно задать:

  • Изображение;
  • Заголовок;
  • Описание;
  • Кнопка.

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

JetElements карусель

Advanced Map — функциональная Google карта

В Elementor, даже в бесплатной версии, есть виджет карты. Однако он крайне посредственный. Никаких тебе стилей и прочих радостей. Чего нельзя сказать про карты в JetElements.

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

JetElements карты Google

 

Animated Box — анимированный блок

По сути, это аналог виджета Flipbox в Elementor Pro. Смысл работы следующий. Есть передняя часть блока и есть задняя. При наведении, передняя часть меняется на заднюю. Фон можно заливать цветом или поставить изображение. За счёт настроек границы, заливки и цветов мы как обычно получаем довольно объёмную вариативность.

Смена сторон сопровождается различной анимацией и даже есть 3D эффект, который смотрится особенно интересно.

JetElements анимированный блок

 

Animated Text — анимированный заголовок

Немного видоизменённый аналог анимированного текста Elementor Pro. Есть статичная часть текста, а есть анимированная. Можно менять вид анимации и задавать разные цвета и шрифты разным частям текста получая неплохое разнообразие и плацдарм для творчества.
JetElements анимированный текст

Audio Player — проигрыватель аудиофайлов

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

JetElements аудиоплеер

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

JetElements баннер

 

Brands — наши клиенты/партнёры

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

JetElements бренды, клиенты, партнёры

Button — продвинутая кнопка

то же, что и обычная кнопка Elementor, но лучше. Чем? А тем, что есть 11 эффектов при наведении и позиция иконки может быть по четырём сторонам: слева, справа, сверху и снизу. Это даёт чуть больший простор для творчества.

JetElements кнопки

Circle Progress — круговой прогресс

Отображение прогресса в виде “бубликов”. Можно изменять единицу отображения прогресса, также отображать как относительные так и абсолютные величины. Настроек достаточно, чтобы делать весьма разнообразные прогрессы.

 

Countdown Timer — таймер обратного отсчёта

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

 

Download Button — кнопка скачать

По умолчанию, если в кнопку или текст вставить ссылку на тот же PDF или изображение, то они будут отрываться в браузере. Это положение вещей можно изменить несколькими способами, но удобно, когда уже есть кнопка, в которую что бы вы не поместили оно точно будет скачиваться. Помимо этого, на кнопке скачать в JetElements можно выводить дополнительную информацию: например иконку типа файлов или размер файла, что выглядит очень дружественно по отношению к пользователю.

Dropbar — выпадающая панель

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

Headline — продвинутый заголовок

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

Horizontal Timeline — горизонтальный таймлайн

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

Image Comparison — сравнение до/после

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

 

Images Layout — сетка для отображения изображений

Позволяет вывести галерею изображений в нескольких макетах: кирпичная кладка (masonry), сетка (grid) и подгонка по размеру (justify). При наведении можно выводить текст и иконку. При клике, открывается увеличенное изображение. Применение у виджета самое широкое. От вывода работ портфолио, до создания эффектных блоков при наведение на которые можно отображать смысловые тезисы, которые показывают компанию с лучшей стороны.

 

Inline SVG — вставка SVG файлов

SVG можно вставить и с помощью обычного виджета Изображение в Elementor. Однако, загружаться оно будет как обычное изображение через html-тег img. Преимущество загрузки SVG кодом в том, что происходит меньше запросов к серверу, а такое дело очень любит Google, когда вы тестируете скорость сайта с помощью Googole Page Speed Insights.

 

Instagram — вывод ленты Инстаграм

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

 

Portfolio — галерея работ по категориям

Выводит галерею работ портфолио, которые могут быть разделены по категориям. В этом случае, над галереей отображается фильтр, с помощью которого можно отсортировать работы без перезагрузки страницы. Как и в случае с виджетом Image Layout, в портфолио есть несколько вариантов макета: кирпичная кладка (masonry), сетка (grid) и подгонка по размеру (justify).

 

Posts — записи блога

Выводит записи и страницы WordPress, как по умолчанию так и произвольные. Также выводит товары WooCommerce, но для этого есть специальные  виджеты. Внешний вид листингов настраивается за счет включения/отключения отображения элементов записи и конечно же стилей. Можно включить карусель записей, что позволит разместить больше записей на меньшей площади. Что примечательно, в записи можно вывести произвольные поля, что даёт чуть больший простор для творчества. Из виджета можно также сделать полноценный слайдер записей во всю ширину экрана.

Price list — прейскурант

Выводит список цен в формате: заголовок, изображение, цена, кратное описание. По своим свойствам виджет напоминает одноимённый виджет в Elementor Pro. Разве что возможностей по стилизации больше.

 

Pricing Table — таблица цен

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

 

Progress Bar — шкала прогресса

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

Scroll Navigation — полноэкранная прокрутка

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

 

Services — услуги

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

 

Slider

Простой слайдер изображений и надписей. Можно отображать узкий или во всю ширину.

 

Subscribe — подписка на рассылку

Размещает форму подписки на новостную ленту и маркетинговые рассылки. Интегрируется с сервисом Mailchimp.

Table — таблицы

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

Team Members — команда

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

 

Testimonials — отзывы

Отображение отзывов в виде карусели. В один элемент может входить: изображение, иконка, заголовок, текст отзыва, имя, должность, дата. Настраивается навигация и скорость прокрутки.

 

Vertical Timeline — вертикальный таймлайн

Мы уже смотрели на подобный виджет, но в горизонтальном исполнении. Вертикальный таймлайн также позволяет вывести изображение и текст в выбранной вами последовательности. Области применения различные, но самая частая — это визуализация каких-либо вех. Он и называется в буквальном переводе “временная линия”

 

 Video Player — видео плеер

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

Weather — погода

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

Виджеты для WooCommerce

Выводят товары по разным критериям. По сути, всё то же самое можно вывести родными шорткодами WooCommerce. Просто с виджетами это сделать немного проще. Никаких настроек стилей у виджетов нет. Просто просто выводится сетка с дизайном, заложенным в вашу активную тему. Итак, виджеты:

  • Recent Products — последние товары;
  • Featured Products — рекомендуемые товары;
  • Sale Products — распродажа;
  • Best Sellers — бестселлеры;
  • Top Rated Products — с наивысшим рейтингом;
  • Product — показать один конкретный товар;

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

Contact Form 7

Виджет для оформления форм обратной связи, созданных плагином Contact Form 7. Можно настроить 95% того, что доступно в CF7 касательно внешнего вида формы. В видеоообзоре говорилось про то, что разработчики слукавили показав горизонтальные формы, но не дав функционала для этого. Позже они реабилитировались и предоставили генератор разметки для таких форм.

Параллакс эффект в Elementor

Создайте объём за счёт распараллеливания  движений фоновых элементов. Возможно задать 2 типа параллакса:
  • Mouse parallax — элементы реагируют на движение мыши;
  • Scroll parallax — элементы реагируют на прокрутку колесом мыши.

Настройки параллакса встраиваются в настройки макета секции Elementor. Оттуда же добавляются элементы для создания эффекта. Показывать как выглядит параллакс на картинке — кощунство. Переходите и смотрите демо, там красиво ))

Шаблоны для Elementor

JetElements умеет вставлять шаблоны готовых страниц и блоков прямо в библиотеку шаблонов Elementor. Первых немного, но они есть и это хорошо. Блоков же достаточное количество и есть для каждого вышеописанного виджета.

Заключение

Мы посмотрели на все виджеты и функции JetElements. Разумеется, с появлением новых, этот обзор будет дополняться. А пока, приятного пользования, вдохновения и хорошего дня.