Корпоративний сайт · WordPress · 2024

ЖК «Новий Хотів» — каталог квартир і квіз-воронка для забудовника під Києвом

WordPress-каталог квартир із власним CPT-роутингом, інтерактивним 3D-планом комплексу і окремим субдоменом-квізом на adsquiz.io для конверсії з Facebook/Google-реклами.

WordPress

Хочу такий самий проект Відкрити сайт

«Новий Хотів» — житловий комплекс комфорт-класу з 10-ти семиповерхових будинків у селі Хотів за 15 хвилин від метро Теремки. Сайт novyhotiv.com.ua працює як продаж-машина для забудовника на стадії 1–3 черг: верх воронки забирає реклама в Instagram/Facebook і Google, а основне завдання сайту — провести покупця квартири від «де це знаходиться?» до конкретного планування на конкретному поверсі конкретної черги. Архітектура побудована не на класичній корпоративній моделі «головна → послуги → про нас → контакти», а на двох незалежних шарах: інформаційний WordPress-сайт із картотекою квартир і конверсійний субдомен l.novyhotiv.com.ua з адаптивним квізом, на який ведуть всі CTA-кнопки в шапці і кожен «дізнатися ціну».

Головна ЖК Новий Хотів — top-swiper з 6 розділів і блок «Запрошуємо на перегляд» — Один екран головної — це не маркетинговий heading-message «купуй у нас», а навігаційний індекс: верхній swiper із 6 слайдів (Розташування, Переваги, Контакти і дублі) видає кожен розділ окремою карткою з власною кнопкою «Перейти у розділ», нижче — блок «Новий Хотів» з лідом і чотирма анкорними посиланнями (Розташування / Переваги / Документи / Хід будівництва), далі секція 3D-плану, новини й «Запрошуємо на перегляд». Це сайт-каталог, а не лендинг: користувач не скролить-читає-конвертиться, а тапає одразу в потрібний підрозділ, як у мобільному додатку.

Інтерактивний 3D-план комплексу — core-механіка вибору черги

Центральна секція головної — інтерактивний рендер забудови з 9 чергами, де 1–3 (продаються зараз) виділені кольоровим маркером і клікабельні, а 4–9 затемнені й підписані «Майбутні черги забудови». Над планом — три кнопки-табів «1 черга / 2 черга / 3 черга» і пояснення «Оберіть чергу будівництва на плані комплексу або скористайтесь кнопками нижче». Це key-decision-блок: до того як показати квартири, сайт змушує клієнта вибрати будинок, бо ціна, поверховість, статус готовності й планування для будинку №1 (фінальна стадія) і будинку №3 (третя черга, ще в будівництві) відрізняються радикально.

3D-план ЖК Новий Хотів — клікабельні мітки 1/2/3/4 черги і затемнена область майбутніх черг 5–9 — Маркери черг — це не статична інфографіка, а гібрид image-map і Swiper: однаково реагують і кліки по самому рендеру, і таби над ним, і обидва ведуть на `/apartments/building/budynok-N/`. «Майбутні черги забудови (5,6,7,8,9)» лівим блоком позначені прозоро-зеленим — забудовник свідомо тримає в полі зору довгу перспективу проекту, навіть якщо у продажу ще нічого з них немає. Для покупця, який купує не «квартиру», а «квартал», ця перспектива важлива: він бачить, що поряд з його будинком за 2 роки буде сформоване ціле подвір’я з шкільним майданчиком і футбольним полем, а не порожнє поле з мрією забудовника.

Сайт-каталог — апартамент-фінд на власному CPT, а не на сторонніх плагінах

Замість плагіна на кшталт WP Real Estate, OpenAgent чи Estatik забудовник реалізував планування як повноцінний WordPress CPT із кастомними URL-роутами. Кожен будинок — окрема архівна сторінка /apartments/building/budynok-1/ з фільтром по кімнатах (Усі / 2-к / 3-к / 5-к / Комерційні) і перемикачем на сусідні будинки (Буд 1 / Буд 2 / Буд 3). Категорії кімнат — це фактично окрема таксономія: фільтри ведуть не на JS-перегрупування, а на власну URL /apartments/building/budynok-1/rooms/3-k/, що індексується пошуковиками й дає кожній комбінації «будинок × кімнатність» свою посадкову. Це SEO-обдумане рішення: запит «3-кімнатна квартира хотів» приземляється не на загальну головну, а одразу на список саме 3-кімнатних у потрібному будинку.

