Обзор темы Kadence (FREE и PRO)

Обзор темы Kadence

Если вы ищите хорошую бесплатную или платную тему, то обратите внимание на Kadence.

В 2021-2022 годах это определенно «Тема следующего поколения», и в этой статье я постараюсь объяснить, почему.

Компания Kadence появилась в 2013 году на северо-западе США в штате Монтана. Основатель и главный разработчик Бен Ритнер, его девиз «помогать людям делать красивые сайты».

В апреле 2021 года компания iThemes приобрела Kadence, и вся команда разработчиков перешла на работу в iThemes.

Kadence — это тема, которая не уступает по скорости загрузки и возможностям кастомизации темам Astra, GeneratePress, Blocksy, Neve и другим лучшим темам.

В бесплатной версии темы вы получаете функционал, за который во многих премиум-темах нужно платить. И в платной версии — функционал, сравнимый с Elementor Pro, но без необходимости его использовать.

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

В этой статье обзор бесплатной и платной версий темы Kadence.

Содержание:

Насколько хороша тема Kadence
Скорость загрузки Kadence

Бесплатная версия Kadence

Премиум версия Kadence

Другие плагины Kadence

У темы более 1 млн. установок и около 200 отзывов с 5 звездами со средним рейтингом 98%.

По данным сайта builtwith.com в середине 2022 года тема Kadence занимает 25-е место по популярности в России и 31-е в мире.

При этом популярность темы растет, в том числе на самых посещаемых сайтах в Интернете:

Использование темы Kadence
Популярность темы Kadence

Насколько хороша тема Kadence

Я разделяю все Вордпресс темы на 2 категории:

  1. Темы, которые строятся снизу.
    То есть нужно выбрать шрифты, цвета, добавить отступы и другие параметры, и из этих элементов строить блоки и сайт. Настроек в кастомайзере больше, чем готовых блоков или шаблонов.
    Примеры: GeneratePress, Blocksy, OceanWP.
  2. Темы, которые строятся сверху.
    Вы выбираете шаблон сайта с готовыми стилями и выбираете наполнение страниц из уже готовых стилизованных блоков. Готовых блоков и шаблонов больше, чем настроек в кастомайзере.
    Примеры: Flatsome, и другие темы на ThemeForest.

Хотя Kadence предлагает более 60 готовых сайтов и большое количество готовых блоков для любого случая, я отношу тему Kadence скорее к первой категории.

И в первой категории Kadence — самая лучшая, или одна из лучших тем, потому что:

  • Скорость работы и SEO. Это одна из самых быстрых тем наравне с Astra и GeneratePress, с учетом всех SEO-требований.
  • Функционал многих премиум-тем в бесплатной версии
  • 60 готовых сайтов и множество блоков для редактора Гутенберг
  • Около 20 плагинов для расширения функционала
  • Собственный плагин с блоками Гутенберг
  • Глобальная палитра цветов

В бесплатной версии Kadence больше опций, чем в большинстве платных тем:

  • Конструктор хедера и футера
  • Липкий хедер
  • Прозрачный хедер
  • Возможность убрать брендинг Kadence в футере
  • Кнопка Вернуться вверх
  • Большое количество настроек для страниц и архивов, в том числе WooCommerce
  • Интеграция со всеми пейдж-билдерами, включая Gutenberg и Elementor
  • Интеграция и настройка страниц LearnDash, Lifter LMS и Tutor LMS
  • SVG иконки без дополнительного плагина
  • И многое другое

Kadence — красивая, легкая, SEO-подготовленная тема с большим функционалом и простым интерфейсом.

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

Скорость загрузки Kadence

Первое преимущество темы Kadence — скорость загрузки.

С середины 2021 года требования Core Web Vitals от Google являются фактором ранжирования сайтов. Чтобы пройти тест скорости Гугл и получать трафик от поисковиков, нужно чтобы страницы загружались за 2 секунды и меньше.

Для этого нужно использовать легкую тему.

Несмотря на большой функционал, Kadence работает очень быстро.

С помощью плагина Kadence Blocks я сделал страницу, на которой находятся два слайдера с товарами WooCommerce, несколько галерей с изображениями и блок с текстами и картинками. В шапке сайта находится поп-ап с формой обратного звонка и мега-меню.

БЕЗ плагина кеширования эта страница получила такую оценку:

Тема Kadence - тест скорости Google без плагина кеширования
Тема Kadence - тест скорости Google без плагина кеширования

Это очень хороший результат, такой результат показывают некоторые плагины кеширования.

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

