Лендинг авторских туров по Дагестану на WordPress
У проекта авторских туров уже был лендинг, собранный в онлайн-конструкторе. Мы пересобрали его на WordPress и сверили с оригиналом по замерам: девять экранов на тех же местах и в тех же размерах. Заказчик теперь может править сайт в админке, а форма отправляет заявки на почту и в Telegram.
Задача
Лендинг состоял из девяти экранов: первый экран, гиды, маршрут тура, даты, дополнительные впечатления, галерея, отзывы, вопросы и форма. Его нужно было перенести на собственный хостинг и домен заказчика.
Условий было три. Внешний вид остаётся как в макете. При открытии сайт больше не обращается к конструктору. Тексты, фото, цены по дням и даты заездов меняются в админке без программиста.
Как подходили
Код из конструктора импортировать не стали и написали свою тему WordPress по макету. Так вся вёрстка, скорость и форма остаются в руках у заказчика и его подрядчиков.
Каждый экран сделали отдельным блоком редактора Gutenberg. В панели блока настраиваются тексты, картинки, карточки, цены, вопросы, фон и видимость. Порядок экранов меняется штатными средствами WordPress, меню правится в обычном редакторе меню.
Совпадение с макетом проверяли замерами. Открывали оригинал и новый сайт в одинаковых окнах 1440 и 390 px и сравнивали размеры заголовков, кнопок, формы и фото гидов. На компьютере высоты всех девяти секций разошлись меньше чем на 0,1 px.
Ход работы
Вёрстка по макету
Девять экранов, шрифты Oswald и Manrope хранятся локально, фото и логотип взяты из проекта заказчика. На телефоне ленты листаются пальцем, поля формы крупные, чтобы браузер не приближал страницу при вводе.
Интерфейс тура
Переключатель на 3, 4 и 5 дней меняет цену. Два независимых слайдера гидов. Кнопка месяца открывает окно с заездами, выбранная дата сама попадает в заявку.
Форма заявки
Заявка сначала пишется в закрытый журнал, потом уходит на почту и в Telegram. Неудачное уведомление отправляется повторно, повтор того же запроса не создаёт дубль. От спама стоят скрытое поле, проверка источника запроса и ограничение частоты.
Перенос
Сайт переехал на хостинг заказчика с HTTPS и отдельным почтовым ящиком домена. Для фоновых задач настроили серверный запуск каждые пять минут вместо запуска при открытии страницы.
Скорость
Главная для обычных посетителей отдаётся готовым HTML в обход PHP и базы. Заметили, что фото первого экрана в формате AVIF шло через медленный путь сервера и без кэша, поэтому заменили его на WebP весом около 180 КБ.
Проверка
Прогнали сайт в движках Chrome, Firefox и Safari на ширинах от 320 до 1905 px. Настоящую заявку отправили с телефона и прочитали её в почте и в Telegram. Сделали резервную копию и проверили восстановление базы.
Что сделали
- своя тема WordPress по готовому макету
- 9 экранов, каждый редактируется отдельным блоком
- окно дат с передачей заезда в форму
- вертикальные видеокарточки 9:16 в блоке впечатлений: ролик загружается только по нажатию
- журнал заявок, письмо и Telegram-бот
- страницы условий бронирования, политики и согласия
- Метрика подключается номером счётчика и запускается после согласия посетителя
- готовый HTML для главной и серверный планировщик задач
- резервная копия с проверкой восстановления
Результат
Лендинг открывается на домене заказчика, при загрузке обращений к конструктору нет. Заказчик получил свою учётную запись в админке и может менять содержимое без нас.
Сравнение с оригиналом собрали в документ из 18 пар скриншотов: все девять секций на двух ширинах. Совпали 14 измеряемых параметров на компьютере и столько же на телефоне.
PageSpeed 22 октября дал 100 баллов на телефоне и 100 на компьютере. LCP составил 1,4 и 0,7 секунды, Speed Index на телефоне снизился с 12,4 до 1,7 секунды. Это лабораторный замер Google.
- 9экранов редактируются отдельными блоками
- 14 из 14параметров совпали с макетом на 1440 и 390 px
- 100 / 100PageSpeed, телефон и компьютер, 22.10.2026
- 12,4 → 1,7 сSpeed Index на телефоне, до и после
- 1,4 сLCP на телефоне, 22.10.2026
Нужно похожее?
Опишите задачу в форме или напишите в Telegram.