Архівна сторінка планувань Будинок №1 — 6 карток квартир з планами, м², секцією й поверхом — Кожна картка показує мініатюру плану (це і є основний product-shot — не рендер інтер’єру, не фото з підлоги, а сам план), площу, № будинку, номер секції (С1/С3/С6) і поверхи. Карточка квартири — це готовий артефакт для рішення «дивитися чи ні»: інженер-покупець уже за планом розуміє, чи влаштовує його зонування, не відкриваючи деталі. Жодних цін у списку немає — це свідоме рішення: ціна показується тільки після квіза з контактом, що працює як soft paywall (хочеш ціну — лиши номер).

Сторінка квартири — план + експлікація + дві колонки замість лендингу

Single-сторінка планування — це гібрид між технічним паспортом і selling-сторінкою. Зліва — слайдер на 3 види (Схема квартири / План поверху / На плані ЖК) з мініатюрами-табами під ним і нумерована експлікація приміщень із площами (1. Хол 14,77 м² / 2. Житлова кімната 17,49 м² / … / 9. Лоджія 0,65 м²). Справа — H1 з кімнатністю і площею, рядок «Будинок 1 | Секція С6 | Поверх 3-5», велика темно-зелена кнопка «ДІЗНАТИСЯ ЦІНУ» (веде на квіз), таблиця-картка з 7 полями (номер №38, площа 84,0 м², кількість кімнат, будинок, секція, поверх, стан «без ремонту») і прямий телефон зі стрингом «Для детальнішої інформації телефонуйте за номером».

Сторінка квартири 3-кімнатна 84,0 м² — план із номерованою експлікацією і права картка з характеристиками — Експлікація приміщень із точністю до сотих квадратного метра (4,52 м² санвузла, 0,65 м² лоджії) — це сигнал серйозності для покупця, який звик до інвестпаспортів. Праворуч від плану — спарка з кнопкою-CTA «дізнатися ціну» зверху й таблицею характеристик внизу: рішення відмовитись писати ціну прямо змушує покупця *зробити крок до квіза*, але одночасно вся технічна інформація (поверх, секція, стан) — публічна, тож сторінка індексується по запитах «3-кімнатна квартира 84 м² хотів» без приховування за лід-формою. Поле «стан: без ремонту» — типове для українського ринку, де ремонт від забудовника окремо обговорюється і не входить у базову вартість.

Дві воронки для двох типів покупців — інформаційна на сайті й квіз-конверсія на субдомені

Кнопки «Замовити дзвінок» у шапці й кожна «дізнатися ціну» на сторінках планування ведуть не на on-site форму, а на окремий субдомен l.novyhotiv.com.ua/question-1 з адаптивним багатокроковим квізом, побудованим на SaaS-платформі adsquiz.io (це видно з title тегу «Made by – adsquiz.io» і завантаження ресурсів з static.adsquiz.io). Перший крок: «Який тип нерухомості Вас цікавить?» з трьома варіантами — Квартири у готових будинках 🔑 / Квартири на етапі будівництва 🏗️ / Комерційні приміщення 💼. Далі квіз веде через серію питань (тип квартири, кімнатність, бюджет, спосіб оплати) і завершується формою-контактом.

Перший крок квіза на l.novyhotiv.com.ua — Який тип нерухомості Вас цікавить? — Винесення квіза на окремий субдомен — це не випадковий хост-сетап, а свідома сегментація аналітики й трекінгу. На `l.`-сабдомені налаштована окрема стрічка подій GA4 з `event_label: 'Start'` на старті, події `adsquiz_Start`, `adsquiz_Step_N` і `adsquiz_Submit` в категорії `adsquiz` — це формує самостійну воронку, незалежну від сесій основного сайту. Темна вугільно-зелена палітра квіза замість зеленої-світлої головної — ще один сигнал «це окрема поверхня, не продовження каталогу»: користувач психологічно перемикається з «дивлюся і вирішую» в «відповідаю».

Внутрішні розділи — не one-pager з якорями, а окремі сторінки під кожен інформаційний блок

Замість поширеного у житловій сфері паттерна «вся інформація на головній на якорях» (Hero → Розташування → Переваги → Планування → Контакти на скролі) тут кожен розділ зроблено окремою сторінкою: /about/, /location/, /perevagy/, /news/, /news/hid-budivnycztva/, /documents/, /gallery/, /contacts/. Це дає 8 самостійних URL під SEO замість одного, плюс кожна сторінка — індексована точка входу для Google Ads-кампаній під своїм запитом («розташування жк», «документи забудовника», «ход будівництва хотів»).

