Блог дизайнера · Tilda

Восемь приёмов, которыми я пользуюсь каждый день: фон у текста в один клик, анимация без поломок, alias-блоки, библиотека блоков, видео до 5 Мб, единые якоря и быстрое перемещение в Zero Block.

Раньше подложку под текст приходилось собирать из шейпа или картинки. Сейчас выделите текст, откройте раздел Background и задайте цвет или градиент, отступы по горизонтали и вертикали, скругления.

Нужна одна подложка на несколько надписей? Объедините их в группу типа «объект» и задайте фон группе: длина подложки определится по самой длинной строке. А если нужны разные подложки у заголовка и описания, задавайте фон каждому тексту отдельно.

Подложка у текста задаётся прямо в настройках элемента

Когда в конце анимации элементы должны выстроиться в композицию, сначала соберите на полотне копии этих элементов в финальном положении — это точки прибытия. Закрепите их в панели слоёв, чтобы случайно не сдвинуть, и спокойно настраивайте анимацию. Расстояния и пропорции будут соблюдены точно.

Пример финальной композиции, к которой приходит анимация

Клиент просит удалить блок, а через неделю его же вернуть — знакомая история. Поэтому перед правками делайте копию, а ненужное скрывайте: блоки на странице, элементы в панели слоёв Zero Block.

С страницами так же: создайте папку, сделайте её архивной, снимите страницу с публикации и перенесите туда. При публикации всего сайта архивная папка пропускается. И это в дополнение к корзине блоков и страниц, которая есть в Tilda.

Ненужное скрываем, а не удаляем

Alias-блок копирует оригинал блока с другой страницы. Если на каждой странице повторяется одно и то же, например контакты, укажите ID оригинального блока в Alias-блоках на всех страницах. Правите оригинал — изменения появятся везде после публикации.

Даже код, который ссылается на ID блоков, копируется вместе с ними и заработает на новой странице.

В Alias-блоке достаточно указать ID оригинала

У каждого дизайнера есть блоки, которые он делает снова и снова. У меня это, например, контакты в две колонки: слева контакты, справа карта. Сохраняйте такие блоки в библиотеку аккаунта.

Идём дальше: соберите все такие блоки на неопубликованной донорной странице, а в новом проекте вставляйте Alias-блоки с ссылками на неё. Это экономит огромное количество времени.

Типовой блок контактов с картой — идеальный кандидат в библиотеку

Подключение блока с донорной страницы в новом проекте

В Tilda можно загружать видео до 5 Мб прямо на сайт — отличный повод оживить контент. Особенно хорошо работают оживлённые нейросетью фотографии: за небольшую плату сайт выглядит заметно живее, а клиенты от такого в восторге.

Мои фавориты для оживления — Kling 2.6 и Kling 3: самые стабильные и предсказуемые. Другие модели часто оживляют лишнее, даже когда прямо просишь этого не делать. Ролик перед загрузкой сожмите, чтобы уложиться в лимит.

Оживлённое фото на клиентском сайте

Представьте: у человека болит зуб, он попадает на страницу услуги стоматологии и хочет записаться. Отправлять его на главную или отдельную страницу контактов — плохой сценарий.

Задайте блоку контактов на всех страницах одинаковый якорь, например #contacts, а в общем хедере поставьте ссылку на него. Тогда кнопка в меню на любой странице прокрутит к контактам именно этой страницы. А сам блок сделайте Alias-блоком, чтобы править контакты в одном месте. Проверить, что все якоря работают, поможет чек-лист запуска сайта.

Самый быстрый способ точно двигать элементы — стрелки на клавиатуре. С зажатым Shift элемент сдвигается на 10 пикселей, без него — на 1. Сначала с Shift подводите элемент к нужной направляющей, а потом доводите по пикселю. Это быстрее, чем вводить координаты вручную.

Двигаем элемент к направляющей: Shift + стрелки

Что такое Alias-блок в Tilda?
Блок, который копирует оригинал с другой страницы по его ID. Правите оригинал — изменения появляются везде.

Как сделать фон у текста в Zero Block?
Выделите текст и в разделе Background задайте цвет, отступы и скругления. Для нескольких надписей — объедините их в группу-объект.

Какой размер видео можно загрузить в Tilda?
До 5 Мб. Этого достаточно для коротких цикличных роликов и оживлённых фото.

Как сделать одну кнопку «Контакты» для всех страниц?
Задайте блоку контактов одинаковый якорь на всех страницах и поставьте ссылку на него в общем хедере.

Хотите освоить Zero Block глубже? Загляните в инструкцию по Потокам 2.0 и тест нейросетей в Tilda.

Хотите делать такие сайты сами?

Базу Tilda, Zero Block и автолейаут можно освоить на моём курсе. А если времени нет — сделаю сайт за вас.