Tilda Website Setup and Customization
Setting up a Tilda website is working within the platform's ecosystem: connecting a domain, configuring SEO, customizing design through block settings and CSS injections, setting up forms with integrations, connecting analytics. Most tasks are solved without code; complex customizations are done through Zero Block or custom CSS.
Connecting a Domain
DNS settings depend on the domain provider. Standard configuration:
A @ → 178.248.236.5
CNAME www → sites.tilda.ws
If the provider does not support CNAME on naked domain — configure only the www version with redirect @ → www via DNS Forwarding or in Tilda settings.
Google Search Console verification — via TXT record:
TXT @ → google-site-verification=XXXXXXXXXXXX
After binding domain in Tilda: Project Settings → Domain → specify domain → click "Bind". SSL automatically.
Design Customization
Typography and project colors — Site Settings → Fonts and Colors. Here you set a basic font pair (Google Fonts, Adobe Fonts, or system) and a color palette of 6-8 colors. All standard blocks use these settings.
CSS injections — the most common customization method beyond editor settings:
Site Settings → "More" → HTML code in <head> or <body>:
<style>
/* Custom styles on top of Tilda */
.t-btn {
border-radius: 4px !important;
letter-spacing: 0.04em !important;
text-transform: none !important;
}
/* Navigation override */
.t-menu__link {
font-weight: 500 !important;
font-size: 15px !important;
}
/* Custom card 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;
}
/* Hide elements not needed on desktop */
@media (min-width: 960px) {
.mobile-only {
display: none !important;
}
}
</style>
Important: Tilda may change CSS classes during updates. Excessive use of !important is a forced practice for overriding built-in styles. For reliable customizations — use Zero Block.
Custom fonts — if not available in 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>
Forms and Integration Setup
Email notifications. In the form editor → "Configure Form" → Notifications:
- To manager's email — letter subject, recipient list
- Auto-reply to client — confirmation email (template configuration)
AmoCRM / Bitrix24: Form settings → Integrations → select CRM → specify domain and API key → map form fields to CRM fields.
Telegram notification:
Form → Integrations → Webhook. URL format:
https://api.telegram.org/bot{TOKEN}/sendMessage?chat_id={CHAT_ID}&text={FORMATTED_TEXT}
More convenient to create an intermediate service (Make.com, n8n) or own endpoint that parses Tilda webhook and formats message for Telegram.
Google Sheets: Integrations → Google Sheets → OAuth authorization → select spreadsheet → map columns.
Webhook for custom backend: Form → Integrations → Webhook → POST to your URL. Tilda sends:
{
"formid": "form123456",
"name": "John Doe",
"email": "[email protected]",
"phone": "+1-555-123-4567",
"message": "Message",
"requestid": "req_abc123"
}
Analytics
Google Analytics 4: Project Settings → "Analytics" → Google Analytics → insert Measurement ID.
Tilda automatically sends tilda_form_submit event on successful form submission. For additional events — custom JS in page settings.
Yandex.Metrica:
Settings → "More" → HTML code in <head>:
<script>
(function(m,e,t,r,i,k,a){/* counter code */})(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: similarly — via HTML in <head>.
To track form conversions:
// In the "JavaScript" field of a specific page (Page Settings)
// Executed after page load
document.addEventListener('DOMContentLoaded', function() {
window.addEventListener('message', function(e) {
if (e.data === 'tilda_form_submitted') {
// GA4
gtag('event', 'generate_lead');
// Yandex
ym(COUNTER_ID, 'reachGoal', 'FORM_SUBMIT');
}
});
});
Mobile Adaptation
Tilda automatically adapts standard blocks. Manual settings:
- in block editor — Desktop/Mobile switch for different visibility settings
- CSS media queries in custom styles
- Zero Block — full control over mobile view
Common situation: mobile version of standard blocks is normal, but Zero Block sections require separate mobile markup.
Load Speed
Tilda generates relatively heavy HTML with embedded styles and scripts. To improve metrics:
- images — WebP via Tilda's built-in converter or external CDN
- "Lazy loading" of images — enable in settings of each block with images
- Disable block animations (appearance on scroll) — affect LCP
- Third-party scripts (chats, pixels) — connect in
<body>through settings, not in<head>
Typical Timelines
Setting up an existing website (domain, SEO, analytics, forms with email notifications) — 1 working day. Full customization (design via CSS, forms with CRM, analytics with events, mobile adaptation of non-standard blocks) — 3-5 working days.