Сторінка /about/ — три анкорні блоки Переваги/Розташування/Планування і довгий список технічних характеристик — «Про ЖК» — це не маркетингова сторінка-візитка, а «довгий читач»: візуалка з фасадом + лід + три перехідних блоки до сусідніх розділів + параграф про 10 семиповерхових будинків + список «Технічні характеристики та комплектація» на 11 пунктів (висота стелі 2.7 м, перекриття 180 мм залізобетон, цегла з мінватою/пінопластом, 5-камерні металопластикові вікна, лічильники газу/води/електрики) + список «Розвинена інфраструктура» з 16 пунктів від «зупинки маршрутки» й «метро Теремки за 15 хв» до конкретних ТРЦ («Магелан», «Республіка», «Мегамаркет»), фітнес-клубів («Sportlife», «Body Life»), лікарень («Добробут», «Феофанія»), садочків і шкіл. Це не «імідж-сторінка», а фактично замовнику-покупцю готовий чеклист «чи задовольняє локація мої побутові вимоги».

Розташування — кількісно, з картою Google Maps і маршрутом замість статичного скріншоту

Сторінка /location/ побудована навколо чотирьох квантифікованих відстаней: 15 хвилин на авто до метро Теремки (6 км), 4 км до парку Феофанія, 18 км до центру Києва (6 км — очевидно з дублюванням розрахунку), 2 хвилини до зупинки громадського транспорту (100 м). Кожен рядок візуалізує іконка транспортного засобу (авто, автобус) і шкала-лінія, що пропорційно показує відстань. Праворуч — вмонтована Google Maps з прокладеним маршрутом від ЖК до метро Теремки і таймером «12 хв / 7,9 км» прямо на карті.

Сторінка Розташування — 4 квантифіковані відстані ліворуч і Google Maps з маршрутом до метро праворуч — «18 км до центру Києва, 6 км шкала» поряд із «15 хвилин до метро Теремки» — це ключовий конверсійний месседж усього проекту: продається не «село за Києвом», а «передмістя з реальним 15-хвилинним доступом до метро». Карта з прокладеним маршрутом — це не декоративне map embed, а саме доказ часу в дорозі: користувач бачить «12 хв / 7,9 км» по конкретних дорогах, а не маркетингове «15 хвилин від столиці». Для покупця передмістя Києва це найважливіше число у всьому сайті — воно вирішує питання «житиму я з родиною в передмісті чи це далеко?».

Переваги — нумерований список з фото, а не дашборд з іконками

Сторінка /perevagy/ — це не сітка 3×3 з картковими benefit-карточками й іконками, як зазвичай у житлових ЖК, а довгий перелік на 5 пунктів, кожен з власним великим фото і параграфом тексту. 1. Екологія (фото родини на лісовій стежці) → 2. Транспортна доступність (фото станції метро Теремки з потягом) → 3. Архітектура (фото готових фасадів) → 4. Високий рівень якості будівництва (фото будмайданчика з краном) → 5. Поруч з парками та озерами (фото пагоди в парку Феофанія).

Сторінка Переваги — 5 нумерованих пунктів з великими фото і параграфами тексту, акцентний банер «5 переваг» — Чергування фото-зліва / текст-зліва на парних і непарних пунктах — це класичний редакційний паттерн magazine-layout. Кожен пункт — це самостійна mini-секція з власною фотографією-доказом: для пункту «Транспортна доступність» — реальне фото платформи метро Теремки з потягом, а не іконка автобусу; для «Архітектура» — фото вже побудованих будинків з ландшафтом, а не render із PowerPoint. Емодзі 🌿 і 🌳 у тексті — низькокоштовний спосіб додати візуальний акцент без виклику ілюстратора, який працює саме для українського ринку житлової реклами, де емодзі в комерційному контенті прийнятна норма.

Хід будівництва — щомісячні звіти як інструмент довіри

Окремий розділ /news/hid-budivnycztva/ містить 13+ статей-звітів, опублікованих з періодичністю приблизно раз на місяць: «Звіт щодо динаміки будівництва 1 та 2 черги за січень — лютий 2026 року» (16.03.2026), «… 3 черги за лютий 2026» (16.03.2026), «… 3 черги за жовтень 2025» (11.11.2025), і так далі вглиб з пагінацією на 2 сторінки. Кожна стаття має дату публікації, обкладинку з фото будмайданчика й заголовок, що чітко вказує номер черги і місяць.

