Собираем лендинг на WordPress: от установки до публикации

В прошлой статье мы разобрали, почему WordPress — лучший выбор для быстрого запуска сайта. Теперь обещанное: собираем реальный лендинг пошагово, без «потом разберетесь» и без прыжков между вкладками.

Лендинг — это страница, на которую человек попадает из рекламы или соцсетей. У нее нет меню и лишних ссылок: только оффер, преимущества, доказательства и кнопка действия . Мы сделаем лендинг для вымышленной студии дизайна интерьеров «Уют». Вы увидите: знания HTML/CSS, которые вы получили в начале блога, не выбрасываются. Они позволяют кастомизировать готовую тему под себя, а не мириться с тем, что предлагает шаблон.

Что понадобится

• Хостинг с панелью управления (cPanel, DirectAdmin или аналогичной). Мы будем использовать установщик в один клик — он есть почти везде.

• Домен (можно временный от хостинга).

• 30–40 минут времени.

• Тема WordPress — возьмем Twenty Twenty-Five (бесплатная, блочная, идет в комплекте). Именно на ней официальный учебный курс WordPress показывает создание лендинга .

💡 Почему блочная тема, а не классическая? В 2026 году WordPress движется к полному блочному редактированию. Блочные темы дают больше контроля через theme.json и глобальные стили, и именно этот подход будет основным. Классические темы пока работают, но новые возможности появляются сначала в блочных .

🔧 Где взять хостинг для лендинга

Прежде чем устанавливать WordPress, нужен хостинг. Мы в этом блоге используем и рекомендуем Lite-Host — российский провайдер с панелью управления, установщиком WordPress в один клик и поддержкой на русском. Для лендинга хватит минимального тарифа.

Выбрать тариф на Lite-Host →

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

Шаг 1. Установка WordPress за 5 минут

Заходите в панель управления хостингом. Найдите раздел Softaculous Apps Installer (или аналогичный установщик — Installatron, WordPress Manager).

1. Нажмите WordPress → Install.

2. Choose Protocol: выберите https://, если у домена уже есть SSL-сертификат. Если нет — http://, потом перенастроите.

3. Choose Domain: ваш домен.

4. In Directory: оставьте пустым, если WordPress должен открываться по корневому адресу https://ваш-домен. Если хотите сайт в подпапке — впишите blog или site .

5. Site Name: «Уют — студия дизайна интерьеров».

6. Admin Username: придумайте не admin (это мишень для ботов).

7. Admin Password: сложный пароль, сохраните в менеджере паролей.

8. Admin Email: ваш реальный email — туда придут уведомления.

9. Select Plugins: ничего не выбирайте. Установите только то, что понадобится, позже .

Нажмите Install. Через 1–3 минуты вы получите ссылку на админку: https://ваш-домен/wp-admin. Войдите с логином и паролем, которые задали.

Проверка: откройте https://ваш-домен в браузере. Вы должны увидеть дефолтную страницу WordPress с темой Twenty Twenty-Five. Поздравляю, сайт существует.

Шаг 2. Создаем кастомный шаблон для лендинга

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

В админке: Внешний вид → Редактор (или Site Editor, если у вас свежая версия).

1. В левом меню выберите Шаблоны (Templates).

2. Нажмите Добавить новый (Add New).

3. Выберите тип Страница (Page) и назовите шаблон Landing Page.

4. Откроется редактор шаблона. Слева в структуре вы увидите Header и Footer.

5. Удалите Header (нажмите на него в списке слоев → три точки → Remove).

6. Footer можно оставить — в нем будет копирайт, это не мешает.

7. Нажмите Сохранить (Save).

Теперь у вас есть шаблон, в котором нет отвлекающей навигации. Именно так официальный курс WordPress предлагает делать лендинги .

Где здесь HTML/CSS? Вы только что сделали то, что в классической теме требовало бы создания landing-page.php и правки get_header() / get_footer() вручную . Блочная тема сделала это через интерфейс. Но понимание, что вы удалили и зачем, пришло из знаний HTML-структуры страницы.

Шаг 3. Собираем контент лендинга

Лендинг «Уют» будет продавать услугу «Дизайн-проект квартиры за 30 дней». Структура:

1. Hero-секция: заголовок, подзаголовок, кнопка, фото интерьера.

2. Преимущества: три колонки с иконками.

3. Социальное доказательство: отзывы клиентов.

4. FAQ: частые вопросы.

5. Финальный CTA: еще одна кнопка.

Создайте страницу: Страницы → Добавить новую. Назовите «Дизайн-проект». В правой панели настроек страницы найдите Шаблон (Template) → выберите Landing Page, который создали в шаге 2.

Теперь наполняем. Открывайте Patterns (кнопка «+» в редакторе → вкладка Patterns). WordPress идет с десятками готовых блоков-паттернов. Нам нужны:

• Hero section (Banner) — паттерн с заголовком и кнопкой поверх изображения.

• Three columns — для преимуществ.

• Testimonials — для отзывов.

• FAQ — для вопросов.

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

На этом этапе вы работаете как редактор, не как разработчик. И это нормально: задача лендинга — контент и конверсия, а не демонстрация вашего владения CSS.

Шаг 4. Кастомизация: где пригодится HTML/CSS