Тема Kadence - тест скорости Google с плагином кеширования
Тема Kadence - тест скорости Google с плагином кеширования

Локальная загрузка Google шрифтов

Загружать шрифты со своего сервера — одно из требований сервисов Google Page Speed, Pingdom и других.

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

Обычно для локальной загрузки шрифтов используется плагин Optimize My Google Fonts, или функционал премиум-темы, где нужно добавить все варианты написания шрифтов вручную.

В теме Kadence это делается с помощью одной кнопки:

Локальная загрузка шрифтов Google

Системные шрифты

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

Для использования системных шрифтов выберите «System Default» в настройках Типографики.

Системный шрифт по умолчанию

Когда вы выберете «System Default», ваш сайт будет показывать тот шрифт, который установлен в качестве шрифта по умолчанию на устройстве, через которое посетитель заходит на сайт.

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

Бесплатная версия Kadence

Слоган темы Kadence — «Next Generation Theme», то есть Тема нового поколения.

Так и есть, раньше в премиум-темах находилось то, что сейчас находится в бесплатной версии Kadence.

Второе преимущество Kadence — полноценный конструктор шапки и футера без ограничений.

Перетащите выбранные виджеты в нужные ячейки хедера и нажмите Сохранить.

Конструктор хэдера
Конструктор хедера

Вы можете использовать два виджета с навигацией, виджет с SVG иконками соцсетей (без необходимости использовать дополнительный плагин), кнопку призыва к действию, Поиск, Корзину и виджет HTML.

Хедер можно сделать липким и / или прозрачным.

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

Конструктор футера работает так же, — 3 ряда, которым вы можете выбрать цвет фона, градиентный фон или фоновое изображение. И 8 стандартных виджетов:

  • Логотип
  • Основная навигация
  • Дополнительная навигация
  • Соцсети
  • Поиск
  • Корзина
  • Кнопка призыва к действию
  • Произвольный HTML

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

Глобальная палитра цветов

Kadence — одна из первых тем, которая начала использовать глобальные цвета в теме.

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

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

Глобальная палитра цветов Kadence
Глобальная палитра цветов Kadence

Первые два цвета — фирменные цвета / акцент. Следующие 4 — контрастные цвета для заголовков, границ полей, итд. Последние 3 цвета — базовые цвета для фона элементов и сайта:

Глобальная палитра цветов Kadence
Глобальная палитра Kadence

Кастомизатор Kadence

Настройки Kadence находятся в стандартном месте Вордпресс Внешний видНастроить.

Все настройки сгруппированы по смыслу и интуитивно понятно, где найти нужные настройки:

Настройки Kadence
Настройки Kadence

Во многих темах настройки элементов и их цвета находятся в разных разделах кастомайзера. В Kadence все настройки каждого элемента находятся в одном месте.

Настройки шапки
Весь хедер
Настройки дизайна шапки
Весь хедер — дизайн
Настройки главного ряда шапки
Средний ряд
Настройки дизайна главного ряда шапки
Средний ряд — дизайн

Для настройки элементов темы кликните по нужному элементу, выберите его в списке элементов или нажмите на значок шестерёнки:

Кастомизатор Kadence
Настройщик Kadence

Шаблоны страниц

В кастомизаторе Kadence много настроек для отображения страниц и архивов страниц, в том числе страниц и архивов WooCommerce:

Настройки архивов постов и страниц
Настройки архивов постов и страниц
Настройки архивов товаров WooCommerce
Настройки архивов товаров WooCommerce
Настройки карточки товара WooCommerce
Настройки карточки товара WooCommerce

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

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

Например, в архивах постов и постах вы можете отображать Сайдбар 1, в архивах товаров вы можете отображать Сайдбар 2, в карточках товаров отключить сайдбар.

Индивидуальные настройки страниц

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

Настройки разметки отдельных страниц

Типографика

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

Готовые пары шрифтов

Иконки SVG

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

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

Тема Kadence одна из первых, которая предлагает встроенные в тему SVG иконки. Сразу после установки доступны 2 набора с 1.500+ иконок и возможностью редактировать их свойства.

SVG — это Scalable Vector Graphics, или масштабируемая векторная графика. Это векторные изображения, которые можно использовать в любом размере (разрешении) без потери качества.

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

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

Если вам нужно закрепить только последний виджет, то включите эту настройку:

Липкий сайдбар

Если вам нужно добавить виджет Похожих записей в конце постов в Блоге, то включите их в настройках темы:

Слайдер Похожие посты

Выберите количество постов и, если надо, прокрутку карусели по кругу.


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

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

