Обзор конструктора Tilda

Мы верим, что отличный дизайн — это сочетание миллиона продуманных деталей и экспертизы в определенной области. Поэтому мы говорим: «контент — это главное», и создаем инструмент, который закрывает все технические аспекты, чтобы вы могли думать только о любимом деле.

Хороший дизайн должен быть доступным. Тильда дает возможность для каждого — от творческих предпринимателей до крупных компаний и брендов — создавать дизайн, который раньше был привилегией заказчиков профессиональных студий.

В конструкторе сайтов Tilda впервые была использована модульная система создания сайта, которую впоследствии стали использовать и другие сервисы. Блок — это группа элементов, объединенных по смыслу. Смысловые блоки, как этажи дома, образуют страницу сайта, чтобы получился логичный рассказ.

Более 500 блоков собраны в библиотеку и разбиты на категории

О проекте. Блоки для описания особенностей проекта: только с текстовой информацией, галереей изображений или кнопками для социальных сетей.

Преимущества. Комбинации фотографий, текста и иконок в формате списков.

Услуги. Карточки, списки с изображениями, колонки с иконками и другие варианты для самых разных сфер бизнеса.

Как это работает. Таймлайны, этапы и карточки наглядного представления процесса.

Команда. Блоки для оформления персональной информации о сотрудниках компании или лекторах на конференции.

Отзывы. Доступно несколько вариантов оформления: в виде слайдера, текста с фотографиями в несколько колонок или отзыва с фоновым изображением.

Расписание. Таймлайны, таблицы и колонки для вёрстки расписаний или наглядного представления процесса.

Тарифы. Представление цен на услуги в формате карточек, списков или таблиц.

Партнёры. Сетка из логотипов и дополнительная информация о партнёрах.

Магазин. Корзина, карточки продуктов, попапы с продуктами

Новости и Потоки. Сетки для новостей или блога

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

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

Содержимое редактируется со страницы по принципу «что вижу, то и получаю». Чтобы поменять текст, нужно на него кликнуть, чтобы заменить фото — перетянуть картинку в браузер.

90% веба — это типографика, поэтому дизайнеры уделяют много внимания оформлению текста. Неважно какая тематика сайта — текст должен быть понятным и хорошо читаться. Хорошие сочетания шрифтов, правильные отступы и межстрочные расстояния — дизайнеры тщательно выверяют все параметры на десктопе и мобильных.

В базовом наборе шрифтов Тильды 25 качественных кириллических шрифтов, в том числе Tilda Sans, Futura, Circe, Formular, Mediator, Reforma Grotesk, Kazimir Text (для пользователей Тильды бесплатны). Легко подключаются библиотеки Adobe Fonts и Google Fonts. Можно загрузить 9 начертаний собственного шрифта в форматах .woff и .woff2 или файл с вариантивным шрифтом для ускорения загрузки сайта.

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

Полноэкранные обложки, фоновые видео, слайдеры и галереи позволяют сделать эффектную подачу там, где изображение заменяет слова.

Красивые бесплатные фотографии можно найти и добавить внутри редактора Тильды. Встроенная библиотека Tilda Images включает 600 тысяч изображений, бесплатных для коммерческого использования на платформе.

Во встроенном фоторедакторе можно отредактировать загруженную фотографию: повернуть, обрезать, добавить фильтр или рамку, настроить резкость.

Иконки для бизнеса можно добавить из бесплатной коллекции Tilda Icons внутри конструктора. Иконки дополняют страницу графически, делают ее интереснее и разнообразнее. Более 40 наборов иконок нарисовали дизайнеры Тильды, ориентируясь на потребности пользователей конструктора. Поэтому в коллекцию входят наборы, которые подходят для разных сфер бизнеса.

Чтобы добавить видео, достаточно указать ID ролика или ссылку на YouTube или Vimeo. Видео может быть фоном на обложке, в одном из готовых блоков, в Zero Block, в галереях для изображений. Gif-анимация добавляется в любой блок, как обычное изображение.

Шаблон — готовая полноценная страница, собранная из блоков. Ее можно использовать как:

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