Сторінка Хід будівництва — 8 карток із щомісячними звітами, дати від 16.03.2026 до 01.08.2025, пагінація на 2 сторінки — Регулярні звіти про будівництво — це *обовʼязковий гігієнічний жанр* для будь-якого українського забудовника після 2014 року: ринок пам’ятає «Аркаду» і «Укрбуд», і покупець новобудови за замовчуванням не довіряє забудовнику без публічних звітів. «16.03.2026 — звіт за лютий 2026» — це не маркетинговий пост-релізник, а демонстрація операційної дисципліни: 16-те число наступного місяця, точність до однієї-двох черг, окремо «1+2 черги» і «3 черга», бо у них різні підрядники й різний темп. Розділ свідомо винесений у меню верхнього рівня (поряд із «Новини»), а не схований у footer — для українського ринку «де подивитися, як просувається будівництво» — це key-evidence сторінка, без якої контракт не підписується.

Галерея — Swiper з 11+11 слайдів, 3D-візуалізації окремо від фото

Сторінка /gallery/ містить два незалежні Swiper-карусели: верхній — 11 слайдів 3D-візуалізацій (рендери будинків, подвір’я, фасадів), нижній під підзаголовком «Фотографії» — 11 слайдів реальних фото вже побудованих секцій і благоустроєного подвір’я. Розділення на «3D» і «фото» — концептуально важливе: покупець бачить, що рендер відповідає реальності, і одночасно розуміє, що для майбутніх черг доступні поки тільки візуалізації. Фотографії й рендери відкриваються через jQuery Fancybox (3.5.7) у лайтбоксі — це стандартна для українського WordPress-ринку фічa, яку забудовник навіть не пробує замінювати на сучасний lightbox-компонент.

Контакти — мінімалістична сторінка, бо квіз вже забрав весь конверсійний навантажений

Сторінка /contacts/ навмисно зведена до мінімуму: один блок з адресою (Київська область, село Хотів, вулиця Шевченка, 85), графіком (10:00–19:00 щодня), телефоном (+38 067 288-88-08), email novyhotiv.sales@gmail.com, кнопкою «Відкрити Google Maps» і вмонтованою картою. Жодних форм зворотного звʼязку, жодних «менеджерів з фото», жодних окремих відділів — лише адресні дані відділу реєстрації.

Сторінка Контакти — адресний блок і вмонтована Google Maps з маршрутом — Email на gmail.com (`novyhotiv.sales@gmail.com`) замість корпоративного `@novyhotiv.com.ua` — це типовий вибір середнього українського забудовника комфорт-класу: gmail дає працюючу пошту без налаштування MX/SPF на власному домені, нативну інтеграцію з CRM в Google Workspace і не вимагає сисадміна. Для регіонального ЖК це нормальна практика — у юридичних документах фігурує юрособа з власним поштовим зверненням, а на сайті працює відомий покупцям gmail. Один контакт-номер +38 (067) 288-88-08 на всі точки (шапка, footer, секція «Запрошуємо на перегляд», кожна сторінка планування) — рішення на користь єдиної вхідної точки до відділу продажів, без розгалуження на «техпідтримку / претензії / партнерство».

Технічна реалізація — стек, інструменти, інфраструктура