Kadence совместима со всеми конструкторами страниц, и имеет свой собственный набор блоков для редактора Гутенберг Gutenberg Blocks.

Премиум версия Kadence

Если в бесплатной версии Kadence находится то, что раньше находилось в платных версиях, то что находится в платной версии Kadence?

  • Продвинутый конструктор хедера и футера с дополнительными виджетами
  • Условные хедеры, то есть разные шапки для разных страниц
  • Блоки, которые можно вставлять в разные части страниц
  • Мега-меню
  • Дополнения для WooCommerce
  • Скрипты в <head> и <footer>
Функционал Kadence Premium
Функцтонал Kadence Premium

Продвинутый конструктор хедера и футера

Хотя в бесплатной версии конструктор хедера и футера уже предлагает достаточно, чтобы создать блог или сайт компании, в премиум версии добавляется ещё несколько виджетов:

  • Значок входа в профиль с выпадающим меню или поп-апом (с Login и Logout состояниями)
  • Поле поиска
  • Виджет контактов
  • Переключатель с выезжающей панелью, в которую можно добавить виджеты
  • Разделитель
  • Разделитель 2
  • Разделитель 3
  • Виджет HTML 2
  • Кнопка 2
  • Навигация 3
  • Навигация 4

Этот хедер я сделал за 5 минут в конструкторе шапки:

Пример шапки Kadence

Я добавил SVG иконки соцсетей, которые находятся в бесплатной версии темы. В виджете соцсетей доступно 33 соцсети, включая ВКонтакте и Одноклассники, и 3 кастомных слота для добавления собственных иконок и ссылок.

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

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

Еще один пример шапки для интернет-магазина, созданной с помощью премиум версии Kadence:

Пример шапки Kadence

Я добавил виджет Корзины, которому можно задать 3 варианта поведения: ссылка на страницу Корзина, выезжающее справа или слева меню по клику и выпадающее меню по наведению.

Слева от Корзины я добавил поле для поиска только по товарам.

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

Так эта шапка выглядит в конструкторе:

Конструктор шапки Kadence Premium
Конструктор шапки Kadence Premium

Условный хедер

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

Обычно условные хедеры используются в таких случаях:

  • На главной странице — упрощенное меню на главные услуги сайта. Часто хедер делают прозрачным на фоне какого-то изображения.
  • В блогах — иногда разные шапки показываются на разных категориях или на определенных статьях.
  • На мембершип-сайтах — разные шапки для авторизованных и неавторизованных пользователей.
  • В интернет-магазинах — предыдущие варианты и упрощенная шапка на Оформлении заказа, чтобы не отвлекать посетителя завершить покупку.

Kadence Elements

Одна из самых крутых функций Kadence, с помощью которой можно делать 3 вещи:

  • Создавать шаблоны архивов (категорий, меток, кастомных таксономий) и страниц (записи, страницы, кастомные типы страниц)
  • Добавлять свой контент, созданный с помощью блоков Гутенберг, плагинов или конструкторов страниц в хуки темы или плагинов (например, WooCommerce). Например, добавить партнерский дисклеймер под шапкой сайта в хук Before Entry Content на всех страницах, отмеченных меткой «партнерка». Пример хуков на странице /checkout.
    Также можно добавлять кастомный код в код определенных страниц, например, скрипт чата, скрипт аналитики или собственный css.
  • Заменять контент темы (например, заголовки страниц или футер) на свой контент.

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

То есть с помощью этого инструмента можно создать любую разметку любой страницы или архива.

Пример создания кастомного архива и кастомного типа страницы:

Другие сценарии использования Kadence Elements:

  • Добавить иконки Поделиться в соцсетях до или после контента в Блоге,
  • Партнерский баннер до или после сайдбара в зависимости от категорий записей,
  • Форма подписки после записи в Блоге,
  • Реклама после Х абзацев в записях,
  • Таймер обратного отсчета с кнопкой призыва к действию под шапкой сайта
  • И так далее.

Мега меню

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

Пример мега-меню из документации на официальном сайте:

Мега меню Kadence

Дополнения WooCommerce

В премиум версии добавляется функционал для WooCommerce:

  • Возможность создать кастомную страницу Магазин /shop/ из блоков Гутенберг или с помощью других конструкторов страниц
  • AJAX кнопка Добавить в Корзину (добавление в Корзину без перезагрузки страницы)
  • Выезжающее меню на странице Магазин для добавления любых виджетов, например, фильтрации
  • Открывающаяся сбоку Корзина при добавлении товара

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