Вот здесь начинается интересное. Стандартные паттерны выглядят «нормально», но не «как бренд». Допустим, у «Уюта» фирменный цвет — теплый терракотовый #C96F4A, а шрифт заголовков — с засечками (например, Georgia). Стандартная тема использует свои цвета и системный шрифт.

Вариант А: через глобальные стили (без кода)

В Редакторе сайта → Стили → Цвета → Палитра. Вы можете изменить цвета темы. Найдите цвет, который используется для кнопок, и замените его HEX-код на #C96F4A. Аналогично в Типографика → Заголовки выберите Georgia (или загрузите шрифт, если хотите веб-шрифт).

Это работает, потому что блочная тема хранит все стили в структурированном виде и позволяет менять их через интерфейс. Ваши знания CSS подсказывают, что именно менять: вы понимаете, что цвет кнопки — это background-color, а шрифт — font-family.

Вариант Б: точечная правка через Additional CSS

Если нужно изменить что-то, чего нет в глобальных стилях, идите в Внешний вид → Настроить → Дополнительные стили (Additional CSS). Сюда можно вставить CSS-правило, и оно применится поверх темы.

Пример: сделаем кнопки в hero-секции чуть крупнее и с большим скруглением.

/* Увеличиваем главную кнопку в hero */
.wp-block-button.is-style-fill .wp-block-button__link {
    padding: 16px 36px;
    font-size: 18px;
    border-radius: 8px;
}

Это тот самый CSS, который вы учили. Разница лишь в том, куда его писать: не в style.css вашей темы (который перезапишется при обновлении), а в поле Additional CSS, которое сохраняется отдельно.

Вариант В: свой HTML-блок (для нестандартных элементов)

Представьте: нужен блок с бегущей строкой логотипов партнеров. Паттерна нет, а плагин ставить не хочется. Добавьте на страницу блок Custom HTML (в поиске блоков наберите «HTML») и вставьте:

<div class="partners">
    <p>Нам доверяют:</p>
    <div class="partners-row">
        <span>Студия «Форма»</span>
        <span>Бюро «Линия»</span>
        <span>Мастерская «Дерево»</span>
    </div>
</div>

<style>
.partners {
    text-align: center;
    padding: 40px 20px;
    border-top: 1px solid #eee;
}
.partners-row {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    font-size: 18px;
    color: #888;
}
</style>

Блок Custom HTML позволяет вставить любой HTML/CSS прямо в страницу. Это не замена нормальной разработке, но для быстрых вставок работает отлично.

Шаг 5. Подключаем форму заявки

Лендинг без формы — это визитка без телефона. Нужен способ собрать контакты.

1. Плагины → Добавить новый → найдите WPForms (или Contact Form 7, или Forminator — любой).

2. Установите, активируйте.

3. Создайте форму: поля «Имя», «Email», «Телефон» (опционально).

4. В редакторе страницы добавьте блок WPForms (или шорткод плагина) в нужное место — например, в финальный CTA-блок.

Форма — это то, что превращает посетителя в лида. Без нее лендинг бесполезен, даже если выглядит красиво .

Шаг 6. Публикация и проверка

Нажмите Опубликовать на странице. Затем проверьте:

1. Десктоп: откройте страницу в браузере. Шапки с меню нет? Кнопки работают? Форма отправляется?

2. Мобильный: откройте в телефоне или в DevTools (F12 → иконка телефона). Все ли читается? Не вылезает ли за края?

3. Скорость: зайдите на PageSpeed Insights, введите URL. Если оценка ниже 70 — проверьте, не загрузили ли вы гигантские изображения. Сожмите их через TinyPNG и перезалейте.

Чего пока нет: кэширования, SEO-плагина, аналитики. Это следующие шаги, но лендинг уже работает. Люди могут зайти, прочитать, оставить заявку.

🚀 Лендинг готов — пора его разместить

Если вы еще не выбрали хостинг, самое время. На Lite-Host установка WordPress занимает пару минут через панель управления, а для лендинга с формой заявки хватит базового тарифа.

Запустить лендинг на Lite-Host →

Партнерская ссылка: цена для вас не меняется, а блог получает комиссию на новые материалы.

Что мы сделали и чему это учит

Мы собрали лендинг без единой строчки PHP и без детального знания WordPress-архитектуры. Но:

• Мы понимали, что удаляем, когда убирали Header из шаблона: это <header> в HTML-структуре.

• Мы знали, какое CSS-свойство менять для цвета кнопки: background-color.

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

Если бы вы не прошли базу HTML/CSS, вы бы тоже справились — но действовали бы наугад. «Нажму сюда, посмотрю, что выйдет». База превращает метод тыка в осознанную сборку.

Что дальше

Лендинг опубликован, но работа не закончена. В следующих материалах рубрики «Кейсы»:

• «Ускоряем WordPress: кэш, изображения, CDN» — почему ваш лендинг грузится 4 секунды и как сделать 1.5.

• «SEO для лендинга: что настроить в первую очередь» — мета-теги, sitemap, индексация.

• «A/B-тест заголовка: как менять лендинг на основе данных» — без гаданий.

Подписывайтесь, чтобы не пропустить.

Собрали свой первый лендинг? Поделитесь ссылкой в комментариях — посмотрим вместе.