Шаблоны разбиты на категории:

· Бизнес
· Магазин
· Событие
· Блог
· Контакты
· Анкета
· Внутренние страницы
· Pro (шаблоны, созданные в Zero Block)

На Тильде можно создать интернет-магазин с карточками товаров, либо просто подключить платежную систему и принимать платежи онлайн, например, если вы проводите платные вебинары или собираете людей на мастер-классы.

Подключите один из сервисов и принимайте платежи банковской картой, мобильным телефоном или через онлайн-сервисы. При подключении платежной системы, Тильда передает параметр для онлайн-кассы.

С Тильдой интегрированы 14 платежных систем: Cloudpayments, Robokassa, PayPal, Ю.Money, Ю.Kassa, PayAnyWay, Альфа Банк, Сбербанк, Тинькофф Банк, LiqPay, bePaid, 2Checkout, Wayforpay и Stripe.

Разработчики могут самостоятельно интегрировать платёжную систему в Тильду.

С помощью форм можно принимать данные любой сложности, проводить опросы, собирать резюме и тестовые задания соискателей, открывать онлайн-бронирование. Настройте необходимые поля с помощью простого редактора, опубликуйте их и собирайте результаты.

Находятся формы в отдельной категории «Форма и кнопка».


Виды форм:

Информация, отправленная через формы, хранится в личном кабинете Тильды в разделе «Заявки». Также можно подключить сторонний сервис приема данных из форм: заявки будут приходить на email, в Google Таблицы, в CRM или сервис рассылок.

С Тильдой интегрированы 20+ сервисов приема данных: Email, Mailchimp, Google Таблицы, Google Формы, SendGrid, GetResponse, UniSender, SendinBlue, Mailerlite, SendPulse, AmoCRM, Мегаплан, Pipedrive, Битрикс24, Telegram, Slack, Trello, Zapier, Zoho CRM, Hubspot, Notion, Salesforce, Monday.com. Также вы можете принимать данные с помощью Webhook или собственного скрипта.

Система управления заявками — простой инструмент, встроенный в Тильду. CRM упрощает работу с клиентами:

Подойдет небольшим компаниям и предпринимателям, которым не нужен сложный набор функций классической CRM-системы, но нужна система в делах.

CRM подключается к сайту в один клик без дополнительной платы.

Все сайты, созданные на Тильде адаптивны, так как каждый блок дизайнеры проектируют в 5 вариантах и в зависимости от экрана автоматически отображается та или иная версия.

Такими сайтами удобно пользоваться, они хорошо выглядят на мобильных и имеют более высокий рейтинг в поисковых системах.

Мобильную версию можно настроить: частично отключить некоторые блоки, заменить их другими, добавить кликабельные номера телефонов, установить специальное меню для мобильных.

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

Адаптивность — важный параметр SEO. Поисковые системы отдают предпочтение сайтам, которыми удобно пользоваться на мобильных устройствах.

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

Инструменты Zero позволяют сделать «резиновую» верстку — дизайн будет автоматически учитывать размер экрана.

Для любого элемента в блоке можно добавить CSS-класс. Эта функция упрощает процесс модификации элементов — вы задаёте класс заголовку, изображению, галерее и любому другому элементу и указываете его название в html-коде.

Zero Block можно использовать как редактор для существующих блоков. Большинство блоков из библиотеки можно конвертировать в Zero и изменить внешний вид.

Макет сайта, созданный в Фигме, можно импортировать в Zero Block автоматически по API. Вы экономите время — не нужно переносить каждый элемент из графического редактора в Тильду и пересобирать дизайн сайта с чистого листа.

Анимация в Zero: дополнительные настройки эффектов появления:

Анимация в Zero: параллакс и фиксация

Эффект параллакса создает эффект трехмерного пространства, из-за разной скорости движения элементов относительно фона. У параллакса две настройки:

Фиксация — эффект, при котором элемент можно закрепить в определенной позиции на время скролла. Регулируется координаты и продолжительность фиксации.