Кроме этого функционала для WooCommerce есть несколько плагинов Kadence:

  • Kadence Blocks — возможность выводить карусели или сетку товаров с возможностью фильтрации
  • Kadence Shop Kit — различные дополнения для интернет-магазина (примеры на странице плагина):
    • Возможность создавать собственные шаблоны для архивов товаров и карточек товаров
    • Переключатель вариаций — красивые иконки вместо стандартного выпадающего списка
    • Слайдер с настройками вместо стандартной галереи в карточке товара
    • Возможность создавать кастомные табы в карточке товара
    • Продвинутые отзывы о товарах вместо стандартных в карточке товара
    • Настройки для вариативных товаров
    • Настройки для партнерских товаров
    • Кастомный текст на кнопке В корзину для разных типов товаров
    • Поп-ап в карточке товаров для отображения атрибутов товаров, например, размера
    • Всплывающие сообщения о событиях WooCommerce вместо стандартных
    • Условные сообщения в Корзине (при выборе товара Х предложить товар Y)
    • Редактор полей на странице Оформления заказа
    • Поп-ап для использования купона на Оформлении заказа
    • Дополнительная таксономия — Бренды
    • Дополнительное поле для описания на страницах архивов товаров
  • WooCommerce Email Designer — возможность создавать кастомные е-мейлы на события WooCommerce

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

То есть вы можете создавать шаблоны страниц и архивов, включая WooCommerce, с использованием собственных инструментов Kadence. C помощью бесплатного плагина CPT UI вы можете создавать кастомные типы страниц, и делать шаблоны страниц и архивов для них.

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

Все остальное вы можете делать с помощью виджетов Kadence Blocks и готовых шаблонов сайтов и блоков.

Если вы хотите использовать Elementor или SiteOrigin для создания страниц и шаблонов WooCommerce, то у Kadence есть плагины для этого:

У темы Kadence большой функционал для создания интернет-магазинов. Если вы собираетесь делать интернет-магазин, и ищете подходящую тему, попробуйте Kadence.

Кроме этого, у Kadence есть еще несколько собственных плагинов для расширения функционала:

  • Kadence Slider — Легкий и мощный слайдер с возможностью настройки всех параметров на каждом слое отдельно.
  • Kadence Conversions — Создание маркетинговых поп-апов, выезжающих панелей и банеров по определенным условиям, например, глубина скролла вниз, проведенное время на сайте, намерение закрыть вкладку браузера, и так далее.
  • Kadence AMP — Добавляет AMP страницы, в том числе WooCommerce.
  • Kadence Galleries — Создает галереи и альбомы. На каждом изображении можно показывать подпись, название и категорию. Возможность настроить фильтрацию и выбрать один из нескольких шаблонов отображения.
  • Kadence Fullpane Vertical Slider — Вертикальный слайдер на весь экран. Несколько примеров на странице плагина.
  • Kadence Page Transitions — Добавляет анимацию во время загрузки / переходов между страницами.
  • Kadence Related Content — Выберите, какой именно контент и где вы хотите показывать вашим посетителям.
  • Kadence Widget Dock — Позволяет добавить всплывающий контент, например, специальные предложения поверх контента на краях экрана.
  • Kadence Simple Share — Простые, легкие кнопки Поделиться в соцсетях, которые вы можете вставить в любое место, например, до или после контента на страницах Блога.
  • Kadence Pricing Table — Красивые шаблоны таблиц цен с настройками.
  • Kadence Reading Time — Добавляет в посты Примерное время чтения, основываясь на длине текста.
  • Kadence Custom Fonts — Возможность добавить и использовать собственные шрифты на сайте.
  • Kadence reCAPTCHA — Добавляет защиту от спама в формы комментариев, логина и обратной связи.

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

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

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

Для создания интернет-магазина у Kadence особенно много инструментов.

Если у вас уже есть дизайн вашего будущего сайта / вы хорошо себе представляете, что именно вы хотите сделать, или вам подошел один из шаблонов сайта, то тема Kadence определенно подходит для того, чтобы сделать сайт на ней.

У меня есть Kadence Premium и Kadence Blocks Premium, я использую их для создания сайтов, поэтому могу порекомендовать их вам. Вы не будете разочарованы.

Если тема Kadence вам понравилась, вы можете ее купить на сайте разработчика:

Читайте также:

  1. Обзор темы Astra

Надеюсь, статья была полезна. Оставляйте комментарии.

Ответить

Ваш адрес email не будет опубликован.

Techbear

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

WordPress   WooCommerce   Membership   Elementor   ACF

Обновления блога

Techbear