WordPress 7.0 з кастомною темою novyhotivwp — без Elementor, без WPBakery, без Bricks. Чиста кастомна тема з власними шаблонами архіву і single для CPT квартир, власним рендером 3D-плану і власною логікою фільтрів. На сайті працює jQuery 3.7.1 + jquery-migrate 3.4.1; кастомні скрипти зібрані в одному script.js в темі.
Swiper для всього, що карусель — top-swiper на головній (6 розділів), Swiper для двох галерей на /gallery/ (3D і фото), Swiper для трьох видів плану на сторінці квартири. Swiper-bundle підключений як один файл і використовується для всіх ритмів сайту, без множинних бібліотек слайдерів.
Fancybox 3.5.7 для лайтбоксів — підключається з CDN jsdelivr, відкриває рендери з галереї й плани квартир у модальному вікні з навігацією next/prev і lazy-зумом.
Окремий субдомен l.novyhotiv.com.ua для квіза на adsquiz.io — це не SPA на тому самому домені, а повністю окрема SaaS-сторінка, що підвантажує JS-бандл з l.novyhotiv.com.ua/assets/index.js і ресурси з static.adsquiz.io. Шапка основного сайту хардкодить посилання на квіз у атрибут href кнопок «Замовити дзвінок», тому квіз — єдина точка приземлення для всіх off-site CTA.
Google Tag Manager + GA4 (G-CN99Y3XYLG, GTM-PLTLWSRZ) + Facebook Pixel (1268696721712590) — повний трекінг-стек з окремими дублями на основному сайті й на квіз-субдомені. На квіз-стороні налаштовані події adsquiz_Start, adsquiz_Step_N, adsquiz_Submit у власній GA4-категорії adsquiz, що дозволяє в GA-репортах рахувати воронку «крок 1 → крок N → заявка» окремо від загального трафіку сайту.
Структура URL для апартамент-каталога — це власні rewrite-правила, а не CPT-defaults: /apartments/building/budynok-N/ для архіву будинку, /apartments/building/budynok-N/rooms/X-k/ для фільтра кімнатності, /apartments/3-kimnatna-kvartyra-84m/ для конкретної квартири. Це означає окрему таксономію building з трьома термами (Буд 1 / 2 / 3) і таксономію rooms з вкладеними значеннями (Усі, 2-к, 3-к, 5-к, Комерційні), плюс post type apartment з прямим slug-роутом без префікса /apartments/apartment/.
Інтерактивний 3D-план будинку — реалізований як SVG-overlay поверх PNG-рендера, де клікабельні зони відповідають окремим чергам, а таби «1 черга / 2 черга / 3 черга» дублюють ту саму навігацію стандартними кнопками. Жодного three.js, WebGL чи real-time 3D — це 2D image-map з overlay-маркерами, що дешевше у підтримці й однаково добре працює на мобільному.
Google Maps embed із прокладеним маршрутом — карта на /location/ і /contacts/ вмонтована не як простий iframe-pin, а з готовим маршрутом від точки А (метро Теремки) до точки Б (ЖК), включно з тайм-плашкою «12 хв / 7,9 км». Це налаштовується в Google Maps Embed API через параметри origin/destination і дає user-facing доказ ще до того, як користувач сам відкриє Google Maps.
Хости й соцмережі — стандартний український setup: основний сайт і lead-субдомен на одному провайдері (одні і ті ж SSL, спільний Cloudflare DNS), Instagram @novyhotiv.com.ua і Facebook /novyhotiv.com.ua/ — на них спрямований footer-соц-блок без зайвих каналів (немає TikTok, YouTube, Telegram-каналу, Viber-бота).

Підсумок

«Новий Хотів» — кейс сайту-каталога для забудовника середнього масштабу, де ключове архітектурне рішення прийняте не на рівні дизайну, а на рівні розділення двох воронок: інформаційна (WordPress-каталог квартир із власною таксономією будинків і кімнатностей під SEO) і конверсійна (квіз на окремому субдомені l. з власною подієвою аналітикою). Сайт уникає двох типових пасток українського ринку житлової реклами: він не намагається бути one-page лендингом з усіма блоками на головній (натомість виносить кожен розділ у власну індексовану сторінку), і не намагається продавати квартиру одним сильним «купити зараз» — натомість акуратно проводить покупця через інтерактивний 3D-план до конкретного планування, де ціна свідомо схована за квізом як soft-paywall.

Сильні рішення: інтерактивний SVG-overlay поверх PNG-плану замість дорогого WebGL-варіанту, регулярні щомісячні звіти про хід будівництва як обов’язковий гігієнічний жанр довіри, експлікація квартир до сотих кв.м., квантифіковані відстані з реальним Google Maps-маршрутом, окремий хост lead-сабдомена з повним GA4-трекінгом воронки. Слабкі точки, типові для українського ЖК-сегмента: gmail-пошта для відділу продажів замість корпоративного домену, відсутність українсько-англійського перемикача для іноземних інвесторів (хоча для рідного цільового сегмента — київських покупців комфорт-класу — це не обмеження), залежність від SaaS-квіза adsquiz.io замість власної форми (трейд-офф «швидкий запуск кампаній» проти «повний контроль над лід-даними»). Загалом сайт виконує єдину чітко поставлену задачу — провести трафік з Facebook/Google-реклами до запиту ціни на конкретну квартиру — і виконує її без зайвої складності.