Инструмент для продвинутой анимации. Анимация по шагам — это создание сценариев движения элементов на странице. Текст, картинки, объекты могут менять положение, двигаться по траектории, менять размер, прозрачность и угол поворота по скроллу, по клику или при наведении.

Триггерная анимация — дополнительная интерактивность на сайте и вовлечение посетителей. Можно создать анимацию любого элемента и назначить другой элемент триггером. Триггер запустит анимацию при клике или наведении на него.

Сайты, сделанные на Тильде, по умолчанию отлично индексируются поисковиками за счет особенностей самой платформы: последовательное расположение блоков на странице.

В настройках сайта есть инструмент, который проанализирует все страницы сайта и выдаст конкретные рекомендации по каждой странице — что нужно исправить или сделать, чтобы улучшить оптимизацию для поисковых систем. Рекомендации написаны простым языком — их можно выполнить, даже если не знать, как расшифровывается SEO.

Специалистам доступны настройки:

<title> — Название страницы, которое отображается в самом верхнем поле браузера. Это самый важный тег для оптимизации, так как поисковые системы придают ему большое значение.

<description> — Краткое описание страницы. Содержимое этого тега поисковые системы используют для создания сниппета — текста, который выводится рядом с ссылкой в поисковой выдаче.

<h1> — Заголовок для всего текста страницы. Следующий по важности тег после <title>.

<h2>,<h3> — Теги, которые задают структуру страницы

Адреса страниц — Возможность задать правильные с точки зрения SEO адреса страниц, без лишних символов.

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

Файл robots. txt — файл для поисковых роботов, в котором указано какие страницы нужно индексировать, а какие нет. Генерируется автоматически.

Файл sitemap. xml — файл для поисковых роботов, который описывает то, как организован контент на вашем сайте. Это помогает им более точно индексировать ваши страницы. Генерируется автоматически.

301 redirect — используется при изменении адреса, чтобы сохранить вес страницы в поисковых системах.

www. и https-редиректы — возможность настроить переадресацию со страницы с префиксом http на страницу с https, чтобы не дублировать их и избежать снижения рейтинга в поисковой выдаче. Аналогично настраивается редирект с сайта без www. на сайт с www.

Страница 404 ошибки — автоматическая страница, которая открывается, если запрашиваемый сайт невозможно найти: человек ошибся при наборе адреса или страница была удалена.

Фавикон — значок веб-сайта или страницы. Отображается в браузере перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

Если ссылкой на сайт активно делятся в социальных сетях, то это косвенно влияет на рейтинг сайта для поисковых систем и прямо влияет на трафик.

Специально для соцсетей в Тильде можно добавить:

Во всех сайтах на Тильде есть встроенная статистика. В настройках сайта можно посмотреть:

Если создан интернет-магазин, то для него отображаются данные:

Раз в месяц сводные данные о статистике приходят на почту.

Это основные показатели, которые сформируют картину происходящего на сайте. Если вы профессиональный маркетолог и вам нужны более сложные показатели, то тут же, в настройках, можно подключить Google Analytics, Яндекс. Метрику или Google Tag Manager. Сторонние счетчики подключаются бесшовно — не нужно добавлять код или номер счетчика, достаточно авторизоваться в выбранной системе и счетчик будет добавлен на все страницы сайта.

Также можно добавить пиксели Facebook и Вконтакте чтобы настраивать таргетированную рекламу.

К сайту можно подключить собственное доменное имя вида mysite.com. Если вы уже купили имя у регистратора доменных имен, то его нужно просто прописать в настройках сайта, а у регистратора указать наш IP адрес. Если домена еще нет, его можно купить без комиссии в личном кабинете Тильды.

При покупке любого тарифа на год, действует акция «домен в подарок» — вы сможете зарегистрировать имя бесплатно.

Сайту можно дать красивое имя вида mysite.tilda.ws. Сайты с такими именами не отличаются от сайтов с собственным доменом и без проблем индексируются поисковиками. Красивое имя можно задать на любом тарифе, включая бесплатный.

