Вы сделали 30 блоков, а потом клиент попросил поменять акцентный цвет. И Вы пошли по каждому блоку вручную. Или дизайнер прислал новый шрифт — и снова по кругу: заголовок, подзаголовок, текст, кнопка, мобильная версия. Знакомо? Именно так выглядит сайт на Тильде без настроенной системы глобальных стилей. Один час работы превращается в день правок, а правки плодят ошибки. В этой статье — как раз и навсегда это исправить.
🗂️ Что такое глобальные стили на Тильде и где их найти
Глобальные стили — это централизованная система оформления, которая появилась в обновлении Tilda 2025 года и кардинально изменила подход к разработке сайтов на платформе. До этого каждый блок жил своей жизнью: шрифты, цвета и кнопки задавались локально, и любое изменение требовало ручного обхода всего проекта.
Теперь всё иначе. В Тильде существуют три сущности глобальных стилей:
- Цвета — единая палитра проекта
- Типографика — стили заголовков, подзаголовков и основного текста
- Кнопки — универсальный стиль для всех CTA на сайте
Найти их просто: откройте Настройки сайта → Глобальные стили. Здесь Вы задаёте систему один раз — и она применяется ко всему проекту автоматически.
> Важно: лимит составляет 500 стилей всех типов на один проект. На практике это более чем достаточно даже для крупных корпоративных сайтов.
🎨 Цвета: как собрать палитру проекта и правильно называть стили
Первое, что нужно сделать после создания проекта, — задать цветовую палитру. Но здесь кроется ловушка, в которую попадают даже опытные разработчики: неправильное именование.
Плохо и хорошо — сравните:
Называть цвет по его визуальному значению — грубая ошибка. Через полгода клиент поменяет фирменный цвет с синего на зелёный. Если стиль называется «Синий», Вы запутаетесь сами и запутаете клиента. Если стиль называется «Акцент» — Вы просто меняете hex-код в одном месте, и сайт обновляется целиком.
Рекомендуемая базовая палитра для большинства проектов:
- Акцент — основной брендовый цвет
- Акцент тёмный — для hover-состояний
- Текст основной — для абзацев и подписей
- Текст инверсный — белый текст на тёмном фоне
- Фон — основной фон страницы
- Фон альтернативный — для секций с чередованием
- Граница — для линий, карточек, инпутов
Такая структура покрывает 90% задач типового коммерческого сайта.
✍️ Типографика: заголовки, подзаголовки, основной текст — настройка под все экраны
Типографика в глобальных стилях настраивается отдельно под каждый брейкпоинт: десктоп, планшет и мобильный. Это означает, что Вы один раз задаёте систему — и Тильда автоматически применяет нужные размеры на нужном устройстве.
Практический пример — стиль H1:
- Десктоп: 64px, жирное начертание, межстрочный интервал 1.1
- Планшет: 48px, те же параметры
- Мобильный: 36px, межстрочный интервал 1.15
Разница между десктопом и мобильным — почти вдвое. Без глобальных стилей Вам пришлось бы задавать это в каждом блоке с заголовком вручную. С глобальными стилями — один раз, и готово.
Рекомендуемый набор стилей типографики:
- H1 — главный заголовок страницы
- H2 — заголовок секции
- H3 — заголовок карточки или блока
- Body Large — крупный абзацный текст (лиды, вводные)
- Body — основной текст
- Caption — подписи, сноски, мелкий текст
При выборе шрифта убедитесь, что он подключён через Google Fonts или загружен вручную. Тильда поддерживает оба варианта, но при экспорте стилей шрифт не переносится — только размеры и параметры. Шрифт нужно подключать в каждом проекте отдельно.
🔘 Кнопки: единый стиль CTA для всего сайта
Кнопки — третья сущность глобальных стилей, и именно здесь чаще всего страдает визуальная консистентность сайта.
В разделе Кнопки Вы задаёте:
- Цвет фона (в идеале — ссылка на глобальный цвет «Акцент»)
- Цвет текста
- Радиус скругления
- Обводку (border): цвет, толщина
- Состояние hover: цвет фона, цвет текста, трансформация
Пример типовой системы кнопок:
- Primary — заливка акцентным цветом, белый текст, hover — акцент тёмный
- Secondary — прозрачный фон, обводка акцентным цветом, hover — лёгкая заливка
- Ghost — белый текст, обводка белая, для тёмных секций
Три стиля кнопок закрывают все сценарии типового лендинга или корпоративного сайта. Больше — уже избыточно.
📱 Адаптив: разные размеры типографики для десктопа и мобильного
Адаптивность на Тильде через глобальные стили работает по принципу брейкпоинтов. Для каждого стиля типографики Вы задаёте параметры на трёх уровнях — и Тильда сама переключает их в зависимости от устройства пользователя.
Что важно учитывать:
- Мобильный размер шрифта должен быть меньше десктопного примерно в 1,5–1,8 раза для заголовков
- Межстрочный интервал на мобильном — чуть больше, чем на десктопе (текст лучше читается)
- Кнопки на мобильном — full-width или минимум 44px по высоте (требование юзабилити)
Критичная ошибка — задать глобальный стиль, а потом вручную прописать размер шрифта прямо в текстовом блоке. Инлайновый стиль всегда перебивает глобальный. В результате Ваши глобальные настройки просто не работают — и Вы долго не можете понять, почему.
Решение: выделите текст в блоке, откройте настройки типографики и нажмите «Очистить». Инлайновый стиль удалится, и глобальный заработает.
📦 Экспорт и импорт стилей (.tildastyles) — как переносить настройки между проектами
Это, пожалуй, самая недооценённая функция Тильды среди тех, кто делает сайты нечасто, и настоящая киллер-фича для студий и фрилансеров с потоком проектов.
Как это работает:
- Откройте Настройки сайта → Глобальные стили
- Нажмите «Экспортировать» — скачается файл с расширением .tildastyles
- В новом проекте зайдите в те же настройки и нажмите «Импортировать»
- Выберите сохранённый файл — все цвета, типографика и кнопки применятся автоматически
Что это даёт на практике: однажды Вы создаёте эталонную систему стилей под свой типовой проект — и тиражируете её на каждый новый сайт за минуту. Не нужно каждый раз заново прописывать шрифты и подбирать палитру.
В студии U11.ru у нас есть несколько готовых .tildastyles-шаблонов под разные типы бизнеса: e-commerce, B2B услуги, медицина, строительство. Это экономит время и обеспечивает единый уровень качества на каждом проекте.
⚠️ Частые ошибки при работе с глобальными стилями
За более чем 250 проектов на Тильде я видел одни и те же ошибки. Вот самые критичные:
- Инлайновые стили забивают глобальные. Разработчик настроил глобальную типографику, но в каждом блоке вручную прописал размер шрифта. Глобальные стили не работают, сайт ведёт себя непредсказуемо при правках. Решение: всегда проверяйте блок на инлайновые override'ы и очищайте их.
- Цвета называют по внешнему виду, а не по функции. «Синий», «Тёмно-серый», «Почти белый» — через три месяца никто не понимает, что есть что. Называйте функционально: «Акцент», «Текст основной», «Фон».
- Не настраивают мобильные брейкпоинты в типографике. Десктопный H1 на 64px на мобильном выглядит либо огромным (если Тильда масштабирует буквально), либо разработчик замечает проблему слишком поздно — уже после сдачи проекта.
- Создают слишком много стилей кнопок. «Primary», «Primary Large», «Primary Small», «Primary Alt», «Primary Alt Hover»... В итоге система теряет смысл. Трёх стилей кнопок достаточно для любого коммерческого сайта.
💼 Почему это важно для заказчика: правки за 2 клика вместо 2 часов
Если Вы заказчик, а не разработчик — Вам не обязательно знать технические детали. Но важно понимать одно: сайт без глобальных стилей — это дорогие правки.
Хотите поменять акцентный цвет? Без глобальных стилей — это ручная работа по каждому блоку, риск пропустить элементы и получить визуально сломанный сайт. С глобальными стилями — два клика, один hex-код, сайт обновлён.
Хотите подключить новый шрифт или изменить размеры заголовков под новый брендбук? Та же история.
Профессиональный разработчик на Тильде всегда настраивает глобальные стили с первого блока — это не опция, это стандарт. Именно так работает команда U11.ru на каждом проекте: сначала система, потом контент.
Сайт, построенный на глобальных стилях, управляем. Его можно передать другому подрядчику, масштабировать, обновить визуальный стиль без переделки с нуля. Это и есть разница между «сделали сайт» и «создали рабочий инструмент».
🚀 Закажите разработку сайта на Тильде у профессионала
Если Вы хотите сайт, который будет работать как система, а не как набор случайных блоков — обращайтесь.
Майоров Сергей Геннадьевич, Senior-маркетолог и Senior-разработчик, веб-студия U11.ru.
250+ реализованных проектов на Тильде. Работаю с малым и средним бизнесом по всей России.
Стоимость разработки:
- Лендинг — от 35 000 руб.
- Корпоративный сайт — от 60 000 руб.
- Интернет-магазин — от 65 000 руб.
Каждый проект включает настройку глобальных стилей, адаптив под все устройства и сдачу с документацией по управлению сайтом.
👉 Оставьте заявку на сайте u11.ru — расскажу о Вашем проекте подробнее, оценю задачу и предложу оптимальное решение.
