Налаштування та кастомізація сайту на Tilda
Налаштування сайту Tilda — робота в межах екосистеми платформи: підключення домену, налаштування SEO, кастомізація дизайну через налаштування блоків та CSS-інєкції, налаштування форм з інтеграціями, підключення аналітики. Більшість завдань вирішується без коду; складні кастомізації — через Zero Block або користувацький CSS.
Підключення домену
DNS-налаштування залежать від провайдера домену. Стандартна конфігурація:
A @ → 178.248.236.5
CNAME www → sites.tilda.ws
Якщо провайдер не підтримує CNAME на naked domain — налаштувати тільки www-версію з редиректом @ → www через DNS Forwarding або в налаштуваннях Tilda.
Верифікація Google Search Console — через TXT-запис:
TXT @ → google-site-verification=XXXXXXXXXXXX
Після привязання домену в Tilda: Налаштування проекту → Домен → указати домен → натиснути «Привязати». SSL автоматично.
Кастомізація дизайну
Типографія та кольори проекту — Налаштування сайту → Шрифти та кольори. Тут задається базова пара шрифтів (Google Fonts, Adobe Fonts або системні) та кольорова палітра з 6–8 кольорів. Усі стандартні блоки використовують ці налаштування.
CSS-інєкції — найпоширеніший метод кастомізації за межами налаштувань редактора:
Налаштування сайту → «Ще» → HTML-код у <head> або <body>:
<style>
/* Користувацькі стилі поверх Tilda */
.t-btn {
border-radius: 4px !important;
letter-spacing: 0.04em !important;
text-transform: none !important;
}
/* Переопреділення навігації */
.t-menu__link {
font-weight: 500 !important;
font-size: 15px !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;
}
/* Сховати елементи, не потрібні на десктопі */
@media (min-width: 960px) {
.mobile-only {
display: none !important;
}
}
</style>
Важливо: Tilda може змінювати CSS-класи під час оновлень. Надмірне використання !important — вимушена практика для переопреділення вбудованих стилів. Для надійних кастомізацій — Zero Block.
Користувацькі шрифти — якщо не у Google Fonts:
<style>
@font-face {
font-family: 'CustomFont';
src: url('https://cdn.example.com/fonts/custom.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
body, .t-text {
font-family: 'CustomFont', -apple-system, sans-serif !important;
}
</style>
Налаштування форм та інтеграції
Email-повідомлення. У редакторі форми → «Налаштувати форму» → Повідомлення:
- На email менеджера — тема листа, список отримувачів
- Автовідповідь клієнту — лист із підтвердженням (налаштування шаблону)
AmoCRM / Bitrix24: Налаштування форми → Інтеграції → вибрати CRM → указати домен та API-ключ → зіставити поля форми з полями CRM.
Telegram-повідомлення:
Форма → Інтеграції → Webhook. URL формату:
https://api.telegram.org/bot{TOKEN}/sendMessage?chat_id={CHAT_ID}&text={ФОРМАТОВАНИЙ_ТЕКСТ}
Зручніше зробити проміжний сервіс (Make.com, n8n) або власну точку входу, яка парсить Tilda webhook та форматує повідомлення для Telegram.
Google Sheets: Інтеграції → Google Sheets → авторизація OAuth → вибір таблиці → зіставлення колонок.
Webhook для користувацького бекенду: Форма → Інтеграції → Webhook → POST на ваш URL. Tilda відправляє:
{
"formid": "form123456",
"name": "Іван Петров",
"email": "[email protected]",
"phone": "+375291234567",
"message": "Повідомлення",
"requestid": "req_abc123"
}
Аналітика
Google Analytics 4: Налаштування проекту → «Аналітика» → Google Analytics → вставити Measurement ID.
Tilda автоматично відправляє подію tilda_form_submit при успішній відправці форми. Для додаткових подій — користувацький JS у налаштуваннях сторінки.
Яндекс.Метрика:
Налаштування → «Ще» → HTML-код у <head>:
<script>
(function(m,e,t,r,i,k,a){/* код лічильника */})(window,document,'script','https://mc.yandex.ru/metrika/tag.js');
ym(COUNTER_ID, 'init', { clickmap: true, trackLinks: true, accurateTrackBounce: true });
</script>
Facebook Pixel / VK Pixel: аналогічно — через HTML у <head>.
Для відслідкування конверсій форми:
// У полі «JavaScript» конкретної сторінки (Page Settings)
// Виконується після загрузки сторінки
document.addEventListener('DOMContentLoaded', function() {
window.addEventListener('message', function(e) {
if (e.data === 'tilda_form_submitted') {
// GA4
gtag('event', 'generate_lead');
// Яндекс
ym(COUNTER_ID, 'reachGoal', 'FORM_SUBMIT');
}
});
});
Мобільна адаптація
Tilda адаптує стандартні блоки автоматично. Ручні налаштування:
- у редакторі блока — перемикач Desktop/Mobile для різних налаштувань видимості елементів
- CSS-медіа-запити у користувацьких стилях
- Zero Block — повний контроль над мобільним виглядом
Часто трапляється ситуація: мобільна версія стандартних блоків — нормальна, а Zero Block-секції потребують окремої мобільної верстки.
Швидкість завантаження
Tilda генерує відносно важкий HTML із вбудованими стилями та скриптами. Для покращення метрик:
- зображення — WebP через вбудований конвертер Tilda або зовнішній CDN
- «Ленива загрузка» зображень — увімкнути у налаштуваннях кожного блока з зображеннями
- Відключити анімації блоків (з'явлення при скролі) — впливають на LCP
- Сторонні скрипти (чати, пікселі) — підключати у
<body>через налаштування, не у<head>
Типові терміни
Налаштування існуючого сайту (домен, SEO, аналітика, форми з email-повідомленнями) — 1 робочий день. Повна кастомізація (дизайн через CSS, форми з CRM, аналітика з подіями, мобільна адаптація нестандартних блоків) — 3–5 робочих днів.