GeneratePress и Gutenberg: как собрать страницу без конструктора
Если вам нужен аккуратный лендинг, корпоративная страница или отдельная секция сайта на GeneratePress, стандартного редактора WordPress обычно достаточно. В этой связке тема отвечает за каркас, отступы, ширину контента и общую типографику, а Gutenberg — за саму структуру страницы: заголовки, колонки, кнопки, изображения, блоки с фоном и повторяющиеся секции.
Это хороший вариант, когда не хочется ставить Elementor или другой конструктор ради одной-двух страниц. Проект остаётся легче в поддержке: меньше зависимостей, меньше лишнего CSS и JavaScript, проще обновления и диагностика, если что-то поехало вёрсткой.
Что именно даёт GeneratePress в связке с Gutenberg
GeneratePress не заменяет редактор блоков и не пытается строить страницы вместо него. Сильная сторона темы в другом: она даёт чистую основу, которую удобно подстраивать под контент. Для обычной страницы это особенно заметно в трёх вещах.
- Ширина и контейнер. Можно сделать страницу уже или шире в зависимости от задачи: статья, лендинг, промо-блок, страница услуги.
- Отступы и структура. Тема не навязывает тяжёлую разметку, поэтому блоки Gutenberg выглядят предсказуемо и не конфликтуют с лишними обёртками.
- Минимум лишнего. Если вы не подключаете конструктор, на странице обычно меньше сторонних ресурсов и меньше шансов сломать макет после обновления плагина.
В бесплатной версии GeneratePress можно собрать вполне рабочую страницу, если хватает возможностей самого Gutenberg и базовых настроек темы. Платные модули GeneratePress Premium расширяют контроль над макетом и отдельными элементами, но для многих обычных страниц они не обязательны.
С чего начать: базовая настройка страницы
Перед сборкой лендинга или обычной страницы проверьте, что у вас уже настроены три вещи: тема активна, редактор блоков доступен, а в шаблоне страницы нет лишних ограничений. Если сайт уже работает, лучше не менять глобальные настройки вслепую — сначала сделайте одну тестовую страницу и проверьте результат на ней.
Для страницы в WordPress обычно достаточно открыть её в редакторе и в правой панели проверить шаблон, ширину и параметры отображения. В GeneratePress часто используются собственные настройки страницы, которые позволяют убрать боковую колонку, заголовок страницы или хлебные крошки, если они мешают лендингу. Названия и расположение этих опций зависят от версии темы и активных модулей, поэтому ориентируйтесь не на точный путь в меню, а на смысл настроек: убрать лишнее, оставить только нужное.
Если у вас включён редактор сайта или дополнительные плагины для блоков, сначала убедитесь, что они не подменяют стандартную логику WordPress. Иначе вы будете настраивать страницу в одном месте, а визуально результат получите в другом.
Как собрать страницу в Gutenberg без конструктора
Для обычного лендинга удобнее идти от структуры, а не от оформления. Сначала собирается смысловой каркас, потом уже внешний вид. Это особенно хорошо работает в GeneratePress, потому что тема не мешает базовой семантике страницы.
1. Задайте верхний экран
Первый экран обычно состоит из заголовка, короткого описания и кнопки. В Gutenberg это можно собрать обычными блоками: заголовок, абзац, кнопка, при необходимости — изображение или группа блоков с фоном. Если нужен более плотный визуальный блок, используйте группу или обложку, но не перегружайте её лишними вложенными элементами.
Для лендинга важно, чтобы первый экран был читаемым на мобильных устройствах. Проверьте, не расползается ли заголовок на три-четыре строки и не уезжает ли кнопка ниже видимой области. В GeneratePress это особенно заметно, если вы задали слишком широкую типографику или большой верхний отступ.
2. Разбейте страницу на смысловые секции
Дальше лучше собирать страницу блоками-секциями: преимущества, описание услуги, кейсы, тарифы, FAQ, контакты. Для каждой секции используйте отдельную группу блоков, чтобы управлять фоном, отступами и выравниванием. Это проще, чем пытаться стилизовать весь контент одной длинной колонкой.
Если секция должна выглядеть как отдельный визуальный блок, задайте ей собственный фон и внутренние отступы. В Gutenberg это делается штатными средствами блока группы или обложки. В GeneratePress не нужно дублировать эти отступы в теме и в блоке одновременно: если задать слишком много padding на обоих уровнях, страница станет «раздутой».
3. Используйте колонки только там, где они действительно нужны
Блок «Колонки» удобен для сравнения преимуществ, карточек услуг и коротких списков. Но на длинных текстовых секциях он часто создаёт больше проблем, чем пользы: на мобильных устройствах колонки превращаются в вертикальный стек, и если внутри много текста, страница становится тяжёлой для чтения.
Практический ориентир простой: если блок должен быстро сканироваться глазами, колонки подходят. Если пользователь должен читать вдумчиво, лучше оставить один столбец.
4. Добавьте кнопки и якоря
Для лендинга без конструктора полезно сразу продумать навигацию по странице. Gutenberg поддерживает якоря у блоков, а это значит, что можно сделать переходы к секциям без отдельного плагина. Такой подход удобен для длинных страниц услуг, когда посетитель хочет быстро перейти к цене, FAQ или форме заявки.
Проверяйте, чтобы якоря работали и с десктопа, и с телефона. Если у вас закреплённый хедер, убедитесь, что заголовок секции не прячется под ним после перехода по ссылке.
Что лучше делать в теме, а что — в блоках
Здесь часто путают уровни настройки. GeneratePress отвечает за глобальный каркас сайта, а Gutenberg — за содержимое конкретной страницы. Если смешать эти уровни, потом сложно понять, где именно править макет.
| Задача | Лучше настраивать где | Почему |
|---|---|---|
| Ширина контента | В теме или шаблоне страницы | Это влияет на весь контейнер, а не только на один блок |
| Фон отдельной секции | В Gutenberg | Фон нужен именно для этого блока, а не для всего сайта |
| Типографика заголовков | В теме | Так проще сохранить единый стиль на сайте |
| Кнопка в первом экране | В Gutenberg | Это часть конкретного лендинга или страницы |
| Убрать сайдбар на лендинге | В настройках страницы или шаблона | Это влияет на компоновку всей страницы |
Если вы начинаете править отступы и размеры одновременно и в теме, и в блоках, результат становится непредсказуемым. Сначала задайте глобальные параметры в GeneratePress, потом уже доводите конкретную страницу в редакторе.
Как сделать страницу аккуратной без лишнего CSS
Самая частая ошибка при работе с GeneratePress и Gutenberg — пытаться «дожать» внешний вид через большой кусок CSS, хотя нужный результат можно получить штатными настройками блоков. Это не значит, что CSS не нужен совсем. Но в обычной задаче он должен быть последним шагом, а не первым.
Если вам нужно просто:
- сузить контейнер;
- убрать лишний заголовок;
- сделать секцию с фоном;
- выровнять кнопки;
- добавить отступы между блоками;
то чаще всего достаточно возможностей темы и стандартных блоков. Пользовательский CSS имеет смысл, когда вы уже собрали страницу и видите точечную проблему: например, слишком большой интервал между элементами, нестандартный размер кнопки или особое поведение на мобильных устройствах.
Если всё же добавляете CSS, не правьте файлы родительской темы напрямую. Для постоянных изменений используйте дочернюю тему, пользовательский CSS в настройках темы или отдельное место для кастомных стилей, если оно предусмотрено вашей конфигурацией. Иначе обновление темы может затереть правки.
На что проверить страницу перед публикацией
Собранная в Gutenberg страница часто выглядит нормально в редакторе, но на фронтенде проявляются проблемы с отступами, шириной и адаптивностью. Перед публикацией проверьте страницу в реальном просмотре, а не только в админке.
- Мобильная версия. Заголовки не должны ломать сетку, кнопки — уходить за экран, а колонки — становиться нечитаемыми.
- Первый экран. Пользователь должен сразу понимать, куда попал и что делать дальше.
- Скорость. Не перегружайте страницу тяжёлыми изображениями, лишними иконками и видео, если они не нужны для задачи.
- Единый стиль. Проверьте, что заголовки, кнопки и списки выглядят одинаково во всех секциях.
- Навигация. Если есть якоря и кнопки перехода, убедитесь, что они ведут туда, куда нужно.
Если страница уже опубликована и вы меняете её на работающем сайте, не делайте сразу много правок. Сначала проверьте одну секцию, потом вторую. Так проще понять, что именно сломало вёрстку, если результат окажется не тем.
Когда без конструктора всё-таки не обойтись
GeneratePress и Gutenberg хорошо закрывают обычные страницы, лендинги, информационные секции и простые промо-страницы. Но есть сценарии, где стандартного редактора уже мало: сложные анимации, нестандартные интерактивные блоки, очень специфичная сетка, глубокая логика отображения контента по условиям.
В таких случаях у вас есть два пути: либо подключать отдельный конструктор, либо собирать нужную логику через блоки, шаблоны и код. Второй путь обычно чище для производительности, но требует больше опыта. Если задача — быстро запустить аккуратную страницу без лишних инструментов, Gutenberg в связке с GeneratePress остаётся самым практичным вариантом.
Если же вы только выбираете основу для нового проекта и хотите собирать страницы из готовых блоков и стартовых шаблонов с меньшим количеством ручной настройки, можно посмотреть и в сторону WPBox: https://wpshop.ru/themes/wpbox?utm_source=generatepress.ru&utm_medium=article&utm_campaign=generatepress-gutenberg-page-without-builder. Это не замена GeneratePress в лоб, а другой рабочий сценарий — более «собранный» старт для тех, кому важны готовые инструменты из коробки.
Для большинства обычных сайтов на WordPress связка GeneratePress + Gutenberg даёт ровно то, что нужно: чистую структуру, предсказуемую вёрстку и возможность собрать страницу без тяжёлого конструктора. Если держать разделение между настройками темы и блоками, результат получается аккуратным и проще поддерживается в будущем.