HTTPS — протокол зашифрованного соединения — подключается для всех сайтов бесплатно, внутри личного кабинета для этого не нужны никакие технические уловки. Есть мнение, что сайты, у которых есть SSL сертификат лучше индексируются поисковиками.

Мультилендинги и геолендинги позволяют персонализировать страницы и показывать разным людям разный контент. Это важно, если вы подстраиваете рекламные сообщения для разных запросов. Или ваша аудитория делится по географическим регионам или языкам.

Например, если вы продаете товары в Москве, Нижнем Новгороде и Новосибирске, то вы можете показывать жителям разных городов разные страницы. А если вы продаете туры в разные страны, то страницу с туром в Таиланд можно показывать тем, кто планирует поехать в Таиланд, а страницу с туром на Бали тем, кто собирается на Бали. Чем точнее страница соответствует запросу, тем больше шанс, что человек заинтересуется и останется.

Менять можно отдельные слова, блоки или целые страницы.

Кроме сайта в Тильде можно создавать красивые письма и отправлять рассылки. Это функция входит в стоимость тарифных планов, за нее не нужно платить отдельно.

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

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

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

Чтобы отправить письмо, можно подключить сервис MailChimp, SendGrid или UniSender — в этом случае письма можно отправлять из Тильды по списку контактов, которые есть в сервисе рассылок.

Экспорт кода можно использовать для абсолютно любого сервиса рассылок. Дополнительно настраивать ничего не нужно, процесс очень простой: опубликовать письмо, нажать кнопку «скопировать код», перейти в свой сервис, выбрать функцию «вставить код»: письмо готово к отправке.

Функция «Потоки», доступная на всех тарифных планах упрощает ежедневный постинг в блоге и публикацию новостей на сайте.

Посты создаются в удобной панели управления. В редакторе текста есть все базовые инструменты для оформления: картинка, видео, цитата, разделитель, введение, заголовок. К посту можно добавить теги (разделы), чтобы улучшить навигацию.

Публикации автоматически появятся на сайте в блоках с подключенным потоком. Время публикации можно запланировать.

Функция личного кабинета позволяет ограничить доступ к эксклюзивному контенту вашего сайта, например, закрытой информации для клиентов, участников мероприятия или партнеров.

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

Экспорт кода используется, когда у вас уже есть многостраничный сайт и вы хотите добавить в него страницы, созданные на Тильде. При экспорте вы получаете архив со статичным HTML, JS, CSS и картинками. Размещаете в папке на своем сервере и на вашем сайте появляются красивые страницы.

Если контент нужно обновлять регулярно, можно настроить синхронизацию по API. В этом случае после публикации изменения, внесенные на странице автоматически обновятся на вашем сайте.

Все сайты, независимо от тарифного плана, по умолчанию защищены от DDoS-атак специальным оборудованием.

CDN или сеть доставки контента

Технология распределенного хранения контента (content delivery network, CDN) позволяет хранить контент на географически распределенных серверах и отдавать его посетителю в зависимости от того в какой точке мира он находится. Например, если пользователь из Берлина, он получит изображение из Германии, а не России.


Lazy Load

Технология отложенной загрузки изображений. Когда посетитель заходит на сайт, изображения загружаются последовательно по мере его продвижения по сайту, а не все разом. Это также ускоряет загрузку сайтов.


Поддержка WebP

Автоматическая конвертация всех картинок на сайте в WebP — формат, который позволяет сжимать изображение до 35% сильнее, чем JPEG, без потери качества. После оптимизации общий вес изображений на сайте уменьшается в 3 раза.

Адаптивный ресайз изображений

Технология определяет размер браузера и контейнера на макете сайта, затем запрашивает у сервера изображение подходящего размера. Например, если на макете размер контейнера 450×300px, то посетитель получит не оригинал фотографии, а фотографию, уменьшенную до необходимого размера. А если человек заходит на сайт с мобильного телефона, то скрипт запросит у сервера обрезанное под экран изображение с нужным разрешением.


Retina-дисплеи и медленный интернет

