Редактор Gutenberg позволяет собирать обычные страницы WordPress из стандартных блоков без отдельного визуального конструктора. Начните со структуры содержания, затем добавляйте блоки и проверяйте результат на мобильном экране. Не стремитесь сразу воспроизвести сложную анимацию: сначала создайте читаемую рабочую страницу.
Пример задачи: страница услуги
Представим страницу «Настройка Wi-Fi в офисе». Её цель — объяснить услугу и привести посетителя к заявке. Логичная структура:
- Первый экран: название услуги, кому подходит и кнопка связи.
- Что входит: перечисление работ и исключений.
- Как проходит процесс: несколько понятных этапов.
- Доверие: реальный опыт, примеры, документы при наличии.
- FAQ: ответы на практические вопросы.
- Контакт: форма или телефон, условия обработки данных.
Это пример структуры, а не обязательный шаблон для каждого сайта.
Как добавить блок
Перейдите в Страницы → Добавить новую. Нажмите +, найдите нужный блок по названию и вставьте его. Для базовой страницы пригодятся «Заголовок», «Абзац», «Изображение», «Группа», «Колонки», «Список» и «Кнопки». Вид блока и доступные настройки зависят от темы и установленного набора блоков.
Создайте заголовок страницы в поле названия. В тексте используйте иерархию H2/H3; не добавляйте второй H1 только ради увеличения размера шрифта. Объясняющий текст размещайте там, где пользователь ожидает его увидеть, а не прячьте за декоративными элементами.
Как сделать секцию с фоном и отступами
Обычно удобно объединять блоки в «Группу»: фон, внутренние отступы и ширина задаются для секции, а текст внутри остаётся отдельными редактируемыми блоками. Если тема не предлагает нужные параметры, сначала проверьте поддержку дизайна в теме вместо установки ещё одного плагина.
Для двух колонок используйте «Колонки», но проверяйте порядок чтения и мобильный вид: на небольшом экране колонки могут перейти одна под другую. Кнопка должна иметь понятный текст действия, а не только «Подробнее» без контекста.
Изображения и доступность
Загружайте изображения подходящего размера и формата. Добавьте альтернативное описание, когда оно передаёт смысл, и оставьте декоративные изображения без избыточного SEO-текста в alt. Контраст текста на фоне должен позволять читать страницу. Не помещайте важную информацию только внутрь картинки.
Проверяйте оптимизацию изображений отдельно от выбора блока. Даже красивый макет будет неудобным, если грузится слишком медленно.
Повторяющиеся секции
Когда похожую секцию нужно вставлять на нескольких страницах, используйте паттерны (patterns). Обычный паттерн копирует структуру для последующего редактирования на каждой странице, синхронизированный меняется во всех местах использования. Эта разница разобрана в инструкции по паттернам.
Как проверить страницу до публикации
- Откройте предварительный просмотр, проверьте заголовки и ссылки.
- Просмотрите узкий мобильный экран и порядок блоков.
- Убедитесь, что кнопка ведёт на нужную форму/контакт, а не на пустой раздел.
- Проверьте заметность фокуса клавиатуры и возможность перейти по ссылкам.
- Убедитесь, что текст читается без горизонтальной прокрутки.
- Проверьте, нет ли двух одинаковых CTA, ведущих к разным действиям без объяснения.
Частые ошибки
Страница выглядит иначе, чем в редакторе. Проверьте тему, глобальные стили, кеш, сторонние CSS и различия ширины окна.
Не удаётся изменить шапку. Шапка чаще относится к шаблону или его части, а не к содержимому отдельной страницы. См. редактор сайта.
Блоки не поддерживают нужную функцию. Сначала проверьте стандартные возможности и выбранную тему; затем рассмотрите отдельный плагин. Обзор вариантов — конструкторы страниц WordPress.
Критерий готовности: посетитель понимает предложение и может выполнить действие, а редактор способен поправить текст без разработчика.
Источник: https://wordpress.org/documentation/article/wordpress-block-editor/
Материал был полезен?
Помогите нам сделать материалы точнее и понятнее.