Экспериментальный инструмент для разработки искусственного интеллекта в WordPress, Telex, уже используется в реальных условиях, всего через несколько месяцев после его дебюта в сентябре. На ежегодном мероприятии компании «Состояние мира» во вторник в Сан-Франциско соучредитель проекта WordPress и генеральный директор Automattic Мэтт Малленвег привел несколько примеров использования Telex в работающем магазине WordPress для таких задач, как сравнение цен, создание калькуляторов цен, отображение рабочего времени в режиме реального времени и ссылка на карту с указанием розничного магазина.
Telex, который Малленвег ранее описывал как «v0 или Lovable, но специально для WordPress», по сути, является попыткой издательской платформы создать собственный инструмент для вайб-кодирования вайба в эпоху искусственного интеллекта. Это программное обеспечение позволяет разработчикам создавать блоки Гутенберга — модульные элементы текста, изображений, колонок и т. д., из которых состоит сайт WordPress.
Несмотря на то, что программное обеспечение всё ещё считается экспериментальным, Малленвег смог продемонстрировать несколько реальных примеров, созданных создателем сообщества Ником Хамзе.
В первом примере Малленвег продемонстрировал инструмент для сравнения цен, созданный с помощью Telex. Он отметил, что раньше разработчикам приходилось создавать такие многофункциональные интерактивные веб-элементы с нуля, а теперь это можно сделать за несколько секунд.
В другом примере разработчик использовал Telex, чтобы добавить в блок заголовка своего сайта на WordPress часы работы магазина в реальном времени, номер телефона и ссылку для построения маршрута.
Также было показано, как с помощью Telex можно создать карусель с логотипами партнёров на сайте компании, настроить ценообразование, интегрировать Календарь Google и создать сетку для постов на главной странице WordPress, где карточки с постами на сайте имеют одинаковую высоту.
«Опять же, раньше для того, чтобы нанять разработчиков и создать подобное программное обеспечение на заказ, нужно было потратить тысячи, десятки тысяч долларов, даже несколько лет назад. Теперь мы можем сделать это в браузере за копейки, — сказал Малленвег. — Это просто безумие».
В электронном письме для TechCrunch Хамзе рассказал о возможностях Telex: «Меня поражает и должно поразить вас то, что я не разработчик. Я не могу написать ни строчки кода, но я могу описать Telex, что мне нужно, и он сделает это за меня. Эта свобода опьяняет, и я полностью доверяю искусственному интеллекту», — сказал он.
«Я думаю, что до тех пор, пока люди будут считать эти инструменты «инструментами для разработчиков», они будут упускать из виду то, чего они на самом деле могут достичь, а именно — дать обычным людям возможность делать то, что раньше было невозможно», — добавил Хамзе.
Демонстрационные версии Telex обсуждались наряду с другими инициативами WordPress, ориентированными на искусственный интеллект, включая архитектурные разработки, такие как Abilities API и адаптер MCP. Первый определяет, что может делать WordPress, чтобы системы искусственного интеллекта могли это интерпретировать, как объяснила компания, а второй предоставляет доступ к этим возможностям, чтобы любой MCP-совместимый инструмент мог их понять и использовать.
«Этот шаблон адаптера означает, что WordPress может участвовать в рабочих процессах с использованием ИИ без дублирования логики или создания отдельных интеграций для каждой платформы ИИ, — сказал Малленвег участникам мероприятия. — Таким образом, теперь вы можете подключить установку WordPress к таким популярным инструментам, как Claude, Copilot и многим другим платформам, поддерживающим MCP».
Кроме того, он отметил, что разработчики уже используют ИИ в своей повседневной работе с помощью таких инструментов, как Cursor, Claude Code и других интерфейсов командной строки нового поколения. По словам Малленвега, «это означает, что вы можете проводить рефакторинг проектов, искать в кодовых базах, автоматизировать задачи [и] запускать скрипты с помощью WP CLI вместе с ИИ-агентом».
Малленвег сказал, что в 2026 году WordPress представит несколько тестов и оценок, которые модели ИИ смогут использовать для проверки выполнения задач WordPress, таких как смена плагинов, редактирование текста или даже управление интерфейсом WordPress с помощью браузерных агентов.
Источник: Экспериментальный инструмент для разработки искусственного интеллекта в WordPress, Telex, уже используется в реальных условиях, всего через несколько месяцев после его дебюта в сентябре. На ежегодном мероприятии компании «Состояние мира» во вторник в Сан-Франциско соучредитель проекта WordPress и генеральный директор Automattic Мэтт Малленвег привел несколько примеров использования Telex в работающем магазине WordPress для таких задач, как сравнение цен, создание калькуляторов цен, отображение рабочего времени в режиме реального времени и ссылка на карту с указанием розничного магазина.
Telex, который Малленвег ранее описывал как «v0 или Lovable, но специально для WordPress», по сути, является попыткой издательской платформы создать собственный инструмент для кодирования вайба в эпоху искусственного интеллекта. Это программное обеспечение позволяет разработчикам создавать блоки Гутенберга — модульные элементы текста, изображений, колонок и т. д., из которых состоит сайт WordPress.
Несмотря на то, что программное обеспечение всё ещё считается экспериментальным, Малленвег смог продемонстрировать несколько реальных примеров, созданных создателем сообщества Ником Хамзе.
В первом примере Малленвег продемонстрировал инструмент для сравнения цен, созданный с помощью Telex. Он отметил, что раньше разработчикам приходилось создавать такие многофункциональные интерактивные веб-элементы с нуля, а теперь это можно сделать за несколько секунд.
В другом примере разработчик использовал Telex, чтобы добавить в блок заголовка своего сайта на WordPress часы работы магазина в реальном времени, номер телефона и ссылку для построения маршрута.
Также было показано, как с помощью Telex можно создать карусель с логотипами партнёров на сайте компании, настроить ценообразование, интегрировать Календарь Google и создать сетку для постов на главной странице WordPress, где карточки с постами на сайте имеют одинаковую высоту.
«Опять же, раньше для того, чтобы нанять разработчиков и создать подобное программное обеспечение на заказ, нужно было потратить тысячи, десятки тысяч долларов, даже несколько лет назад. Теперь мы можем сделать это в браузере за копейки, — сказал Малленвег. — Это просто безумие».
Присоединяйтесь к списку ожидания Disrupt 2026
Добавьте себя в список ожидания Disrupt 2026, чтобы быть первым в очереди, когда появятся билеты для ранних пташек. На прошлых конференциях Disrupt выступали Google Cloud, Netflix, Microsoft, Box, Phia, a16z, ElevenLabs, Wayve, Hugging Face, Элад Гил и Винод Хосла. Это более 250 лидеров отрасли, которые провели более 200 сессий, призванных стимулировать ваш рост и повысить вашу эффективность. Кроме того, познакомьтесь с сотнями стартапов, внедряющих инновации во всех отраслях.
В электронном письме для TechCrunch Хамзе рассказал о возможностях Telex: «Меня поражает и должно поразить вас то, что я не разработчик. Я не могу написать ни строчки кода, но я могу описать Telex, что мне нужно, и он сделает это за меня. Эта свобода опьяняет, и я полностью доверяю искусственному интеллекту», — сказал он.
«Я думаю, что до тех пор, пока люди будут считать эти инструменты «инструментами для разработчиков», они будут упускать из виду то, чего они на самом деле могут достичь, а именно — дать обычным людям возможность делать то, что раньше было невозможно», — добавил Хамзе.
Демонстрационные версии Telex обсуждались наряду с другими инициативами WordPress, ориентированными на искусственный интеллект, включая архитектурные разработки, такие как Abilities API и адаптер MCP. Первый определяет, что может делать WordPress, чтобы системы искусственного интеллекта могли это интерпретировать, как объяснила компания, а второй предоставляет доступ к этим возможностям, чтобы любой MCP-совместимый инструмент мог их понять и использовать.
«Этот шаблон адаптера означает, что WordPress может участвовать в рабочих процессах с использованием ИИ без дублирования логики или создания отдельных интеграций для каждой платформы ИИ, — сказал Малленвег участникам мероприятия. — Таким образом, теперь вы можете подключить установку WordPress к таким популярным инструментам, как Claude, Copilot и многим другим платформам, поддерживающим MCP».
Кроме того, он отметил, что разработчики уже используют ИИ в своей повседневной работе с помощью таких инструментов, как Cursor, Claude Code и других интерфейсов командной строки нового поколения. По словам Малленвега, «это означает, что вы можете проводить рефакторинг проектов, искать в кодовых базах, автоматизировать задачи [и] запускать скрипты с помощью WP CLI вместе с ИИ-агентом».
Малленвег сказал, что в 2026 году WordPress представит несколько тестов и оценок, которые модели ИИ смогут использовать для проверки выполнения задач WordPress, таких как смена плагинов, редактирование текста или даже управление интерфейсом WordPress с помощью браузерных агентов.
Создание сайтов больше не требует часов за кодом или недели работы с дизайнером. ИИ-инструменты уже сегодня позволяют создавать полноценные сайты по паре текстовых команд или даже по загруженному изображению. Рассказываем о пяти нейросетевых решениях, которые берут на себя всю рутину — от генерации дизайна до выдачи готовой ссылки.
1. Rady.ai — сайт по картинке или тексту
Rady — интуитивно понятный инструмент, который превращает описания или изображения в готовый веб-проект. Поддерживается экспорт как в Figma (для дизайнеров), так и в HTML/CSS (для разработчиков).
Ключевые возможности:
Генерация по тексту или изображению.
Быстрая интеграция с Figma.
Получение чистого HTML/CSS-кода.
Тарифы: Бесплатно — 2 проекта и 200 кредитов. Платные планы — от $20 в месяц.
2. Deepsite — текст в сайт в реальном времени
Deepsite — проект от команды Deeps, полностью бесплатный. Генерация происходит прямо на ваших глазах, как в интерактивной IDE. Есть встроенная галерея готовых блоков, которые можно адаптировать под себя.
Что умеет:
Генерировать сайты и приложения по команде.
Работать с библиотекой готовых шаблонов.
Предоставлять исходный код без ограничений.
Стоимость: Бесплатный.
3. Adaptive — сайт, клон или мини-приложение
Adaptive — умный AI-агент с широкими полномочиями. Он может не только создать сайт с нуля, но и клонировать любой существующий по URL. Также умеет работать с поддоменами и текстовыми запросами в контексте.
Возможности:
Клонирование чужих сайтов по ссылке.
Создание многофункциональных интерфейсов.
Частичный доступ к интернету (в отличие от многих аналогов).
Стоимость: На стадии беты — бесплатно. Планируется ограниченный бесплатный тариф.
4. WordPress AI Site Generator — создание сайта в формате чата
Официальный AI-продукт от WordPress работает как диалоговый ассистент. Вы отвечаете на простые вопросы (название бизнеса, адрес, тип проекта), выбираете визуальный стиль — и получаете скелет будущего сайта с возможностью редактирования.
Фишки:
Интерактивный процесс, похожий на конструкторы Wix или Tilda.
Выбор цветовой палитры, шрифтов и структуры.
Полная адаптация под ваш бренд.
Стоимость: Пока бесплатно в режиме бета.
5. Lovable — генератор с Figma-интеграцией и публикацией в один клик
Lovable — это не просто генератор, а настоящий AI-помощник. Он способен сгенерировать сайт, опубликовать его по ссылке, доработать Figma-дизайн или выполнить техзадание. Отличный выбор для фрилансеров и продуктовых дизайнеров.
Особенности:
Генерация по текстовому запросу.
Публикация сайта без хостинга (по внутренней ссылке).
Интеграция с Figma.
Условия: До 5 бесплатных генераций в день. Есть ограничения и премиум-доступ.
✍ Заключение
ИИ сегодня — это не просто ассистент, а полноценный разработчик и дизайнер. Любой из этих инструментов способен сэкономить десятки часов и подойти как для MVP, так и для теста гипотез.
🧠 Хочешь быть в курсе таких инструментов? Подпишись на наш канал — там ещё больше полезных подборок и лайфхаков! (идеи, промты и дизайн фото мои, сгенерированы с помощью ИИ)
Искусственный интеллект стал незаменимым помощником для владельцев сайтов. Он способен заменить копирайтера, менеджера, переводчика и SEO-специалиста. В этой статье я расскажу, как подключить ИИ к сайту WordPress и какие задачи он может выполнять.
Для чего подключать ИИ к сайту ВордПресс
Если множество задач, которые успешно выполняют современные нейросети:
Генерация контента. ИИ способен писать статьи или новости, заполнять описания товаров, переводить видео и аудио в текст, создавать картинки.
SEO-оптимизация. Он может стать помощником SEO-специалиста или его заменить. На бота удастся переключить задачи по анализу текстов конкурентов, сбору семантики, заполнению метатегов.
Обслуживание клиентов. Чат-боты на базе ИИ способны круглосуточно отвечать на вопросы, консультировать по товарам или услугам, помогать оформить заказ и собирать обратную связь.
Персонализация контента. Алгоритмы будут подстраивать контент под интересы и поведение пользователя. Например, показывать товары, которые ему интересны, или рекомендовать статьи на основе просмотренных ранее материалов.
Анализ данных и прогнозирование. Чтобы сайт был успешен, рекомендуется постоянно изучать и корректировать элементы в интерфейсе. ИИ готов взять на себя аналитику, определяя, какие элементы сайта работают лучше других и пользуются спросом у посетителей.
Автоматический перевод. На мультиязычных проектах нейросети способны переводить уже готовые материалы на другие языки, сохраняя стиль и смысл.
Это не исчерпывающий список возможностей искусственного интеллекта. Грамотная интеграция ИИ на сайт позволяет возложить на него практически любые функции по администрированию и наполнению проекта.
Актуальные способы подключения нейросети к сайту WordPress
Есть 2 основных способа подключения ИИ на сайт. Первый требует навыки программирования, второй предполагает подключение уже готовых программных решений. Рассмотрим каждый из вариантов.
Внедрение ИИ с помощью кода
Если у вас имеются навыки программирования, можно напрямую подключить API необходимой модели искусственного интеллекта (ChatGPT, Claude, DeepSeek и прочих) через PHP-код. Процесс выглядит следующим образом:
Получите API-ключ на платформе выбранного сервиса (например, OpenAI).
Создайте собственный мини-плагин или добавьте код в файл functions.php темы, который будет направлять на серверы ИИ задачи и получать ответ.
Определите, где и как ИИ будет использоваться: генерация текста, чат-бот, автоматическая обработка форм и так далее.
Этот метод дает максимальную гибкость и позволяет интегрировать ИИ в любую часть сайта. Однако он требует знания PHP, JavaScript и работы с API.
Приведу пример кода для functions.php, который позволяет генерировать тексты на сайт, используя для этого возможности ChatGPT.
ВАШ_API_КЛЮЧ — укажите ваш ключ из личного кабинета модели ИИ, которую планируется использовать.
model — определите, какую модель ИИ использовать. От выбора зачастую зависит стоимость обращений.
messages — задайте запрос к нейросети и укажите роль.
max_tokens — измените с его помощью максимальную длину ответа ИИ в токенах. 1 токен равен примерно 0,75 слова на английском и 0,6 слова на русском.
temperature — определите креативность ответа.
Обратите внимание:
Данный код предусмотрен под работу с ChatGPT. С другими моделями может потребоваться корректировка названий параметров и атрибутов.
Чтобы делать запрос к AI при создании контента в WordPress после интеграции указанным выше способом, необходимо использовать шорткод формата [ai_text prompt=”Здесь задается промпт к ИИ”].
Плюсы и минусы внедрения ИИ кодом
Максимальная гибкость. Можно реализовать любые сценарии, без ограничений сторонних программных решений.
Полный контроль над ситуацией. Вы самостоятельно определяете области использования ИИ в проекте. Доступен выбор моделей нейросетей, всегда имеется возможность доработать процессы под конкретный проект.
Оптимальная производительность. Плагины иногда добавляют лишний код, что может сказываться на производительности сайта. Собственные решения обычно «легче».
Возможность глубокой интеграции. Можно встраивать ИИ в любую часть WordPress, как в базовую, так и в сторонние плагины.
Требуются хорошие навыки программирования. Без знаний PHP, работы с API и способов взаимодействия с WordPress такой способ будет сложен.
Код иногда придется обновлять. При изменении API код потребуется править вручную.
Нужно разбираться в моделях ИИ. Одни нейросети выполняют поставленные задачи лучше других. Это необходимо учитывать, подключая ту или иную модель.
Самостоятельная оплата. Для получения ответов через API запросы требуется использовать подписки на расширенный функционал нейросетей. В России имеются сложности с оплатой большинства из них.
Возможные ошибки и сбои. При некорректной обработке запросов можно получить ошибки на сайте или перегрузку сервера.
Нет готового интерфейса. Для работы с самостоятельно интегрированным ИИ на сайте потребуется разработать понятный интерфейс, чтобы с ним могли взаимодействовать редакторы, копирайтеры и другие специалисты, которые работают с проектом.
Установка продвинутого плагина WPGPT в админку
Для пользователей без опыта программирования идеальным решением является установка готового плагина. Рекомендую выбирать продвинутые расширения, способные взять на себя сразу несколько задач, используя при этом современные модели ИИ. В России лучшим решением является WPGPT от WPShop.
После приобретения разработки перейдите в личный кабинет на ресурсе продавца и скачайте образ плагина.
Далее в админке WordPress проследуйте по пути «Плагины» — «Добавить плагин» — «Загрузить плагин». Вставьте загруженный на прошлом шаге файл и нажмите «Установить сейчас».
После установки потребуется активировать расширение. Перейдите «Настройки» — «WPGPT» и введите лицензионный код из своего личного кабинета на сайте WPShop, после чего можно переходить к работе с плагином.
Плагин WPGPT предназначен для написания SEO-оптимизированных статей на сайт, публикации комментариев, генерации изображений, создания описаний для товаров WooCommerce. Его функциональность постоянно расширяется.
WPGPT — это российское расширение с отзывчивой службой поддержки. Авторы активно собирают обратную связь и внедряют в модуль поддержку запрашиваемых сообществом возможностей.
Приведу на примере WPGPT инструкцию генерации статьи на основе материалов конкурентов, находящихся в ТОПе выдачи Яндекс:
Откройте создание новой записи или страницы. Под окном редактора находится интерфейс приложения в одноименном блоке. Укажите главный ключ статьи, дополнительные ключи и LSI. После нажмите «Получить ТОП».
Модуль соберет конкурентов из выдачи Яндекс. Оставьте целевые и нажмите «Спарсить выбранных конкурентов». Парсинг конкурентов — первый этап в составлении эффективного ТЗ для последующего написания статьи нейросетью.
После парсинга переключитесь в раздел «Заголовок» и сгенерируйте H1. ИИ предложит 5 вариантов, выберите нужный и скорректируйте его при необходимости.
Во вкладке «План» схожим образом сгенерируйте план статьи. Предложенный нейросетью вариант можно использовать полностью или изменить. Результатом работы на данном шаге должен стать готовый план статьи в правой части экрана. Нажмите обязательно «Сохранить план» перед переходом к следующему этапу.
Теперь остается нажать «Сгенерировать текст статьи», после чего ИИ начнет процесс создания материала. Он будет написан роботом с учетом объемов текстов конкурентов, подготовленного на прошлом шаге плана, ключевых слов и других показателей для составления оптимизированного материала. Дождитесь окончания генерации.
Рекомендация:
Сгенерированный текст проверьте и при необходимости используйте кнопку «Уточнить», чтобы внести в него корректировки.
Предпоследний этап — создание Title и Description. Плагин сгенерирует их по одной кнопке, основываясь на SEO-принципах и анализе конкурентов.
Финальный этап предполагает сохранение статьи. Нажмите кнопку и подготовленный текст статьи будет перенесен в редактор, а метатеги в SEO-плагин. Сам материал останется в черновиках, что позволяет его доработать перед публикацией.
Преимущество WPGPT перед самостоятельным подключением модели в том, что он выполняет интеграцию ИИ на сайт качественно и в понятном интерфейсе. Написанные с его помощью статьи не просто сгенерированы нейросетью, а созданы на базе анализа поисковой выдачи с грамотным промптом. За счет этого вы получаете хорошие материалы, способные занять высокие позиции в Яндекс и Google.
Достоинства WPGPT
В настройках легко изменить модель нейросети, выбрав из нескольких доступных вариантов.
Полный контроль над ИИ при создании текста и изображений, любой запрос можно уточнить в соответствии с собственными требованиями.
Для генерации контента используются лимиты, которые легко купить с российской банковской карты.
Стоимость 100,000 лимитов, которых хватит примерно на 80-100 статей, составляет 990 рублей, что ниже стоимости ChatGPT Plus на 1 месяц в самом недорогом тарифе.
Удобный и понятный интерфейс полностью на русском языке, как и вся документация к плагину.
Служба поддержки готова помочь с решением проблем при интеграции плагина на сайт, если они возникнут.
WPGPT достаточно приобрести один раз, чтобы установить на любое число собственных сайтов. На всех будут расходоваться единые лимиты из личного аккаунта пользователя WPShop.
Скидка на WPGPT
Другие WordPress-решения
Многие популярные плагины добавляют ИИ-функции, чтобы стать еще эффективнее. В зависимости от направленности модуля, нейросетевые возможности существенно отличаются. Приведу несколько примеров:
Yoast SEO. Позволяет заполнять метатеги на основе анализа поисковой выдачи по теме статьи.
Expert Review. Генерирует в пару кликов FAQ, плюсы-минусы, опросы и другие блоки для создания дополнительной ценности контента.
Expert Review является еще одним продуктом от WPShop. Он расходует те же лимиты, что и WPGPT. Используя несколько модулей одного «семейства», не придется оплачивать множество отдельных подписок.
AI Engine. Инструмент для написания текстов, создания изображений и разработки чат-ботов.
Bertha AI. Помогает в написании маркетинговых текстов, хорошо подходит для заполнения страниц магазина.
Jetpack. Известный плагин для защиты сайта имеет AI Assistant, помогающий при работе с текстами.
AI Powered Starter Templates. Плагин для конструирования сайта с использованием искусственного интеллекта.
AI Translate. Автоматический перевод контента на несколько языков с сохранением структуры поста.
Перед тем как добавить ИИ на сайт с помощью одного из перечисленных плагинов, рекомендую прочитать отзывы русскоязычных пользователей о его работе. Многие из них не лучшим образом работают с генерацией контента для русскоязычного сегмента.
Итог
В статье я рассказал как интегрировать ИИ в сайт WordPress несколькими способами. Подключение искусственного интеллекта позволяет не только экономить время и ресурсы, но и вывести проект на новый уровень.
Нейросети помогают писать тексты, улучшать SEO, автоматизировать поддержку клиентов и персонализировать контент. Выбор способа подключения зависит от ваших целей и технических возможностей. Опытные разработчики сами могут интегрировать ИИ через код, другим же рекомендую использовать готовые плагины, которые уже себя зарекомендовали. Мой выбор остановился на WPGPT, с которым удалось значительно снизить затраты на контент.
Узнайте из этого пошагового руководства всё, что нужно о FSE WordPress (Full Site Editing — полном редактировании всего сайта) и как всё настроить.
Устали искать понятное и подробное объяснение: что такое FSE в WordPress? Мы идём к Вам! Подготовили пошаговое руководство на русском языке от компании Codeable, которая собрала в себе более 20-ти WordPress-агентств по всему миру и более +700 фрилансеров. Начинаем.
Содержание
Чтобы по-настоящему раскрыть потенциал своего присутствия в Интернете, вы должны обладать способностью плавно редактировать и обновлять свой сайт. Речь идет не просто о создании привлекательного макета или загрузке интересного контента, а о создании динамичного цифрового пространства, которое отражает эволюцию вашего бренда и находит отклик у целевой аудитории.
WordPress, ведущая система управления контентом (CMS), представляет собой интуитивно понятную платформу, позволяющую частным лицам и компаниям создавать и управлять своими сайтами с непревзойденной гибкостью. Однако она может быть не слишком понятной для непрофессионалов, которые ищут конструкторы No-code (без кода) для расширения своего присутствия в сети.
Хорошая новость: вам не нужно быть мастером кодирования или техническим гуру, чтобы эффективно редактировать свой сайт WordPress. Благодаря возможности полного редактирования сайта (FSE) и огромному количеству плагинов даже нетехнические пользователи могут взять на себя ответственность за редактирование своих сайтов.
Будь вы блоггером-одиночкой, владельцем малого бизнеса или частью крупной корпорации, к концу этого руководства вы будете знать все, что нужно знать о FSE (полном редактировании всего сайта) WordPress.
Обзор полного редактирования сайта WordPress (FSE)
Прежде чем мы узнаем, что такое FSE, давайте вначале объясним, что такое проект WordPress Gutenberg.
Проект Gutenberg в WordPress связан со значительной переработкой и переосмыслением интерфейса редактора WordPress. До появления Gutenberg в WordPress использовался классический текстовый редактор, основанный на простой текстовой области, в которой пользователи могли вводить свой контент, используя комбинацию текста и HTML.
Однако по мере развития веб-дизайна и создания контента классический редактор стал казаться немного ограниченным в плане создания богатых, динамичных и сложных макетов без использования дополнительных плагинов или пользовательского кодирования.
Именно поэтому проект Gutenberg представляет собой революционную смену парадигмы в сфере создания и публикации сайтов WordPress. Это четырехфазный план, состоящий из следующих этапов:
Редактирование с помощью редактора блоков Gutenberg.
Персонализация (включая полное редактирование сайта и темы на основе блоков).
Он позволяет пользователям создавать контент, организуя его в блоки, которые могут представлять собой отдельные элементы, такие как абзацы, изображения, заголовки, списки, цитаты и многое другое. Этими блоками можно легко манипулировать, настраивать и перемещать по странице, предоставляя пользователям более наглядный и интуитивно понятный способ создания контента.
Редактор Gutenberg также упрощает интеграцию мультимедийных элементов, встраивание контента из различных источников (например, видео с YouTube, сообщения в Twitter и т. д.) и работу с различными типами контента — все это в едином и последовательном интерфейсе.
Этот блочный подход позволяет как случайным блоггерам, так и профессиональным разработчикам сайтов создавать динамичный и увлекательный контент, не прибегая к кодированию или сторонним плагинам для базовых функций макета.
С выходом WordPress 6.3.1 проект переходит на вторую стадию, которая включает в себя полное редактирование сайта.
Что такое полное редактирование сайта (FSE)
Полное редактирование сайта (FSE) — это новый значительный подход, цель которого — сделать настройку сайта еще на один шаг дальше, предоставив пользователям инструменты для настройки и оформления целых сайтов, включая верхние и нижние колонтитулы, боковые панели и другие глобальные элементы, с помощью визуального и интуитивно понятного интерфейса.
По сути, FSE дает пользователям WordPress возможность достичь такого уровня настройки и творческого контроля, который раньше было сложно достичь без технических знаний. Это значительный шаг к упрощению процесса создания и оформления сайтов на платформе WordPress.
FSE позволяет использовать следующие новые функции настройки для более полного редактирования веб-сайта:
Редактор сайта: Новый интерфейс, в котором вы можете визуально проектировать и настраивать макет и структуру всего сайта.
Блочные темы: Блочные темы — это наборы заранее разработанных шаблонов, частей шаблона и стилей блоков, которые определяют общий вид и макет вашего сайта. В отличие от традиционных тем, блочные темы сосредоточены на создании структуры для вашего контента с настраиваемыми макетами блоков.
Глобальные стили: Это набор настроек дизайна, которые определяют визуальный облик всего сайта. Эти настройки включают типографику (стили и размеры шрифтов), цвета, интервалы и другие стилистические элементы.
Настройка шаблонов и частей шаблона: FSE позволяет создавать, редактировать и располагать блоки внутри шаблонов и частей шаблона, обеспечивая тонкий контроль над структурой и внешним видом сайта.
Давайте разберем каждую из этих новых функций подробнее.
FSE редактор сайта
FSE переносит парадигму блочного редактирования, представленную в блочном редакторе Gutenberg, на весь сайт с помощью этого совершенно нового редактора сайта. Это означает, что вместо того, чтобы использовать блоки для отдельных частей контента в посте или странице, вы можете использовать их для оформления и настройки всего сайта.
Редактор сайта предлагает такие преимущества, как:
Больше гибкости и контроля над дизайном сайта.
Легкое создание пользовательских макетов.
Не требуются знания кодирования.
Более перспективный, поскольку WordPress продолжает развивать FSE.
Однако, чтобы в полной мере воспользоваться преимуществами FSE, вам необходимо использовать блочную тему.
Блочные темы FSEв WordPress
Блочная тема — это тема WordPress, которая полностью построена из блоков. С помощью FSE вы можете использовать эти блоки не только для создания контента в постах, но и для оформления всего сайта. Это обеспечивает большую гибкость и контроль над визуальными элементами вашего сайта.
В отличие от традиционных тем, блочные темы сосредоточены на создании структуры для вашего контента с настраиваемыми макетами блоков. Их можно использовать в качестве отправной точки для создания уникального дизайна сайта, используя возможности блоков.
Чтобы иметь возможность редактировать свой сайт с помощью FSE и редактора сайта, вам нужно использовать специально разработанную под FSE блочную тему, такую как TT1 Block; однако вы должны знать, что блочные темы все еще находятся в стадии разработки и тестирования и пока не предназначены для производственных сайтов.
Глобальные стили в FSE WordPress
Глобальные стили — это целостный набор правил и параметров дизайна, которые поддерживают единообразие на всем сайте. Эти стили охватывают широкий спектр элементов, от типографики и цветов до интервалов и расположения. По сути, они служат фундаментом, на котором строится визуальная идентичность сайта.
В отличие от традиционных методов стилизации, предполагающих изменение каждого элемента в отдельности, глобальные стили представляют собой единый подход. Это означает, что изменения, внесенные в глобальные стили, автоматически отражаются на всем сайте, обеспечивая гармоничный и синхронизированный язык дизайна.
Шаблоны FSEи детали шаблонов
Шаблоны служат макетами для различных разделов веб-сайта, определяя их расположение, дизайн и функциональность. Редактирование шаблонов — это динамический процесс, позволяющий пользователям изменять структуру и представление веб-страниц.
Традиционно WordPress полагался на сочетание тем и отдельных конструкторов страниц для управления внешним видом и макетом сайтов. Однако FSE позволяет пользователям персонализировать эти шаблоны, не вникая в сложное кодирование и не обращаясь за специализированной помощью.
При этом «FSE: Полное редактирование сайта» позволяет пользователям WordPress создавать высокотехнологичные и визуально привлекательные сайты, не прибегая к обширному кодированию или использованию сторонних тем. Это значительный шаг вперед в демократизации дизайна сайтов и предоставлении пользователям большего творческого контроля над своим присутствием в сети.
Преимущества полного редактирования сайта для пользователей WordPress, разработчиков и дизайнеров
Для пользователей:
FSE дает пользователям возможность стать собственными дизайнерами сайта WordPress, не требуя при этом никаких знаний в области кодирования. Обычно пользователи полагались на темы и шаблоны, часто сталкиваясь с ограничениями в достижении желаемого внешнего вида и функциональности своих сайтов.
FSE меняет эту парадигму, позволяя пользователям:
Легко создавать и изменять свои веб-сайты в режиме реального времени.
Визуализируйте изменения по мере их возникновения, делая процесс создания и редактирования сайтов более интуитивным и приятным.
Используйте этот цикл обратной связи в режиме реального времени, чтобы стимулировать творческий подход к различным макетам, стилям и размещению контента.
Для разработчиков
Разработчики WordPress могут воспользоваться множеством преимуществ FSE, которые упростят их рабочий процесс и расширят творческие возможности. Благодаря блочному редактированию FSE упрощает процесс создания сложных макетов и функциональных возможностей.
Традиционные проблемы, такие как поддержка совместимости тем и управление пользовательским кодом, снимаются, поскольку FSE предлагает стандартизированную структуру, которая способствует более гладкому сотрудничеству между разработчиками и дизайнерами. Она открывает путь для:
Уменьшение разрастания кода.
Повышение производительности сайта.
Создание пользовательских блоков и шаблонов, предоставляющих пользователям строительные блоки, которые можно смешивать и сочетать, обеспечивая последовательность и способствуя инновациям.
Этот переход от жестких тем к гибким блокам способствует более модульному и эффективному процессу разработки.
Для дизайнеров
Дизайнеры WordPress также могут воспользоваться преимуществами возможностей FSE. На смену традиционной передаче функций от дизайнера к разработчику приходит бесшовное сотрудничество, позволяющее дизайнерам воплощать свои творческие идеи непосредственно в процессе создания сайта.
Визуальная природа FSE устраняет разрыв между проектированием и реализацией, позволяя дизайнерам:
Посмотреть, как их концепции воплощаются в жизнь без необходимости интерпретации или компромиссов.
Более эффективная итерация своих идей, точная настройка макетов, типографики и элементов стиля.
Они легко адаптируют свои проекты для различных устройств и размеров экранов, обеспечивая последовательное и увлекательное взаимодействие с пользователем.
Эта обретенная свобода дизайна повышает общее качество веб-сайтов и позволяет дизайнерам сосредоточиться на создании визуально потрясающих и ориентированных на пользователя цифровых впечатлений.
Сравнение плагинов полного редактирования сайта и конструктора страниц
Привлекательность FSE для WordPress заключается в том, что она способна демократизировать дизайн веб-сайтов. Предприятия, особенно небольшие, с ограниченными ресурсами, могут воспользоваться этим подходом, чтобы избавиться от необходимости в обширном кодировании или помощи внешних дизайнеров. Это может привести к ускорению сроков выполнения заказа и повышению степени автономии в формировании цифрового стиля бренда.
С другой стороны, плагины для построения страниц (такие как Elementor, Divi и Beaver Builder) сыграли важную роль в устранении пробелов в дизайне для пользователей, не обладающих техническими знаниями. Они предлагают интерфейс drag-and-drop, предварительно разработанные шаблоны и множество опций настройки, которые предоставляют пользователям значительную гибкость.
FSE или Page Builder?
Выбор между FSE и плагинами для построения страниц — это не универсальное решение. Вместо этого компаниям необходимо оценить свои конкретные потребности, ресурсы и знакомство с существующими инструментами.
Для тех, кто ищет комплексное, оригинальное решение для сайта на базе CMS WordPress, гармонично сочетающее контент и дизайн, FSE представляет собой привлекательный путь. Потенциал долгосрочного повышения эффективности и согласованности дизайна делает его достойным внимания претендентом.
Плагины для построения страниц, с другой стороны, предлагают проверенное решение для компаний, которые уже привыкли к своему рабочему процессу и хотят сохранить ощущение непрерывности. Простота использования, разнообразные шаблоны и широкая интеграция со сторонними разработчиками могут повысить производительность в краткосрочной перспективе.
Вот краткий обзор плюсов и минусов плагинов FSE и конструкторов страниц:
Плюсы
Минусы
Полное редактирование сайта (FSE)
Встроенная интеграция: FSE легко интегрируется в ядро WordPress. Перспективный: Разработанный командой WordPress, он совместим с будущими версиями. Последовательный опыт: Обеспечивает единообразие в работе с темами и плагинами.
Кривая обучения: Требуется понимание парадигмы, основанной на блоках. Ограниченная поддержка тем: Полагается на темы, совместимые с блочным редактором.
Плагины для построения страниц
Универсальность: Работайте с широким спектром тем. Устоявшиеся решения: Хорошо зарекомендовавшие себя решения с обширной базой пользователей (например, Elementor, Divi, Beaver Builder). Богатые возможности: Предварительно разработанные шаблоны, элементы, возможности настройки.
Зависимость от плагинов: Сайт зависит от сторонних плагинов. Потенциальная раздутость: Некоторые из них могут добавлять дополнительный код, потенциально снижая производительность сайта. Проблемы совместимости: Не все темы/плагины могут работать без проблем, что может привести к конфликтам.
Пошаговое руководство по освоению FSE WordPress
Освоение FSE требует времени и практики. Это значительный сдвиг в том, как разрабатываются и настраиваются сайты WordPress, поэтому будьте терпеливы в изучении и адаптации к этой новой функциональности.
Создайте резервную копию вашего сайта: Всегда имейте резервные копии на случай, если что-то пойдет не так. Используйте плагин, например UpdraftPlus.
Обновите версию WordPress: Убедитесь, что вы используете последнюю версию WordPress, поддерживающую функцию полного редактирования сайта. Функции FSE могут постепенно появляться в обновлениях, поэтому всегда следите за актуальностью своей установки WordPress.
Ознакомьтесь с редактором блоков: прежде чем погружаться в FSE, убедитесь, что вам удобно пользоваться редактором блоков. Поймите, как добавлять, располагать и настраивать блоки в редакторе Gutenberg для постов и страниц.
Выберите совместимую тему: Для FSE требуется тема, поддерживающая его функции. Выбирайте тему, в которой явно указана совместимость с FSE или которая разрабатывается с учетом блочного дизайна, как, например, тема TT1 Blocks.
Блочные темы FSE WordPress
На данный момент блочные темы не предназначены для использования на производственных сайтах, поэтому будьте осторожны.
Получите доступ к полному редактору сайта: Перейдите в раздел «Внешний вид > Редактор» сайта на панели управления WordPress (вы должны использовать блочную тему и WordPress версии 6.3.1 или новее).
Понимание блоков для FSE: FSE представляет новые типы блоков, которые выходят за рамки привычных вам блоков контента. К ним относятся части шаблона, заголовок сайта, теглайн сайта, блок навигации, блок запросов и т. д.
Изучите возможности редактирования шаблонов: В редакторе сайта вы увидите опции для редактирования различных шаблонов, таких как верхний и нижний колонтитулы, отдельные посты, архивные страницы и т. д. Изучите каждый шаблон, чтобы понять его структуру и потенциальные возможности настройки.
Шаблоны FSE WordPress
Создавайте и настраивайте шаблоны: Создавайте и редактируйте шаблоны, используя предоставленные блоки. Например, вы можете создать шаблон заголовка с помощью блоков Site Title и Site Tagline. Кроме того, используйте блок «Навигация» для оформления меню сайта.
Работайте с частями шаблона: Части шаблона — это многократно используемые блоки, которые можно включать в различные шаблоны. Например, вы можете создать часть шаблона с призывом к действию (CTA) и использовать ее в разных местах вашего сайта. Создавать, редактировать и настраивать части шаблона можно на вкладке «Шаблоны».
Используйте блоки запросов и настраивайте стили: Блоки запросов позволяют создавать динамические списки постов или другого контента. Узнайте, как использовать блоки запросов для создания пользовательских списков постов, разделов с тематическим контентом и т. д. Кроме того, с помощью редактора настройте стили сайта в соответствии с вашими предпочтениями, включая цвета, типографику и макет.
Проверьте отзывчивость: Убедитесь, что ваш дизайн отзывчив и хорошо смотрится на разных устройствах. FSE поощряет дизайн, ориентированный на мобильные устройства, поэтому обратите внимание на то, как ваш сайт выглядит на небольших экранах.
Экспериментируйте и повторяйте: FSE продолжает развиваться, и в нем могут появиться обновления и улучшения. Экспериментируйте с различными макетами, дизайнами и комбинациями блоков. Не бойтесь повторяться, когда вам станет удобнее работать с инструментами.
Изучайте ресурсы: Следите за учебниками, документацией и обсуждениями в сообществе, связанными с FSE. По мере развития FSE сообщество WordPress будет делиться советами, рекомендациями и лучшими практиками.
Крайне важно не использовать FSE на живом сайте; подумайте о том, чтобы создать промежуточную среду для экспериментов и убедиться, что все работает так, как нужно. Всегда имейте резервные копии на случай, если что-то пойдет не так.
Текущие ограничения Полного редактирования сайта
К сожалению, как и любая инновационная технология, FSE не обходится без проблем, которые приходится преодолевать разработчикам и пользователям. Среди этих препятствий можно выделить следующие:
Совместимость тем: Многие существующие темы не предназначены для FSE, что может привести к проблемам с совместимостью. Темы должны быть разработаны или обновлены для полной поддержки функций FSE.
Кривая обучения: FSE представляет новый способ создания сайтов с помощью блоков и шаблонов, который может оказаться сложным для освоения пользователями, привыкшими к традиционному редактору WordPress.
Сложность настройки шаблонов: Хотя FSE стремится упростить редактирование шаблонов, создание сложных шаблонов все равно может потребовать глубокого понимания взаимодействия блоков и иерархии шаблонов.
Отсутствие интеграции сторонних блоков: Интеграция сторонних блоков и плагинов в шаблоны FSE может оказаться сложной задачей из-за развивающейся природы FSE и потенциальных конфликтов.
Проблемы доступности: Обеспечение доступности контента, создаваемого FSE, для всех пользователей, включая людей с ограниченными возможностями, является важной задачей, требующей решения.
Оптимизация производительности: Сайты на основе FSE необходимо оптимизировать для повышения производительности, поскольку добавление слишком большого количества блоков или элементов может привести к замедлению загрузки страниц.
Однако, несмотря на эти ограничения, дорожная карта Full Site Editing усыпана потенциальными открытиями, которые могут изменить подход к созданию и настройке веб-сайтов.
Коммерческие возможности и потенциал полного редактирования сайта
FSE создает несколько новых возможностей для получения прибыли и роста для предпринимателей и компаний, таких как:
Разработка и настройка темы
Пользовательские темы блоков FSE: Разработчики тем могут создавать и продавать пользовательские темы FSE, которые используют весь потенциал функций FSE. Эти темы могут соответствовать конкретным отраслям, нишам или предпочтениям в дизайне.
Премиальные шаблоны FSE: Предложение премиальных пакетов шаблонов FSE для различных разделов веб-сайтов (заголовки, футеры, целевые страницы и т. д.) может стать прибыльной бизнес-моделью.
Услуги по настройке шаблонов: Предприятия могут предоставлять услуги по настройке существующих шаблонов FSE в соответствии с брендингом и требованиями клиентов.
Разработка плагинов
Блоки и расширения FSE: Разработчики могут создавать и продавать плагины, которые добавляют новые блоки и виджеты FSE или расширяют возможности существующих блоков FSE.
Создание пользовательских блоков: Предложение услуг по разработке пользовательских блоков FSE под конкретные функции может привлечь клиентов, ищущих уникальные возможности.
Образование и обучение
Курсы и семинары: Опытные пользователи FSE могут предлагать онлайн-курсы, учебные пособия и семинары, чтобы помочь другим научиться эффективно использовать FSE для своих сайтов.
Консультирование и коучинг: предоставление индивидуальных коучинговых или консультационных услуг для руководства предприятиями в процессе внедрения FSE может быть очень ценным.
Создание контента и маркетинг:
Контент с расширенными возможностями FSE: Создатели контента могут предлагать статьи, видеоролики или электронные книги, посвященные созданию контента с использованием FSE, помогая частным лицам и компаниям максимально эффективно использовать эту технологию.
Агентства веб-дизайна
Агентства веб-дизайна могут предложить услуги по разработке дизайна, ориентированного на FSE, создавая для клиентов индивидуальные шаблоны, дизайны и макеты с использованием инструментов FSE.
Тематические рынки
На таких площадках, как ThemeForest, можно разместить множество тем и шаблонов FSE, предоставляя разработчикам тем платформу для продажи своих творений.
Хостинг и управляемые услуги
Оптимизированный для FSE хостинг: Хостинг-провайдеры могут предложить специализированные пакеты хостинга, оптимизированные для FSE, обеспечивающие бесперебойную работу и совместимость.
Управляемые услуги FSE: Поставщики управляемых услуг могут взять на себя обновление, обслуживание и устранение неполадок, связанных с FSE, для клиентов.
Интеграция электронной коммерции
Разработчики могут создавать решения на основе FSE для электронной коммерции, повышая визуальную привлекательность и удобство работы с интернет-магазинами.
Возможности фриланса
Фрилансеры могут предложить свои услуги по проектированию, разработке, настройке и устранению неполадок, связанных с FSE.
Вклад в развитие сообщества
Вклад в сообщество WordPress путем создания и обмена блоками, шаблонами и ресурсами FSE с открытым исходным кодом может способствовать накоплению опыта и потенциально привести к появлению других возможностей.
По мере того как Full Site Editing продолжает развиваться и получать все более широкое распространение, компании и частные лица, вкладывающие средства в изучение и освоение его возможностей, смогут позиционировать себя как экспертов в этом инновационном подходе к веб-дизайну и разработке.
Ищете лучшие плагины для блоков WordPress, чтобы добавить новые блоки в редактор WordPress (он же Gutenberg)?
Одно из главных преимуществ блочного редактора заключается в том, что вы можете добавлять в него любой новый контент и блоки макета, что позволяет создавать более гибкие дизайны.
В этой статье мы собрали десять наших любимых плагинов, добавляющих новые блоки. И знаете что? Каждый из этих плагинов либо полностью бесплатен, либо предлагает щедрую бесплатную версию в дополнение к платной версии.
К концу этой статьи вы научитесь создавать более гибкие макеты и получите доступ к огромному количеству блоков контента для отзывов, хронологии, последних публикаций и многого другого.
Как следует из названия, он создан компанией StudioPress, разработчиками популярного фреймворка Genesis (который также входит в семейство WP Engine). Как и следовало ожидать от продукта с названием Genesis, он предлагает надежные, продуманные функции, которые призваны сделать редактор блоков более удобным для создания страниц.
Небольшое примечание — вам не обязательно использовать тему Genesis Framework, чтобы работать с Genesis Blocks, хотя они хорошо сочетаются друг с другом.
В общей сложности бесплатная версия Genesis Blocks добавляет в редактор 15 новых блоков. Эти блоки представляют собой удачное сочетание базовых блоков макета и новых блоков контента.
Например, чтобы вам было проще управлять макетом вашего дизайна, вы получите блок «Раздел и макет», блок «Контейнер» и гибкий блок «Пробел и разделитель» Но кроме того, вы получите полезные блоки контента, такие как блоки с ценами, подпиской, профилем автора и отзывами.
Все блоки также имеют встроенную поддержку Google AMP, что очень удобно, если вы используете AMP.
Если вам нужно ещё больше функций, есть премиум-версия под названием Genesis Pro, которая добавляет в редактор новые шаблоны и функции. Вы получите:
Шаблоны разделов 56+
26+ полностраничных шаблонов
Возможность сохранять и повторно использовать собственные шаблоны
Разрешения пользователя на уровне блоков
Genesis Pro также предоставляет доступ к Genesis Framework и всем более чем 35 дочерним темам StudioPress. Genesis Pro стоит 30 долларов в месяц за все.
Ultimate Addons for Gutenberg — это бесплатный плагин-блок от Brainstorm Force, той же компании, которая создала популярную тему Astra и Ultimate Addons для Elementor/Beaver Builder.
Он добавляет в редактор более 25 новых блоков, включая блоки макета и контента.
Чтобы управлять макетами в Gutenberg, плагин предоставляет блок Advanced Columns с расширенными возможностями управления колонками, а также разделителями фигур. Кроме того, есть блок Section, который позволяет группировать различные блоки.
Ultimate Addons for Gutenberg также включает в себя несколько блоков, которые помогут вам отображать последние публикации в блоге в разных форматах, в том числе:
Сетка
Каменная кладка
Временная шкала (список)
Карусель
Другие заметные блоки включают:
Временная шкала контента — отображение пользовательского контента в виде уникальной временной шкалы.
Form Stylers — стилизуйте и встраивайте формы из Contact Form 7 или Gravity Forms.
Кнопки. Создавайте более сложные кнопки с несколькими блоками, в том числе мультикнопки и маркетинговые кнопки.
Содержание — автоматическое создание оглавления на основе заголовков в вашем посте.
Прайс-лист/меню ресторана — создайте стильное меню для ресторана.
Вы можете использовать Ultimate Addons for Gutenberg с любой темой WordPress. Но если вы используете тему Astra, то в Astra есть более 20 импортируемых демонстрационных сайтов, созданных с помощью редактора блоков и блоков из Ultimate Addons for Gutenberg.
Ultimate Addons for Gutenberg — это 100 % бесплатное дополнение.
PublishPress Blocks (ранее называвшийся Advanced Gutenberg) — это плагин для блоков WordPress, который добавляет в редактор Gutenberg новые блоки и функции.
Я расскажу о блоках чуть позже, но давайте начнём с одной из самых уникальных особенностей этого плагина.
С помощью PublishPress Blocks вы можете включать и отключать отображение определенных блоков в редакторе, в том числе блоков из других плагинов. Вы также можете создавать разные профили и назначать им доступ к разным блокам.
Например, вы можете предоставить администраторам доступ ко всем блокам, ограничив при этом доступ авторов к блокам. Это особенно полезно, если вы используете несколько плагинов для работы с блоками, так как позволяет избежать загромождения интерфейса ненужными блоками.
Вы также получаете ряд других, менее значимых функций, таких как:
Пользовательские CSS-стили для блоков абзацев.
Возможность задать размер редактора Gutenberg.
Помимо этих новых функций, вы также получаете доступ к более чем 27 новым блокам.
Среди наиболее примечательных новых блоков можно выделить следующие:
Вход и регистрация — позволяют пользователям регистрироваться или входить на ваш сайт с помощью блока.
Панель поиска — добавьте панель поиска, с помощью которой посетители смогут выполнять поиск с использованием стандартной функции поиска WordPress.
Расширенная таблица — создание расширенных HTML-таблиц с дополнительными параметрами.
Расширенные столбцы — больше возможностей для управления макетом столбцов.
Подписка по электронной почте — сбор электронных адресов и их экспорт в виде файла CSV.
PublishPress Blocks — это абсолютно бесплатный сервис.
Stackable — ещё один популярный плагин для блоков Gutenberg, который доступен как в бесплатной базовой версии на WordPress.org, так и в премиум-версии с дополнительными функциями.
Он включает в себя множество новых блоков, функций и шаблонов. В частности:
27+ новых блоков
58+ вариантов блоков
Более 72 готовых разделов дизайна
Другие общие характеристики включают:
Подробные параметры типографики
Множество разделителей для каждого блока
Вот некоторые из наиболее примечательных блоков контента:
Публикации (включает множество различных способов демонстрации ваших последних публикаций)
Счетчик
Свидетельство
Таблица цен
Члены команды
Сетка объектов
Сами блоки Stackable имеют очень подробные настройки, что, на мой взгляд, выгодно отличает их от конкурентов.
Вы также можете менять дизайн с помощью блочных макетов и предустановленных разделов. Существует также официальная тема Stackable, с которой можно использовать этот плагин, хотя Stackable работает с любой темой WordPress.
Stackable Premium предлагает ещё больше возможностей:
251+ готовых вариантов оформления разделов
127+ премиальных макетов
Трехслойные сепараторы
Бесплатный плагин доступен на WordPress.org. После этого Stackable Premium будет доступен за 49 долларов в год для использования на одном сайте или за 149 долларов в год для использования на неограниченном количестве сайтов.
Kadence Blocks — это бесплатный плагин для WordPress, который предлагает действительно гибкие базовые блоки, а не огромный выбор новых блоков контента.
Вы получите всего 12+ новых блоков, но большинство из них — это базовые блоки, которые вы будете использовать почти в каждом проекте.
Пожалуй, самым гибким блоком является Row Layout блок. Он позволяет создавать гибкие многоколоночные структуры, внутри которых можно размещать другие блоки. Важной особенностью этого блока являются адаптивные элементы управления. Вы можете управлять расположением колонок на компьютере, планшете и мобильном устройстве:
Он также включает в себя готовую библиотеку контента, которая позволяет быстро импортировать дизайны.
Вы также получаете блоки Advanced Heading и Advanced Button, которые позволяют лучше контролировать эти основные элементы. Другие блоки включают:
Форма
Вкладки
Аккордеон
Отзывы
Поскольку Kadence Blocks ориентирован на предоставление действительно гибких базовых блоков, я считаю его отличным вариантом «по умолчанию». Затем вы можете использовать более гибкие блоки контента из других плагинов с базовыми блоками Kadence Blocks.
12+ блоков Kadence, упомянутых выше, предоставляются бесплатно. У плагина также есть версия Pro за 59 долларов, которая даёт вам доступ к премиум-блокам Kadence, таким как карусель товаров, всплывающее окно с видео, разделённый контент и другие.
Ultimate Blocks — это бесплатная коллекция из более чем 18 новых блоков Gutenberg, в том числе уникальных, которых нет в других плагинах из этого списка.
Одним из уникальных блоков является блок Review с поддержкой схемы, который позволяет добавлять поле для отзывов со структурированными данными, чтобы получать расширенные сниппеты в поиске Google. В этом поле можно оценить что-либо по нескольким критериям, а затем указать общую оценку.
Вы также получаете отдельный блок Рейтинг со звёздами, который можно использовать отдельно.
Ещё один уникальный блок — Фильтр контента, который позволяет посетителям отфильтровывать определённый контент, нажимая на фильтр вверху (перезагрузка страницы не требуется).
Помимо них, вы можете получить доступ к следующим блокам:
Содержание
Улучшенный блок кнопок
Свидетельство
Кнопки обмена в социальных сетях
Таймер обратного отсчета
Ultimate Blocks также включает в себя собственный плагин для управления блоками, который позволяет включать и отключать блоки с помощью плагина, что упрощает работу.
Qubely — это плагин для блоков Gutenberg, который доступен как в бесплатной базовой версии, так и в премиум-версии с дополнительными функциями. Он разработан компанией Themeum, той же командой, которая создала плагин Tutor LMS для системы управления обучением WordPress, который мы рассматривали не так давно.
Qubely предлагает огромное количество новых блоков, а также более 150 готовых разделов и шаблонов, которые можно импортировать и редактировать по мере необходимости.
Бесплатная версия предлагает более 27 блоков контента и оформления, в том числе:
Всплывающее видео
Отзывы
Сетка для отображения ваших последних публикаций в блоге
Таблицы цен
Группы кнопок
Члены команды
Кроме того, в премиум-версии добавлено ещё 12+ новых блоков контента, в том числе:
Конструктор форм
Расширенная сетка публикаций с дополнительными опциями
Карусель с изображениями, командой и отзывами
Таймеры обратного отсчета
Премиум-версия также включает:
Более 160 шаблонов разделов — вы можете импортировать их и редактировать по своему усмотрению.
27+ стартовых пакетов — это наборы полностраничных шаблонов для всех важных страниц в различных нишах, таких как «диетолог», «фотограф», «цифровое агентство» и другие.
Бесплатная базовая версия доступна на WordPress.org. После этого профессиональная версия будет стоить от 39 долларов за использование на одном сайте и от 99 долларов за использование на неограниченном количестве сайтов.
CoBlocks — это популярная коллекция блоков Gutenberg, которую компания GoDaddy приобрела в апреле 2019 года.
Его цель — расширить возможности редактора блоков при создании страниц.
Мне всегда нравились дизайны от их создателя Рича Табора (который, насколько мне известно, до сих пор занимается этим проектом), поэтому это один из моих любимых плагинов для блоков.
CoBlocks добавляет в редактор Gutenberg более 31 нового блока для оформления и контента.
Чтобы вам было проще управлять макетом ваших проектов, в CoBlocks добавлены более гибкие блоки «Строка» и «Столбец» . Кроме того, у вас есть блоки «Разделитель фигур» и «Динамический разделитель» для разделения элементов.
Также добавлена новая панель управления типографикой, которая работает как с CoBlocks, так и с блоками WordPress по умолчанию. Это позволяет управлять настройками типографики для отдельных блоков.
Помимо этих дополнений, вы получите множество блоков с контентом, в том числе:
Профиль автора
Еда и напитки
Форма
Герой
Логотипы и значки
Почтовая Карусель
Таблица цен
Услуги
У него также есть сопутствующая тема под названием Go, в которой используется дизайн Gutenberg, но вы можете использовать CoBlocks и с любыми другими темами.
CoBlocks на 100 % бесплатен. Вам не нужно быть клиентом GoDaddy, чтобы пользоваться им.
Getwid — это бесплатная коллекция из более чем 40 блоков WordPress от MotoPress, той же команды, которая создала плагин для создания страниц MotoPress Content Editor.
Помимо большой коллекции блоков, Getwid также предлагает более 35 импортируемых шаблонов, созданных с использованием этих блоков.
Среди наиболее примечательных кварталов можно выделить:
Раздел
Image Hotspot — это уникальный блок, который позволяет добавить к изображению одну или несколько точек, при наведении на которые отображается всплывающая подсказка. Я не думаю, что какой-либо другой плагин предлагает такую возможность бесплатно. Вы можете посмотреть демонстрацию здесь.
Баннер — это кликабельные разделы, которые ведут на другую страницу.
Временная шкала контента
Ползунки
Подписка Mailchimp
Контактная Форма
Несколько вариантов отображения последних публикаций.
Getwid на 100 % бесплатен и доступен на WordPress.org.
Поскольку вы можете использовать несколько плагинов для блоков Gutenberg одновременно, нет смысла выбирать какой-то один «лучший» вариант.
Очевидно, что во многом ваш выбор будет зависеть от конкретных элементов контента, которые вам нужны.
Я бы сказал, что Kadence Blocks обладает самым гибким блоком макета среди всех плагинов, которыми я пользовался, так что, думаю, это хороший выбор для всех. В нём не так много блоков контента, но блок Row Layout сам по себе является достаточной причиной для установки плагина, особенно для адаптивных элементов управления.
После этого вы можете установить любой другой плагин, чтобы получить доступ к более широкому выбору блоков контента. Если вы не знаете, с чего начать, обратите внимание на Ultimate Addons for Gutenberg и Stackable, в которых есть большие коллекции хорошо продуманных блоков, хотя все варианты из этого списка могут быть полезны.
Есть вопросы по этим блочным плагинам для WordPress? Задавайте их в комментариях!
Сегодня насчитывается уже десятки тысяч плагинов для WordPress. На каждом чайте платформы их также около десятка. Среди них есть как очень хорошие и полезные бесплатные, так и платные. Однако стоит задуматься, насколько действительно необходим их расширенный функционал.
Как известно, «лучшее — враг хорошего». Создателям сайтов не всегда нужен весь спектр возможностей, который предлагают платные плагины. Опыт показывает, что часто их покупают ради одной или двух функций, а затем оставляют на сайте без использования. Это может быть связано с ленью или некомпетентностью администраторов, которые предпочитают приобрести готовый плагин, чем тратить время на доработку кода сайта.
Наступает эпоха плагинов, созданных с использованием искусственного интеллекта. Эти инструменты обладают впечатляющими возможностями: они способны не только создавать и оптимизировать сайты, но и изменять их дизайн, а также наполнять контентом, как самостоятельно генерируемым, так и взятым из открытых источников в интернете. Профессия веб-разработчика становится историей? Похоже, что так.
Это было очевидно с самого начала: цифровая индустрия только начинала свой путь как инструмент для вычислений, работающий по заданным алгоритмам. Однако, как только такие учёные, как Алан Тьюринг, начали задумываться о думающих машинах и экспертных системах, способных делать выводы и даже принимать решения, сразу же появились обучаемые, затем обучающиеся и, наконец, самообучающиеся системы. Следующим шагом станет создание систем, которые смогут создавать себе подобных, но более совершенных.
На данный момент мы наблюдаем эволюцию WordPress в сторону блочно-ориентированного подхода к созданию сайтов. Однако уже очевидно, что этот подход становится устаревшим.
В скором времени, вероятно, будут разработаны плагины или системы, которые смогут автоматически создавать сайты на основе ваших запросов. Сегодня я видел ролик, в котором искусственный интеллект создавал сайт, основываясь на ваших предпочтениях. Хотя этот процесс пока что кажется примитивным, он является лишь началом.
За последние годы, мы видим как сильно эволюционировал WP от элементарной CMS , то есть системы управления содержимым (контентом) до системы системы управления содержимым и следующим этапом станет CCS (content creation system).
Часто возникает вопрос о том, какого размера и в каком формате должна быть иконка сайта. Несмотря на то, что фавайкон используется уже много лет, нет однозначного ответа на этот вопрос.
Мы вновь обращаемся к этому вопросу, так как Яндекс Вебмастер посоветовал добавить на сайт файл favicon в формате SVG или размером 120×120 пикселей.
Основы использования иконок Favicon
Favicon — это иконка, отображаемая в адресной строке браузера и на закладке.
Иконки могут быть статическими или динамическими, с возможностью обновления.
Существуют различные форматы иконок, включая PNG, ICO, SVG и другие.
Выбор формата и размера
Для разных платформ и браузеров требуются разные форматы и размеры иконок.
Размер иконки должен соответствовать размеру экрана устройства.
Для больших плиток рекомендуется использовать специальные размеры иконок.
Настройка иконок в HTML
Иконки можно настроить через метаданные в или в файле конфигурации браузера.
Метаданные позволяют указать цвет фона, имя сайта, текст подсказки и другие параметры.
Поддержка различных платформ
В Windows 8.1 и браузере Edge 10 вы можете использовать файл конфигурации браузера для сохранения сайтов в закладках.
В операционной системе Mac OS для создания иконок рабочего стола можно использовать SVG, а для создания закладок в браузере Safari — формат ICO.
В iOS Safari использует иконки для вкладок и закладок, а также поддерживает Web Clips.
В Android можно использовать манифест веб-приложения для настройки отображения сайта на домашнем экране.
Автоматизация процесса
Существуют сервисы и инструменты, которые помогают автоматизировать процесс создания иконок и кода.
Использование пакетов для сборки и автоматизации упрощает процесс создания иконок.
Краткое резюме ↪ В этой статье сравниваются WordPress (Gutenberg) и Elementor по 11 показателям, включая простоту использования и функциональные возможности. Редактор блоков стал быстрее и проще в использовании, благодаря таким дополнениям, как Spectra. Elementor отличается расширенным контролем дизайна. Читайте дальше, чтобы решить, какой из них лучше всего соответствует вашим потребностям!
Какой конструктор страниц вам следует использовать с WordPress? При таком количестве вариантов может быть сложно найти подходящий для ваших навыков, вкуса и уровня опыта. Какой из них лучший? Gutenberg? Beaver Builder? Elementor? Brizy? Еще один, о котором вы не слышали?
В этом посте мы сосредоточимся на двух разных конструкторах страниц: Gutenberg и Elementor.
Сначала мы расскажем, что именно представляет собой каждый из них и как он работает. Затем мы проведем подробное сравнение по 11 различным показателям, включая простоту использования, возможности и другие функции.
Наконец, мы поможем вам принять решение и вынесем наш окончательный вердикт.
Давайте сравним Gutenberg и Elementor!
Что такое Гутенберг?
Изначально запущенный в 2018 году, Gutenberg теперь является стандартным редактором блоков для WordPress. Хотя вы по-прежнему можете установить плагин WordPress Classic Editor, все сообщество разработчиков и дизайнеров WordPress привержено новой системе Gutenberg.
Новая система была создана для того, чтобы значительно упростить процесс создания веб-сайта. Вместо написания HTML и CSS-кода вручную, Gutenberg разработан таким образом, чтобы им было очень просто пользоваться даже нетехническим пользователям.
Чтобы создать страницу в Gutenberg, вам просто нужно перетаскивать крошечные элементы, которые называются блоками. Просто перетащите эти блоки в редактор и настройте их по мере необходимости.
Поскольку Gutenberg теперь является редактором блоков по умолчанию в WordPress, появилось множество новых расширений и надстроек, которые добавляют функциональность. Эти плагины добавляют все, от специальных типов блоков до готовых макетов, и все, что между ними.
Например, Spectra — это плагин, который позволяет добавлять значительное количество новых функциональных возможностей в редактор Gutenberg.
Вы можете добавить множество новых типов блоков, включая прайс-листы, отзывы, списки иконок и многое другое.
Используя дополнения, вы можете создавать сложные веб-сайты, не разбираясь в программировании. Все, что вам нужно сделать, это нажать несколько кнопок!
Что такое Elementor?
Elementor — один из самых популярных плагинов для создания страниц WordPress, доступных с более чем 8 миллионами установок по всему миру. Это позволяет вам настраивать свой сайт с помощью интерфейса перетаскивания, упрощая создание страниц и постов без каких-либо знаний в области программирования.
Как вы можете видеть на скриншоте выше, Elementor используется в отдельном интерфейсе, который отличается от стандартного интерфейса WordPress. Тем не менее, вы по-прежнему получаете к нему доступ непосредственно со своего сайта, поэтому управлять больше нечем, кроме самого плагина Elementor.
Elementor поставляется с большим количеством виджетов, которые позволяют добавлять различные функции на ваш сайт. Если вам этого недостаточно, то есть множество дополнений Elementor для добавления множества виджетов и вариантов оформления.
Возможно, самой сильной особенностью Elementor являются его дизайнерские возможности. Вы можете устанавливать пользовательские позиции, изменять отступы полей и создавать глобальные правила для цветов и настроек типографики.
Вы можете создавать множество видов веб-сайтов с Elementor, включая портфолио, сайты электронной коммерции, целевые страницы, списки мероприятий, блоги и практически все, что только сможете придумать.
Мастер Elementor: бесплатный курс по созданию потрясающих веб-сайтов
Узнайте, как использовать Elementor для создания потрясающих веб-сайтов, на нашем бесплатном курсе. Пошаговые руководства облегчат любому освоение веб-дизайна.
У Elementor доступны как бесплатная, так и платная версии. Бесплатная версия поставляется с более чем 40 базовыми виджетами и более чем 30 шаблонами. Премиальные планы начинаются от 49 долларов в год за один сайт и варьируются до 999 долларов в год по агентскому плану с лимитом в 1000 сайтов.
В премиум-версии есть дополнительные виджеты (более 90), дополнительные шаблоны (более 300), наборы для создания веб-сайтов, премиум-поддержка и другие функции. Все это того стоит, если у вас есть бюджет для вашего проекта.
В целом, если вы создаете бизнес-сайт, вы, вероятно, захотите получить хотя бы базовую премиум-подписку, поскольку бесплатная версия может быть несколько ограничена.
Но подождите…в чем разница между конструктором страниц и редактором блоков? На практике не так уж много, особенно для обычного пользователя.
Однако в более мелких деталях есть разница.
Конструкторы страниц стали мощнее, по крайней мере, на данный момент. Они также позволяют вам настраивать дизайн страницы другими способами, в то время как Gutenberg в большей степени зависит от вашей темы WordPress.
Вы можете представить себе конструктор страниц как создание целой страницы, в то время как редактор блоков — это только один из способов добавления чего-либо внутри страницы , которая существует на сайте WordPress с уже существующей темой.
Другими словами, с редактором блоков на ваши страницы по-прежнему влияет общая тематика вашего сайта. С помощью конструктора страниц вы можете изменять шрифты, цвета и другие элементы дизайна на странице, чтобы они были полностью независимы от общей темы сайта.
Если использовать метафору рисования, конструктор страниц позволяет настраивать как рамку для изображения, так и саму картину. В то время как редактор блоков просто позволяет изменять рисунок, но сохраняет рамку (саму тему WordPress) неизменной.
Конструкторы страниц и будущее веб-дизайна
Однако Gutenberg быстро догоняет конкурентов, и вполне вероятно, что в ближайшем будущем в нем появится больше функций для создания страниц.
Это потому, что это будущее WordPress и, как таковое, пользуется поддержкой всего сообщества. Скоро Gutenberg станет единственным способом создания современного сайта на WordPress без использования конструкторов страниц.
Что касается будущего, то, вероятно, можно с уверенностью сказать, что Gutenberg в конечном итоге заменит или превзойдет большинство систем создания страниц. Итак, это разумный шаг — узнать, как работает Gutenberg!
Тем не менее, скорее всего, всегда найдется место для конструкторов страниц. Как и в случае со многими плагинами для WordPress и темами, иногда вам нужна более мощная, настраиваемая система, которая просто слишком сложна для версии по умолчанию.
В подобных сценариях конструктор страниц в сочетании с некоторыми глубокими знаниями и техническим опытом по-прежнему будет эффективным инструментом для создания потрясающих веб-сайтов.
Сравнение Гутенберга и Elementor
Теперь, когда мы знаем, что такое Gutenberg и Elementor, пришло время сравнить их!
Опережайте события с помощью этих лучших сравнений между Gutenberg и Elementor, представленных в удобной для восприятия инфографике.
.
В чем сходство? В чем различия? Что лучше? Кто станет победителем?
В приведенном ниже сравнении мы использовали 11 различных показателей:
Возможности
Совместимость с другими темами и плагинами
Простота использования
Ключевые особенности
Ключевые отличия
Опыт редактирования в реальном времени
Адаптивные функции
Расширенные возможности
Влияние на скорость просмотра страниц
Цены
Создание страницы
Давайте углубимся!
Gutenberg vs. Elementor: возможности
Сначала давайте поговорим о возможностях. Что вы можете сделать с этими двумя системами?
Короче говоря, Gutenberg и Elementor обладают схожими возможностями и могут использоваться для создания страниц одних и тех же типов.
Однако Gutenberg более интегрирован с остальной системой WordPress, что означает, что он работает по умолчанию с каждым плагином и темой.
Вы можете легко создавать страницы и публикации с помощью редактора блоков, и это органично сочетается с остальной экосистемой WordPress и пользовательским интерфейсом.
Elementor — это скорее отдельная сущность, вроде слоя, расположенного поверх WordPress. Редактор представляет собой отдельное приложение с другим дизайном и задуман как мощный универсальный конструктор страниц, не обязательно являющийся расширением стандартной системы WordPress.
Таким образом, вы можете создавать с его помощью множество сложных макетов, но могут быть некоторые ограничения при интеграции с другими частями сайта и другими плагинами.
Gutenberg vs. Elementor: совместимость с другими плагинами
Поскольку Gutenberg — это версия WordPress по умолчанию, она совместима практически со всеми плагинами и темами для WordPress. Те, которые не совместимы с Gutenberg, в любом случае почти всегда устарели, и вам определенно не следует использовать старые плагины, если вы не обладаете достаточными техническими возможностями, чтобы убедиться в их безопасности.
Elementor немного отличается. Elementor менее совместим с другими темами и плагинами просто потому, что это совсем другая система. Есть несколько плагинов, которые несовместимы с Elementor, однако список не слишком длинный.
Тем не менее, большинство плагинов будут работать просто отлично. Для тех, которые несовместимы с Elementor, часто есть встроенная функция, которая может выполнить ту же задачу.
Gutenberg vs. Elementor: простота использования
В конечном счете, простота использования зависит от личных предпочтений. Однако, когда дело доходит до удобства использования, у Gutenberg и Elementor определенно есть некоторые преимущества и недостатки.
С Gutenberg все интегрировано непосредственно в WordPress. Пользовательский интерфейс — это просто расширение остальной части вашей панели администратора WordPress. Сам дизайн также является расширением темы, установленной вами на вашем сайте.
Лучше всего то, что вся экосистема тем и плагинов WordPress изначально будет работать с Gutenberg. Это упрощает установку новых тем и плагинов.
Elementor, с другой стороны, имеет совершенно другой интерфейс. Это скорее не расширение WordPress, а невероятно мощное приложение, которое дополняет его.
У этого есть плюсы и минусы. Хотя это означает, что вам нужно будет изучить другой пользовательский интерфейс, чтобы использовать его, этот интерфейс на самом деле довольно хорош и интуитивно понятен в использовании. Он отличается от WordPress, но работает очень хорошо и может использоваться всеми, даже нетехническими пользователями.
В целом, Gutenberg знаком и понятен, в то время как Elementor отличается, но интуитивно понятен.
Gutenberg vs. Elementor: ключевые особенности
Каковы ключевые особенности Gutenberg и Elementor? Давайте рассмотрим каждую из них.
Используйте десятки блоков, таких как заголовки, абзацы, изображения и многое другое
Elementor:
Создавайте страницы с помощью интерфейса перетаскивания
Множество вариантов дизайна
Кодирование не требуется
В значительной степени автономный
Большая библиотека дополнений
Множество стилей для виджетов, заголовков и других областей
Добавьте карусели, галереи и другие элементы дизайна
Gutenberg vs. Elementor: ключевые отличия
В чем ключевые различия между Gutenberg и Elementor?
Есть несколько основных:
Гутенберг интегрирован в WordPress, и это действительно является WordPress. Elementor — это отдельный плагин, который находится поверх обычной системы WordPress.
Gutenberg хорошо работает с темами и плагинами, в то время как Elementor, по сути, разработан так, чтобы не нуждаться в других темах или плагинах.
Gutenberg — это в первую очередь редактор блоков, в то время как Elementor — конструктор страниц. Разница в том, что Gutenberg позволяет добавлять и переставлять блоки на вашем веб-сайте, который затем управляется вашей темой. Elementor, с другой стороны, позволяет вам создать совершенно уникальный сайт, который не обязательно привязан к остальной тематике вашего сайта.
Gutenberg бесплатен и всегда будет бесплатным, поскольку сейчас это стандарт WordPress. У Elementor бесплатная версия, но для доступа к более мощным функциям требуется премиум-аккаунт.
Gutenberg vs. Elementor: опыт редактирования в реальном времени
Чем отличается живой монтаж между Elementor и Gutenberg?
Оба по сути показывают вам, как будет выглядеть страница, однако Gutenberg показывает вещи до применения темы сайта и других элементов. Итак, это больше похоже на предварительный просмотр, чем на реальную прямую редактуру.
Чтобы увидеть, как будут выглядеть блоки Gutenberg, вам нужно просмотреть страницу на вашем реальном сайте. Это так же просто, как нажатие на превью и/или публиковать кнопки, но это еще один дополнительный шаг.
Elementor показывает вам, как именно будет выглядеть ваш сайт в приложении, поскольку конструктор встроен прямо в систему. Вы можете настраивать шрифты, цвета и любые другие элементы дизайна, которые обычно обрабатываются самой темой.
Конечный результат будет отображаться в режиме реального времени на правой панели.
Gutenberg vs. Elementor: адаптивные функции
И Gutenberg, и Elementor оптимизированы для мобильных устройств и безупречно работают на любых устройствах. Они адаптивны по умолчанию, что означает, что вам не нужно ничего делать, чтобы заставить их работать на мобильных устройствах.
Однако некоторые темы WordPress могут не реагировать. Это относительно необычно и в основном встречается только со старыми или менее известными темами.
Если вы используете популярную тему, такую как Astra, каждый шаблон Elementor будет полностью адаптивным!
Gutenberg vs. Elementor: расширенные возможности
Насколько продвинуты функции в Gutenberg и Elementor? Что лучше?
В целом, Elementor, вероятно, немного более продвинутый, просто потому, что он спроектирован как автономный. Есть живой редактор с возможностью перетаскивания, оптимизация рабочего процесса, создание целевой страницы, интеграция с маркетинговыми инструментами и многое другое.
Вы также можете добавлять динамический контент, эффекты движения, пользовательские стили и персонализированный опыт для каждого пользователя.
Gutenberg полагается на остальную экосистему WordPress, такую как темы и плагины. Хотя вы можете получить большинство тех же функций, что и Elementor, вам нужно будет найти отдельный плагин для этой функциональности.
Например, динамический контент включен в Elementor по умолчанию, но с Gutenberg вам захочется установить плагин, подобный If-So Dynamic Content.
Таким образом, в Gutenberg отсутствуют определенные функции, которые можно легко добавить с помощью других плагинов, таких как Spectra. В целом, это не является серьезным недостатком, поскольку позволяет вам выбирать то, что вы хотите использовать,
Однако, если сравнить полную функциональность их обоих и включить дополнительные дополнения, они очень сопоставимы.
Gutenberg vs. Elementor: влияние на скорость просмотра страниц
В целом, Gutenberg быстрее Elementor, и для подтверждения этого было проведено множество тестов. Вероятно, это связано с тем, что Gutenberg проще, эффективнее и имеет меньше дополнительных функций, которые увеличивают размер файла на вашем сайте.
Отчасти это связано с тем, что Gutenberg — это WordPress.
Чтобы проиллюстрировать это, давайте проведем тест скорости с помощью GTmetrix. Мы будем использовать два шаблона Astra, предназначенных для одного и того же типа сайтов: веб-сайт для приключений на природе. Первый построен с использованием Gutenberg, в то время как второй использует Elementor.
Обратите внимание, что эти шаблоны размещены на высокоскоростных серверах и были должным образом оптимизированы.
Результаты по скорости просмотра страниц Gutenberg
Результаты теста скорости просмотра Elementor
Как вы можете видеть, Gutenberg one немного быстрее: 0,949 секунды против 1,2 секунды. Может показаться, что разница невелика, но когда дело доходит до скорости веб-страницы, важна каждая миллисекунда.
У темы Gutenberg также меньший размер страницы (1,78 МБ против 2,02 МБ) и меньше запросов (24 против 51). Это также влияет на время загрузки сайта.
Медленные сайты получают меньше трафика, хуже отображаются в результатах поиска Google и имеют более высокий показатель отказов. Это особенно верно, если на вашем сайте много разных изображений и страниц, что может привести к серьезной потере времени.
Gutenberg vs. Elementor: цены
Gutenberg полностью бесплатен, что означает, что он выигрывает этот раунд почти сразу. Однако следует учитывать некоторые другие факторы.
А именно, поддержка. Хотя Gutenberg бесплатен и встроен прямо в WordPress, это означает, что вам придется полагаться на бесплатные каналы поддержки и / или на вашего хостера в случае возникновения проблемы. Это не похоже на платные версии Elementor, которые поставляются с премиум-поддержкой.
Итак, хотя Gutenberg в основном бесплатен, вам, возможно, придется заплатить за дополнительную поддержку, а это означает, что часто он может стоить ту же сумму денег, что и Elementor.
Gutenberg vs. Elementor: создание страницы
Наконец, давайте поговорим о создании страницы с помощью Gutenberg и Elementor. Оба имеют схожую структуру и используются методом перетаскивания.
Как создать страницу с помощью Gutenberg
Чтобы создать страницу с WordPress Gutenberg, вам просто нужно щелкнуть черный знак плюс в редакторе страницы, а затем выбрать нужный блок.
Чтобы добавить содержимое в блок, наведите курсор на блок и щелкните по нему. Затем начните печатать! Это очень просто. Вы также можете настроить блок, используя панель параметров в правой части экрана. Это будет меняться в зависимости от выбранного вами в данный момент блока и его типа.
Чтобы переместить блок, просто щелкните три точки рядом с ним, затем нажмите Переместить в.
Вот и все для создания страниц с помощью Gutenberg! Все сводится к выполнению этих небольших шагов: добавлению блоков, их настройке и размещению на странице.
Как создать страницу с помощью Elementor
У Elementor более сложный макет, который внешне сильно отличается от стандартной настройки WordPress. Но научиться использовать Elementor на самом деле проще, чем кажется.
Чтобы добавить элемент, вам нужно перетащить его с панели слева в пространство справа:
После того, как вы перетащили элемент, вы можете перемещать его с помощью перетаскивания. Просто!
Вы также можете нажать на крошечный знак плюс, который появляется в самом окне, и выбрать элемент таким образом.
Чтобы отредактировать содержимое, просто наведите курсор на элемент и щелкните по нему. С левой стороны вы увидите панель с различными вариантами оформления. В зависимости от блока вы также можете редактировать содержимое прямо на панели.
Например, на изображении ниже мы можем отредактировать Добавьте сюда текст заголовка текст на боковой панели или в предварительном просмотре.
По сравнению с Gutenberg, Elementor имеет больше возможностей дизайна и настройки в редакторе.
Это потому, что Elementor разработан как автономный, в то время как Gutenberg более интегрирован с WordPress. Таким образом, большинство вариантов дизайна для Gutenberg будут доступны в программе настройки WordPress, а не в конструкторе страниц.
Наконец, чтобы переместить блок, просто щелкните и перетащите значок в центре синего маркера блока с 6 точками.
Если вы будете удерживать его нажатой, вы сможете перетащить его. Voilà!
создание страниц в Elementor довольно простое, и вы можете редактировать и настраивать все прямо в редакторе. Вам не нужно предварительно просматривать страницу, чтобы увидеть, как она будет выглядеть.
Окончательное решение
Кто окончательный победитель? Как и в большинстве случаев в жизни, это зависит от вашей ситуации…
Гутенберг лучше всего подходит для…
По нашему мнению, Gutenberg — лучший универсальный выбор для большинства веб-сайтов. Это опция WordPress по умолчанию, означающая, что она пользуется полной поддержкой основных разработчиков WordPress.
Кроме того, он очень прост в использовании и не требует особого обучения.
Хотя у Gutenberg не так много вариантов оформления, как у Elementor, их более чем достаточно для всех, кроме самых продвинутых пользователей.
А с такими дополнениями, как Spectra, добавляются все более мощные функции.
Elementor Лучше всего подходит для…
Elementor — отличный выбор для веб-сайтов, где вам нужно создавать сложные страницы, отличающиеся друг от друга. Или, если вы создаете сайт, который не является стандартным блогом / сайтом новостей / сайтом со стандартной страницей.
Elementor дает вам больше контроля над конкретным макетом каждой страницы. Это потому, что Elementor позволяет вам полностью контролировать дизайн любой конкретной страницы. Итак, если вам нужно это для конкретной страницы или поста, Elementor, безусловно, отличный выбор.
Хотя Elementor сложнее, чем Gutenberg, и менее привязан к системе WordPress, это все равно невероятный конструктор, который дает вам массу гибкости.
Gutenberg vs. Elementor – Вердикт
В большинстве ситуаций вы, вероятно, захотите придерживаться Gutenberg. Это опция WordPress по умолчанию, и со временем она будет продолжать расширяться. А с такими дополнениями, как Spectra, список функций продолжает расти.
Однако, если вам нужен более сложный сайт, требующий тонкой настройки макета страницы и функциональности, вы можете обратить внимание на Elementor.
Это мощный инструмент с множеством дополнительных функций, которые могут пригодиться. И хотя пользовательский интерфейс отличается и может занять некоторое время, чтобы привыкнуть, он довольно эффективен, как только вы в нем разберетесь.
