Собрать макет сайта для WordPress — зафиксировать структуру страниц, блоки и сетку до вёрстки: в Figma или аналоге, черновиком в блоках WP или в конструкторе темы; затем перенести решение в тему или child theme без хаоса в проде.
«Где собрать макет» — это цепочка: схема страниц → визуал → согласование → передача в WordPress. Ниже — порядок без культа одного сервиса.
На wordprais.ru — WordPress под бизнес; без макета тема и плагины превращаются в бесконечные правки.
SEO — макет сайта WordPress, макеты сайтов wordpress, шаблоны вордпресс.
SEO — Figma, Gutenberg, дочерняя тема, передача в вёрстку.
SEO — таблица и FAQ по практике.
Оглавление
Макет дешевле согласований и переделок в коде.
Где собирают макеты под WordPress
Три контура: Figma/аналог, черновик в WP с блоками и паттернами, либо «Figma → child theme / Site Editor». Лендингу хватает ключевых экранов и UI-kit; магазину и блогу — отдельно карточка, архив и single.
Если команда уже ведёт сайт на WordPress, полезно заранее решить: макет — «внешний артефакт» (Figma) или «живой прототип» в админке. Первый путь сильнее для бренда и согласований с дизайнером, второй — быстрее показывает реальные отступы темы и поведение блоков на мобильном без двойной работы.
Figma и сетка
Сетка, компоненты, брейкпоинты, комментарии. UI-kit по кнопкам, формам, карточкам — чтобы отступы не придумывались в CSS. FigJam/Miro — для карты страниц до визуала. Экспорт и спека для разработчика уменьшают разрыв макет ↔ вёрстка.
Имеет смысл завести правила именования слоёв и вариантов под десктоп/планшет/телефон: так проще не потерять отступы при передаче в тему и при последующих правках контента маркетингом.
Черновик в WordPress
Можно собирать макет страницами-черновиками: группы, колонки, обложки. Видны скорость и типографика темы. Риск — смешать эксперимент с продом; лучше поддомен или стенд.
На черновике проверяйте длинные заголовки, списки и таблицы: именно они ломают сетку чаще, чем «идеальные» тексты из макета.
Конструкторы и темы
Визуальные конструкторы ускоряют картинку, но тяжелеют фронт. Кастомная тема даёт контроль и дороже в поддержке. Частый компромисс — лёгкая тема и ограниченный набор паттернов под макет.
Передача в вёрстку
Не только PNG: доступ к Figma, шрифты, сетка, мобильные состояния, ошибки форм. Отдельно — что правится в админке, что зашито в код. Так меньше раундов «как на картинке, но ещё из блоков».
Таблица: этап и инструмент
| Этап | Задача | Инструмент |
|---|---|---|
| Структура | Страницы, CTA | FigJam, Miro |
| Визуал | Сетка, компоненты | Figma, XD |
| Проверка | Реальные блоки темы | Черновик, стенд |
| Прод | Тема, кэш | Код, хостинг |
После макета — замер скорости по черновику: тяжёлые блоки проще упростить до вёрстки.
Макет → тема → контент → скорость; ранняя фиксация структуры дешевле переделок.
Частые вопросы
Обязательно ли Figma?
Нет; нужны структура и компоненты. Подойдут и другие редакторы или аккуратный черновик в блоках.
Без дизайнера можно?
Для простого сайта на готовой теме — часто да; для бренда и сложной сетки макет всё равно нужен.
Макет или шаблоны вордпресс?
Шаблон задаёт рамки, макет — наполнение. Согласуйте оба.
Сразу Elementor?
Если готовы к тяжёлому фронту и кэшу — да; иначе чаще выигрывают нативные блоки и лёгкая тема.
Нужен стенд?
Для экспериментов внутри WP — желателен.
Часто задаваемые вопросы по теме (FAQ)
Где собрать макет сайта для WordPress бесплатно?
Бесплатный Figma/FigJam, схема на бумаге или черновик на тестовом WP.
Как связать макет с блоками Gutenberg?
Назовите блоки так, как в редакторе, и заранее решите, что уходит в паттерны.
Готовые макеты сайтов wordpress?
Как старт — да; адаптируйте сетку и контент, иначе шаблон и однотипность.
Что отдать разработчику с Figma?
Шрифты, отступы, брейкпоинты, состояния UI, список редактируемого в админке.
Читайте также
Как ускорить сайт на WordPress, Топ плагинов WordPress, блог, услуги WordPress.
Что делать дальше
Услуги и блог; выдача — Яндекс, Google; вопросы — Telegram, MAX.
