Привет, это Атвинта! Делимся гайдом по возможностям Тильды от практикующего дизайнера.
«Это просто конструктор с шаблонами и ничего серьезного на нем не сделаешь!» — так обычно звучит типичное мнение о Тильде, но оно устарело. Платформа давно вышла за рамки простых лендингов и сейчас закрывает задачи, которые раньше требовали кастомной разработки. Наш эксперт — Екатерина Тимофеева — рассказала на вебинаре про новый функционал Tilda и ее технических особенностях.
Мы подготовили текстовую версию вебинара, которая будет интересна руководителям бизнеса, веб-студиям, дизайнерам, маркетологам и PR-специалистам.
Тильда — это конструктор сайтов с визуальным редактором, который позволяет создавать лендинги, корпоративные и информационные ресурсы, интернет-магазины и даже запускать онлайн-курсы. Чтобы создавать качественные проекты, нужно понимать, как устроена платформа: какие инструменты выбрать под конкретную задачу и на что обращать внимание при разработке.
В Tilda два подхода к созданию страниц — стандартные блоки и zero-блоки. От этого выбора зависит скорость работы, гибкость дизайна и удобство администрирования готового сайта.
Стандартные блоки — готовые секции с настроенной структурой. В библиотеке Тильды их более 550 штук и все они спроектированы так, чтобы сочетаться друг с другом. Платформа сама адаптирует блоки под разные экраны — не нужно отдельно прорабатывать каждый под определенное устройство. Готовые модули подходят для типовых задач — например, настройка галереи, формы и карточки товара.
Zero-блоки— свободный холст для создания уникального дизайна. Интерфейс похож на Фигму. Вы размещаете элементы на поле, двигаете их, привязываете к пикселям или процентам. Тильда изначально создавалась как платформа для дизайнеров — работа происходит в визуальном редакторе. При этом все элементы преобразуются в код, который можно дополнительно править через CSS или JavaScript.
На практике мы рекомендуем комбинировать оба подхода. Главный экран и ключевые смысловые блоки можно собрать в zero-блоках, чтобы сделать уникальный дизайн. А контентные разделы (новости или тарифы), которые вы будете часто редактировать, создавайте через стандартные блоки. Так получается и гибкость в дизайне, и удобство поддержки сайта.
В Tilda есть пять стандартных диапазонов для контрольных точек (брейкпоинтов): десктоп, планшет в горизонтальной и вертикальной ориентации, и две мобильные версии. Для стандартных блоков этого достаточно — платформа сама подстраивает отображение.
С zero-блоками чуть сложнее. Нужно задать размер каждого брейкпоинта вручную. Если пропустить промежуточные разрешения, верстка сайта будет отображаться некорректно.
«Часто замечаю, что дизайнеры не указывают размеры для планшета. Тогда при повороте телефона в горизонтальный режим страница начинает съезжать. В своей практике я делаю 7 брейкпоинтов, чтобы на всех разрешениях сайт выглядел правильно»
Екатерина Тимофеева
Заместитель дизайн-директора в Атвинте
Функции Тильды можно расширять с помощью JavaScript и CSS. Это может пригодиться для добавления сложных слайдеров, нестандартных анимаций или специфичной логики — всего, что выходит за рамки стандартного функционала платформы.
Но есть нюанс. Техподдержка Tilda отвечает только за возможности самой платформы. Если на сайте что-то сломалось, первым делом вас попросят отключить сторонний код. Для клиента, который не погружен в веб-разработку, это может стать проблемой.
При использовании кастомного кода заранее предупреждайте клиента о рисках, фиксируйте это в документации и по возможности решайте задачи встроенными инструментами Тильды.
Частый запрос от клиентов: «Нужны качественные картинки и видео, но чтобы сайт грузился за пару секунд». Это возможно, но требует работы с контентом.
Изображения нужно сжимать без потери качества и переводить в современные форматы — например, WebP. Видео тоже стоит оптимизировать перед загрузкой. Для тяжелого контента можно использовать ленивую загрузку — когда изображения подгружаются по мере прокрутки страницы. Но, например, для первого экрана ее применять не стоит. Если текст уже появился, а картинка еще грузится — страница выглядит пустой или поломанной. Для этого лучше оптимизировать изображение по весу, но загружать сразу.
Рассмотрим ключевые обновления в конструкторе.
Потоки — это отдельный интерфейс для публикации новостей, статей или анонсов событий. Контент создается в специальном редакторе — вам не нужно лезть в структуру, двигать блоки или переживать, что что-то сломается.
На странице есть базовые инструменты для оформления поста: заголовки, текст, изображения, видео, цитаты, врезки и вставка HTML-кода. Если нужна сложная верстка — можно сделать отдельный лонгрид и прикрепить на него ссылку.
Что еще умеют потоки:
«Потоки удобны для блогов. Заходишь и пишешь пост, а сайт обновляется автоматически. Можно делать черновики, настраивать SEO на каждую публикацию и указывать авторов. Советую использовать стандартное отображение страниц новостей — кастомные шаблоны могут съезжать при добавлении контента»
Екатерина Тимофеева
Заместитель дизайн-директора в Атвинте
Личный кабинет позволяет ограничить доступ к определенным страницам сайта и управлять продажами и клиентской базой.
Сценарии использования личного кабинета в Тильде:
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13470 тендеров
проведено за восемь лет работы нашего сайта.
Если на сайте есть онлайн-курс и магазин товаров — личные кабинеты можно связать. Вся информация отображается в одном профиле пользователя: купленные курсы и заказы.
Работать с личным кабинетом можно в двух режимах:
К примеру, человек покупает подписку на месяц и получает доступ к курсу, а когда срок заканчивается и он ее не продлевает — доступ закрывается. Пользователь по-прежнему может зайти в личный кабинет, но контент будет недоступен. Если у вас несколько продуктов, клиент может покупать их отдельно — в его кабинете будут отображаться все приобретенные материалы.
Личный кабинет Tilda не является LMS-системой. Внутри нет проверки домашних заданий с мгновенной обратной связью, созвонов с преподавателем внутри платформы или отслеживания прогресса. Для коммуникации с учениками понадобятся сторонние сервисы.
Если на сайте настроен сбор email-адресов, Tilda позволяет создавать письма для рассылки сразу в конструкторе.
Принцип сборки такой же, как у страницы: выбираете блоки и добавляете контент, картинки, видео, кнопки и ссылки. Для быстрого старта есть готовые шаблоны писем, но можно собрать макет с нуля из стандартных элементов.
Для отправки рассылки есть два варианта отправки:
У каждого письма есть свой веб-адрес. Его можно опубликовать как обычную страницу, разместить в разделе новостей или блоге, подключить домен, оптимизировать для поисковых систем и получать органический трафик.
Tilda Docs — это инструмент для создания документации внутри платформы. Подходит для инструкций, корпоративной вики и заметок по проекту.
«На мой взгляд, самая недооцененная функция Тильды — это документы. Я использую ее, когда передаю сайт клиенту: заполняю для него инструкцию. Так как то, что очевидно для специалиста, возможно, не совсем очевидно для заказчика. Даже если это администрирование стандартных блоков. К примеру, у Tilda есть мануал, можно вставить на него ссылку — и клиенту будет понятно, как с этим работать»
Екатерина Тимофеева
Заместитель дизайн-директора в Атвинте
Редактор Docs оформлен как раздел с потоками. Можно добавлять текст, изображения, ссылки, видео, а также оформлять заголовки и цитаты. Документы объединяются в папки и для каждой из них присваивается иконка, чтобы лучше ориентироваться в списке материалов. Также есть настройка доступа для просмотра или редактирования статьи с изучением истории изменений.
Tilda Docs можно опубликовать как отдельную страницу и передать клиенту ссылку без права редактирования. Либо разместить документацию в аккаунте клиента и передать ему полный контроль. Для дополнительной защиты — закройте базу паролем или ограничьте доступ по IP (на тарифе Business).
Разберем, для каких проектов подходит конструктор, а где оптимальнее будет выбрать кастомную разработку.
Tilda — это инструмент для проектов с понятной структурой и ярким дизайном. Платформа активно развивается и расширяет функционал для реализации нестандартных и интересных задач. Изучите возможности конструктора и выбирайте его в тех случаях, когда он действительно эффективен для вашего сайта.
Tilda — это конструктор сайтов с визуальным редактором. На платформе можно создавать лендинги, корпоративные сайты, интернет-магазины, блоги и онлайн-курсы. Работа происходит в визуальном интерфейсе. Для решения базовых задач не требуется знание программирования.
Стандартные блоки — это готовые секции с заданной структурой, их более 550 в библиотеке. Платформа сама адаптирует их под разные экраны. Zero-блоки — это свободный холст для создания уникального дизайна, похожий на Figma. Мы рекомендуем комбинировать оба подхода: зеро-блоки — для ключевых экранов, стандартные — для контентных разделов.
Да, Tilda подходит для интернет-магазинов до 50 000 товаров. Есть встроенный каталог с карточками, корзина, фильтры по категориям, промокоды и интеграция с платежными системами и службами доставки. Для магазинов от 50 000+ товаров лучше выбрать специализированную платформу или кастомную разработку.
Потоки — это отдельный интерфейс для публикации новостей, постов и анонсов. Контент создается в специальном редакторе: заходите и пишете пост, а сайт обновляется автоматически. Доступны категории, теги, SEO-настройки, черновики и отложенные публикации. Лимит — 5 000 постов на один поток.
Личный кабинет позволяет ограничить доступ к страницам сайта и управлять клиентской базой. Сценарии использования: онлайн-курсы с продажей доступа, кабинет партнера с закрытыми материалами или кабинет участника мероприятия. Доступ открывается вручную или автоматически после оплаты.
Да, для базовой настройки встроенных инструментов достаточно. Личный кабинет позволяет продавать доступ к учебным материалам с привязкой к оплате, управлять подписками и автоматически закрывать контент после окончания срока. Tilda не является полноценной LMS-системой с проверкой заданий и отслеживанием прогресса.
Tilda Docs — это инструмент для создания документации внутри платформы. Подходит для инструкций, корпоративной вики и заметок по проекту. Можно добавлять текст, изображения, видео, цитаты и ссылки. Документы объединяются в папки с иконками. Также есть настройка доступа и история изменений. Готовые статьи можно опубликовать как отдельную страницу или закрыть паролем.
Сложные сервисы с многоуровневой логикой, маркетплейсы и магазины от 50 000+ товаров, а также проекты с требованием Pixel Perfect — для таких задач лучше выбрать кастомную разработку.