Вступ
Клієнту потрібен унікальний дизайн на Tilda, але стандартні блоки не дають потрібної гнучкості. Ми виконали понад 50 проєктів — від простих лендінгів до багатосторінкових каталогів з кастомною логікою. Типовий запит: нестандартне розташування елементів, анімації, інтеграція з CRM та аналітикою. У 80% випадків Tilda справляється, якщо правильно підібрати інструменти: CSS-ін'єкції, Zero Block або зовнішні сервіси. Один із наших проєктів — лендінг для онлайн-школи: знадобилася складна карусель відгуків на Zero Block та інтеграція з Telegram і AmoCRM. Впоралися за 3 дні, LCP покращили на 40%. У цій статті розглянемо ключові аспекти кастомізації Tilda та налаштування Tilda під ключ: від DNS до тонкого налаштування аналітики.
Підключення домену та налаштування DNS
DNS-налаштування залежать від провайдера домену. Стандартна конфігурація включає A- та CNAME-записи, а також TXT для верифікації Search Console. Для наочності наведемо типову конфігурацію:
| Тип запису | Значення | Призначення |
|---|---|---|
| A | @ → 178.248.236.5 | Прив'язка кореневого домену |
| CNAME | www → sites.tilda.ws | Прив'язка www-піддомену |
| TXT | @ → google-site-verification=XXXXXXXXXXXX | Верифікація Search Console |
Якщо провайдер не підтримує CNAME на кореневий домен — налаштовується тільки www-версія з редиректом @ → www через DNS Forwarding або в налаштуваннях Tilda. Після прив'язки домену в Tilda (Налаштування проєкту → Домен → вказати домен → «Прив'язати») SSL вмикається автоматично.
Кастомізація дизайну: CSS, шрифти та Zero Block
Типографіка та кольори проєкту задаються в Налаштуваннях сайту → Шрифти та кольори. Базова пара шрифтів (Google Fonts, Adobe Fonts або системні) та палітра з 6–8 кольорів застосовуються до всіх стандартних блоків. Для виходу за рамки редактора використовуються CSS-ін'єкції — найпоширеніший метод, що дозволяє перевизначити до 90% стандартних блоків. Zero Block забезпечує гнучкість у 3 рази вищу, ніж стандартні блоки.
Налаштування сайту → «Ще» → HTML-код у <head> або <body>:
<style>
/* Кастомні стилі поверх Tilda */
.t-btn {
border-radius: 4px !important;
letter-spacing: 0.04em !important;
}
/* Перевизначення навігації */
.t-menu__link {
font-weight: 500 !important;
}
/* Кастомний hover для карток */
.t-card {
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.t-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
/* Кастомні шрифти — приклад підключення через Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
body {
font-family: 'Montserrat', sans-serif !important;
}
</style>
Tilda може змінювати CSS-класи при оновленнях, тому !important — вимушена практика. Для надійних кастомізацій використовуйте Zero Block — повний контроль над версткою. Наприклад, кастомізація Zero Block для складного макету може зайняти від 2 до 3 робочих днів і розраховується індивідуально.
Покрокова інструкція зі зміни шрифтів через Google Fonts
- У Налаштуваннях сайту → «Ще» → HTML-код у <head>.
- Вставте посилання на шрифт:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">. - Додайте CSS:
body { font-family: 'Roboto', sans-serif !important; }. - Збережіть та оновіть сайт.
Налаштування інтеграції форм з CRM та Telegram
Email-повідомлення налаштовуються в редакторі форми: тема листа, список отримувачів, автовідповідь клієнту. Для AmoCRM та Bitrix24: Інтеграції → вибрати CRM → вказати домен та API-ключ → зіставити поля. Telegram-повідомлення простіше реалізувати через Webhook. Покрокове налаштування:
- Створіть бота в Telegram через @BotFather та отримайте токен.
- Налаштуйте в Tilda відправку форми на URL:
https://api.telegram.org/bot<TOKEN>/sendMessage. - У параметрах передайте
chat_id(ваш ID) та текст повідомлення з JSON форми.
Зручніше використовувати проміжний сервіс (Make.com, n8n) або власний endpoint, який парсить webhook Tilda та форматує повідомлення. Для Google Sheets — авторизація OAuth та зіставлення колонок. При відправці форми Tilda надсилає POST на ваш URL:
{
"formid": "form123456",
"name": "Іван Петров",
"email": "[email protected]",
"phone": "+380291234567",
"message": "Повідомлення",
"requestid": "req_abc123"
}
Як покращити Core Web Vitals на Tilda?
Tilda генерує відносно важкий HTML. Для покращення Core Web Vitals:
- зображення — WebP через вбудований конвертер або зовнішній CDN;
- «Ліниве завантаження» — увімкнути в налаштуваннях кожного блоку з зображеннями;
- вимкнути анімації появи при скролі (впливають на LCP);
- сторонні скрипти (чати, пікселі) — підключати в <body>, а не в <head>.
Оптимізація зменшує час завантаження вдвічі (з 4 до 2 секунд) і скорочує LCP на 30–50%.
Чому варто обрати кастомізацію Tilda?
Замовлення кастомізації під ключ дозволяє зекономити до 40% часу та бюджету в порівнянні з окремими послугами. Ви отримуєте комплексне рішення: від налаштування домену до інтеграції з CRM. Наприклад, один проєкт заощадив клієнту 10 000 грн на дизайні.
Порівняння рівнів кастомізації
| Параметр | Стандартне налаштування | Повна кастомізація |
|---|---|---|
| Домен | Підключення, SSL | + Редирект, www/naked |
| Дизайн | Стандартні блоки | CSS-ін'єкції, Zero Block, кастомні шрифти |
| Форми | Email-повідомлення | CRM, Telegram, Google Sheets, Webhook |
| Аналітика | GA4, Метрика | + Події, пікселі, кастомний JS |
| Швидкість | Базова оптимізація | WebP, lazy load, вимкнення анімацій |
| Терміни | 1 робочий день | 3–5 робочих днів |
| Вартість | Від 5 000 грн | Від 15 000 грн |
Типові помилки при кастомізації
- Надмірне використання
!important— при оновленні Tilda може зламати стилі. Використовуйте Zero Block для критичних елементів. - Забувають про мобільну версію Zero Block — її потрібно верстати окремо, це збільшує термін на 1–2 дні.
- Підключають скрипти в head без async/defer — це збільшує TTFB на 30–50%.
- Не налаштовані автовідповіді та сповіщення про помилки форми — клієнти втрачають ліди. Використовуйте CRM-інтеграцію.
Що входить у роботу
При замовленні кастомізації під ключ ми надаємо:
- повну документацію щодо внесених змін (стилі, скрипти, інтеграції);
- доступи до адмінки та зовнішніх сервісів;
- навчання вашого менеджера роботі з редактором;
- гарантійну підтримку 30 днів після здачі проєкту.
Приклад успішного проєкту
Для інтернет-магазину меблів ми реалізували кастомний фільтр товарів на Zero Block та інтеграцію з 1С через Webhook. Час завантаження сторінки скоротили з 5 до 2 секунд. Вартість проєкту — 25 000 грн.Наша компанія має понад 5 років досвіду роботи з Tilda, виконали більше 50 проєктів. Отримайте консультацію щодо вашого проєкту — зв'яжіться, ми підготуємо кошторис та терміни за 1–2 дні. Замовте розрахунок — зекономте час та бюджет.