Kirki: первый визуальный конструктор сайтов на WordPress с бесконечным холстом

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

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

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

В этом обзоре мы сравним Kirki с традиционными конструкторами сайтов WordPress по наиболее важным факторам, включая:

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

В итоге мы сформируем четкое представление о конструкторе Kirki.

Что собой представляет Kirki

Kirki – это визуальный конструктор сайтов для WordPress, не требующий написания кода, разработанный для решения задач, с которыми не способны справиться иные билдеры страниц.

В отличие от других конструкторов, Kirki – это универсальное решение. В нем есть все необходимое для создания веб-сайтов без каких-либо зависимостей от сторонних сервисов.

И, что самое интересное, это все включено в подписку, потому вы не столкнетесь с неожиданными дополнительными платежами.

Самый многофункциональный бесплатный конструктор WordPress

Да, у Kirki есть бесплатная версия, и она достаточно мощная.

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

Масштабирование без ограничений с тарифным планом Pro

Чтобы получить доступ к расширенным возможностям Kirki, можно воспользоваться тарифными планами Pro, которые вполне доступны по цене.

К примеру, тарифный план Starter стоит всего $59 в год за один сайт и включает в себя все премиум-возможности. В Elementor Pro тариф Essential начинается с 60 долларов в год и дает доступ далеко не ко всем возможностям.

Также в Kirki есть тариф Lifetime, который стоит $499 разово. В итоге вы можете неограниченно использовать конструктор навсегда. Никаких продлений, никаких дополнительных платежей, никаких сюрпризов.

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

Сравнение производительности сайтов

Производительность напрямую влияет на пользовательский опыт, SEO и коэффициенты конверсии. Чтобы получить четкое представление о том, как разные конструкторы страниц влияют на производительность, мы протестировали Kirki и Elementor в идентичных условиях.

Мы установили оба конструктора на чистую сборку WordPress, используя стандартную тему Twenty Twenty-Five. Затем мы создали идентичные макеты, используя сопоставимые элементы дизайна, и провели аудит производительности Lighthouse, чтобы оценить время загрузки, адаптивность и показатели Core Web Vitals.

Производительность Kirki

Производительность Elementor

Код Kirki

Код Elementor

Разница очевидна сразу. Kirki создал более чистый DOM с меньшим количеством div без лишних оберток, что привело к более быстрой загрузке и более высоким оценкам.

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

Если вам приоритетны чистый код, быстрая загрузка и техническая эффективность, Kirki будет для вас номером один.

Изучаем функционал

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

Бесконечный холст для свободы дизайна

Что отличает Kirki от существующих конструкторов страниц, так это его бесконечный холст.

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

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

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

Редактор поддерживает как светлый, так и тёмный режимы для более комфортной работы.

Если вы работали с Figma или Webflow, вы сразу почувствуете себя как дома.

Одновременное редактирование всех адаптивных представлений

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

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

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

Мгновенная передача из Figma в Kirki

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

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

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

Для работы с динамическим контентом не требуются сторонние плагины

В традиционном WordPress для работы с динамическим контентом требуется установка ACF или других сторонних плагинов.

В Kirki все это интегрировано изначально. Он поставляется с мощным менеджером динамического контента (Dynamic Content Manager), который позволяет:

• Создавать произвольные типы контента и поля.
• Использовать ссылки и мультиссылочные связи.
• Визуально создавать динамические шаблоны.
• Добавлять динамическое SEO к страницам шаблонов.
• Применять расширенную фильтрацию к элементам Collection.

И все это без написания кода или использования сторонних плагинов.

Многократно используемые стили с редактированием на базе классов

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

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

Вот что это значит:

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

CSS-переменные для глобальной стилизации

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

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

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

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

Создавайте сложные взаимодействия и анимации визуально

Когда дело доходит до современной анимации и интерактивного дизайна, Kirki значительно превосходит традиционные конструкторы страниц WordPress.

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

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

Для опытных пользователей Kirki включает редактор на основе временной шкалы, где вы можете:

• Создавать многошаговые анимации.
• Точно настраивать переходы с помощью тайминга, плавности, задержек и последовательности.
• Задавать текстовые анимации.

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

Конструктор сайтов Kirki помогает вам выйти за рамки стандартных шаблонов при создании уникальных анимаций и сложных взаимодействий.

Бесшовное управление интеграциями с помощью приложений Kirki

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

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

Первый реальный опыт многопользовательского совместного редактирования и комментирования в WordPress

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

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

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

Встроенный контроль качества

Перед публикацией вашего сайта Kirki помогает убедиться в его технической исправности с помощью встроенного инструмента аудита страниц.

Он автоматически сканирует ваш макет на:

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

Таким образом, вы не просто создаете красивые страницы — вы с уверенностью выпускаете быстрые, доступные и SEO-оптимизированные веб-сайты.

Параметры тем и макета

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

Наборы шаблонов для полного создания сайтов

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

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

Страницы с готовым дизайном

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

Готовые разделы

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

Насколько легко использовать Kirki?

Kirki значительно улучшился в плане доступности.

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

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

Чтобы помочь вам быстро освоиться, Kirki включает в себя:

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

Что говорят пользователи

Для многих пользователей Kirki — это больше, чем просто конструктор сайтов. Это универсальный инструмент, которого всегда не хватало в WordPress. Его называют будущим WordPress, действительно отличной альтернативой таким инструментам, как Framer и Webflow.

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

Источник: https://www.smashingmagazine.com