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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Список страниц. Ссылки на страницы сайта в виде списка с иконками, названием и описанием материалов. Например, для представления работ в портфолио.

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

Видео. Различные комбинации элементов: один или два плеера, сочетание видео и текста, YouTube-трансляция с комментариями, плейлист для видеокурса.

Контакты. Блоки с адресом, почтой, телефоном, ссылками на социальные сети и возможностью подключить карту.

Соц.сети. Кнопки расшаривания в соцсетях и блок с комментариями из ВКонтакте.

Попап. Отображайте галерею, товар, формы, html-код и виджеты в виде всплывающих окон.

Виджеты. Виджеты обратной связи, поиска по сайту, онлайн-записи и покупки билетов, фиксированный виджет видео с рассказом о вашем продукте или сервисе.

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

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

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

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

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

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

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

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

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

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

Чтобы добавить видео, вы можете выбрать один из источников: YouTube, Vimeo, MP4, WEBM, Rutube, Kinescope, VK Video, Boomstream или iFrame. Видео может быть фоном на обложке, в одном из готовых блоков, в Zero Block, в галереях для изображений. Gif-анимация добавляется в любой блок, как обычное изображение.

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

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

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

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

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

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

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

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

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

К Тильде можно подключить разные платежные системы, например: Cloudpayments, Robokassa, Ю. Money, Ю. Kassa, Альфа Банк, Сбербанк, Т-Банк и другие. Полный список интегрированных платежных систем вы найдете в справочном центре.

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

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

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

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

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


Виды форм:

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

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

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

С Тильдой интегрировано 20+ сервисов приема данных. В России можно подключить некоторые из них, например: Email, Google Таблицы, Google Формы, UniSender, AmoCRM, Мегаплан, Битрикс24, Telegram. Также вы можете принимать данные с помощью Webhook или собственного скрипта.

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

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

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

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

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

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

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

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

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

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

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

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

С помощью элемента Vector вы можете создавать шейпы любой формы и базовые иллюстрации для сайта, а также дорабатывать импортированные svg-объекты.

Любой Zero Block можно превратить во всплывающее окно, добавив на страницу блок-модификатор T1093 «Popup: Zero Block в попапе» из категории «Другое».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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