Если у посетителя сайта дисплей с высоким количеством точек на дюйм, скрипт это распознает и запросит у сервера картинку высокого разрешения. Таким образом, изображения будут четкими на устройствах с Retina-дисплеем. Но если у человека медленный интернет, предположим, на даче, система загрузит облегченную версию изображения. Это позволит не снижать быстродействие сайта.

Подробные статьи-инструкции Справочного центра освещают все вопросы, связанные с созданием сайта на Тильде.

Команда поддержки отвечает через форму обратной связи в личном кабинете, либо на электронную почту.

Видеоуроки помогут разобраться с тем, как сделать одностраничный или многостраничный сайт, интернет-магазин, блог, как устроен редактор Zero Block, конструктор рассылок, анимация и CRM.

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

Чтобы люди не только создавали сайты, но и учились, развивались и самосовершенствовались, мы создали образовательный журнал Tilda Education. В рамках этого проекта было выпущено 3 учебника-курса:

«Создание Landing Page» — курс, который учит проектировать, оформлять и запускать конверсионные лендинги и увеличивать количество клиентов.

«Интернет-маркетинг с нуля» — вся базовая информация, которая нужна новичкам для продвижения сайта. Мы выбрали и структурировали необходимые знания, чтобы вы могли просто следовать инструкции и получать результат.

«Дизайн в цифровой среде» — курс по веб-дизайну, 15 лет работы в индустрии мы упаковали в 20 увлекательных лонгридов, которые научат делать современные сайты для себя или для клиентов.

«Анимация в вебе» — 28 уроков c примерами и приемами использования веб-анимации, включая базовую теорию анимации. Внутри каждой лекции практический видеоурок по созданию анимации в Тильде.

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

Tilda создала новый подход к созданию сайтов и изменила отношение к конструкторам в целом. Феномен Тильды в том, что ее используют и начинающие предприниматели, которые пока не могут нанять команду программистов и дизайнеров и известные бренды.

РБК, официальный сайт мэра Москвы, Сбербанк акселератор, YouDrive, банк Точка, Комсомольская правда, Ламбада Маркет, Яндекс Практикум, Lamoda, Оkko-театр, Altair Capital, Райффайзен банк, Высшая школа экономики, YouDo, Ostin, Qiwi Касса, Avito, MyTarget и другие компании ценят время и возможности, которые дает Тильда.

Что говорят о Tilda представители компаний, можно прочитать на странице с отзывами, а также в статье на Habr, где 6 digital компаний: Depositphotos, Contented, YouDrive, mos.ru, Точка и myTarget рассказали, как они используют Тильду в своих проектах.


Обзоры Tilda от дизайн-студий:

Отличие Тильды от других конструкторов:

Tilda Personal — все функции конструктора, включая рассылки, формы, CRM, статистику, вставку кода, интернет-магазин и платежные системы.

Tilda Business — то же самое + экспорт кода и возможность создать 5 сайтов

Если другие конструкторы дробят функции и просят дополнительную плату за подключение статистики, форм или e-commerce, то на Тильде один тариф включает все функции.

Стоимость: бесплатно

Сайт на Тильде действительно можно сделать бесплатно и это не акция, ограниченная по времени. При этом вы можете указать свое имя сайта, вида mysite.tilda.ws и отправить ссылку друзьям или клиентам, рекламировать, продвигать в социальных сетях, указывать в профиле.

Стоимость: 500 рублей в месяц при оплате за год

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

Стоимость: 1000 рублей в месяц при оплате за год

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

Создать сайт — интернет-магазин, сайт компании или лендинг пейдж можно самостоятельно. Никто не расскажет о бизнесе лучше, чем основатель, а Тильда поможет с дизайном: сайт будет красивым и удобным.

В настоящий момент конструктор позволяет реализовать большинство функций современных сайтов. Но веб быстро меняется и отличительная особенность Тильды в том, что платформа непрерывно совершенствуется. Проследить как развивается инструмент можно по годовым отчетам команды за 2017, 2018, 2019 и 2020 год. Это работа людей, влюбленных в продукт, которую они выполняют, чтобы и ваш бизнес был успешным тоже ❤️