Настройка и кастомизация сайта на 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) или собственный endpoint, который парсит 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 генерирует relative heavy HTML с встроенными стилями и скриптами. Для улучшения метрик:
- изображения — WebP через встроенный конвертер Tilda или внешний CDN
- «Ленивая загрузка» изображений — включить в настройках каждого блока с изображениями
- Отключить анимации блоков (появление при скролле) — влияют на LCP
- Сторонние скрипты (чаты, пиксели) — подключать в
<body>через настройки, не в<head>
Типичные сроки
Настройка существующего сайта (домен, SEO, аналитика, формы с email-уведомлениями) — 1 рабочий день. Полная кастомизация (дизайн через CSS, формы с CRM, аналитика с событиями, мобильная адаптация нестандартных блоков) — 3–5 рабочих дней.