Вступление
Клиенту нужен уникальный дизайн на Tilda, но стандартные блоки не дают нужной гибкости. Мы выполнили более 50 проектов — от простых лендингов до многостраничных каталогов с кастомной логикой. Типичный запрос: нестандартное расположение элементов, анимации, интеграция с CRM и аналитикой. В 80% случаев Tilda справляется, если правильно подобрать инструменты: CSS-инъекции, Zero Block или внешние сервисы. Один из наших проектов — лендинг для онлайн-школы: потребовалась сложная карусель отзывов на Zero Block и интеграция с Telegram и AmoCRM. Справились за 3 дня, LCP улучшили на 40%. В этой статье разберём ключевые технические моменты: от 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% стандартных блоков.
Настройки сайта → «Ещё» → 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; } /* Кастомные шрифты */ @font-face { font-family: 'CustomFont'; src: url('https://cdn.example.com/fonts/custom.woff2') format('woff2'); font-display: swap; } body { font-family: 'CustomFont', -apple-system, sans-serif !important; } </style> Tilda может менять CSS-классы при обновлениях, поэтому !important — вынужденная практика. Для надёжных кастомизаций используйте Zero Block — полный контроль над вёрсткой. Например, кастомизация Zero Block для сложного макета может занять от 2 до 3 рабочих дней и рассчитывается индивидуально.
Как настроить интеграцию форм с 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": "+375291234567", "message": "Сообщение", "requestid": "req_abc123" } Какие метрики скорости важны для Tilda и как их улучшить?
Tilda генерирует относительно тяжёлый HTML. Для улучшения Core Web Vitals:
- изображения — WebP через встроенный конвертер или внешний CDN;
- «Ленивая загрузка» — включить в настройках каждого блока с изображениями;
- отключить анимации появления при скролле (влияют на LCP);
- сторонние скрипты (чаты, пиксели) — подключать в
<body>, а не в<head>.
Для отслеживания конверсий используйте Яндекс.Метрику, GA4 или пиксели через HTML-код в head. Пример установки Метрики:
(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 }); Типичное время загрузки до оптимизации — 4 секунды, после — 2 секунды. Правильная настройка сокращает LCP на 30–50%.
Сравнение уровней кастомизации
| Параметр | Стандартная настройка | Полная кастомизация |
|---|---|---|
| Домен | Подключение, SSL | + Редирект, www/naked |
| Дизайн | Стандартные блоки | CSS-инъекции, Zero Block, кастомные шрифты |
| Формы | Email-уведомления | CRM, Telegram, Google Sheets, Webhook |
| Аналитика | GA4, Метрика | + События, пиксели, кастомный JS |
| Скорость | Базовая оптимизация | WebP, lazy load, отключение анимаций |
| Сроки | 1 рабочий день | 3–5 рабочих дней |
| Стоимость | Индивидуально | Индивидуально |
Типичные ошибки при кастомизации
- Избыточное использование !important — при обновлении Tilda может сломать стили. Используйте Zero Block для критичных элементов.
- Забывают про мобильную версию Zero Block — её нужно верстать отдельно, это увеличивает срок на 1–2 дня.
- Подключают скрипты в head без async/defer — это увеличивает TTFB на 30–50%.
- Не настроены автоответы и уведомления об ошибках формы — клиенты теряют лиды. Используйте CRM-интеграцию.
Что входит в работу
При заказе кастомизации под ключ мы предоставляем:
- полную документацию по внесённым изменениям (стили, скрипты, интеграции);
- доступы к админке и внешним сервисам;
- обучение вашего менеджера работе с редактором;
- гарантийную поддержку 30 дней после сдачи проекта.
Получите консультацию по вашему проекту — свяжитесь, мы подготовим смету и сроки за 1–2 дня. Закажите расчёт — сэкономьте время и бюджет.