Конструктор сайтов Tilda: подробный обзор, примеры и отзывы

Конструктор сайтов Tilda: подробный обзор, примеры и отзывы

Рассказываем, как Tilda помогает создавать красивые сайты без навыков программирования.

Конструктор сайтов Tilda позволяет за пару часов создавать сайты с профессиональным дизайном: лендинги, интернет-магазины, блоги или портфолио. Интерфейс сервиса напоминает обычный графический редактор — никакого кода писать не нужно.

Каждая страница сайта в Tilda создаётся из блоков, которые разделены по функциональным категориям.

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

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

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

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

Мы были дико рады, когда сделали сайт на Tilda сами, потому что пережили перед этим ад. До моего прихода в «Таблицу» сайт компании делали в какой-то конторе — к процессу был подключён миллиард разработчиков, дизайнеров, ТЗ-выдавальщиков и правковысылателей. Получился тяжёлый и перегруженный сайт со сложной вёрсткой и без доступа к админке. Мы кое-как приняли работу и тут же решили быстренько сделать лёгкий и понятный сайт сами. Выбор пал на Tilda.

За 2–3 недели мы с коллегой сделали сайт, который работает и сейчас. Нарисовали на бумаге макеты, собрали всё это в конструкторе Tilda, дорисовали графики, добавили фоточек — и voilà! Сайт готов, клиент идёт, нас хвалят, а мы сидим и радуемся жизни.

Чтобы сделать достойный сайт в Tilda, нужен интересный и полезный контент. Обо всём остальном уже позаботились дизайнеры сервиса. Например, о бесплатных иконках для бизнеса — их тут более 700 в 43 категориях.

Сайты на Tilda автоматически подстраиваются под экраны компьютеров, планшетов и смартфонов. Все блоки из библиотеки уже адаптивны. Это экономит время на разработку и положительно влияет на SEO. Исключение — уникальные блоки, созданные в Zero Block.

Обзор Tilda: Адаптация к разным экранам

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

Есть миф, что сайт, сделанный в конструкторе, — это всегда шаблонная история. Когда слышу такое, понимаю: человек просто не знаком с возможностями нулевого блока в Tilda. С ним можно делать невероятно эффектные и удобные сайты, о которых никто не сможет сказать: «Выглядит как шаблон».

Вот случаи, когда может пригодиться редактор Zero Block:

Блоки, созданные в редакторе, уже не адаптируются автоматически. Поэтому придётся вручную задать расположение элементов для разных экранов. Сделать это быстро помогут горячие клавиши, горизонтальные и вертикальные направляющие и панель слоёв. К примеру, слои можно заблокировать для редактирования или сделать невидимыми. Чтобы выделить сразу несколько элементов, нужно зажать клавишу Ctrl. Всё как в привычных графических редакторах

В Tilda есть два типа анимации: базовая и пошаговая. Создаются и настраиваются анимации тоже в Zero Block.

Базовая анимация включает три модели поведения элементов:

Базовая анимация — это готовые, чаще всего используемые эффекты. Их достаточно в большинстве случаев. Но их применение позволяет сделать сайт, который будет выглядеть как результат серьёзной работы программистов и дизайнеров.

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

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

Уже на этапе создания концепции на 90% понятно, каким будет сайт. Но это, конечно, верхушка айсберга. Мне кажется, Tilda — это вполне состоявшийся game changer, который привнесёт в индустрию ещё много сюрпризов.

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

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

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

В Tilda можно создавать разнообразные горизонтальные и вертикальные формы: пошаговые, анкеты, pop-up. В вертикальных формах для каждого поля можно выбрать свой тип из 21 варианта: всевозможных чекбоксов, радиокнопок, полей ввода, даты и времени, вопросов с вариантами ответов в виде картинок.

Сайт можно подключить к 20 сервисам приёма данных и получать заявки сразу в популярные CRM, сервисы рассылки, на почту или в мессенджеры. А ещё на базе Tilda можно создавать опросы с пошаговым заполнением и формы с калькулятором — например, для расчёта стоимости дерева для столешницы.

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

Tilda помогает создать сайт из разных частей без шаблонов и ограничений. Мы продаём посуду для чая в розницу как интернет-магазин. На соседних страницах — предложение для оптовиков: форма запроса условий и прайс-лист. Есть страницы с услугами кейтеринга и «Подписка на чай». Каждая страница — это история и отдельный лендинг. Получается уникальная картинка бизнеса в том виде, в котором он существует.

В карточке товара можно настроить выбор параметров с изменением цены — например, если вы продаёте футболки разных цветов, но с одинаковыми принтами. Можно сделать так, чтобы при выборе чёрной майки цена была 700 рублей, а при выборе белой — 800.

В корзине можно подключить поле выбора оплаты через одну или несколько платёжных систем. Поддерживается интеграция с CloudPayments, Robokassa, PayPal, «Яндекс.Деньгами», «Яндекс.Кассой», «Альфа-Банком», Сбербанком, «Тинькофф Банком», AB Pay, LiqPay и Stripe. Можно настроить автоматическое уведомление покупателя о заказе после успешной оплаты.

Благодаря блочной структуре сайты Tilda отлично индексируются. Кроме того, есть все необходимые инструменты: можно добавить к заголовкам теги h1, h2 и h3, а к изображениям атрибуты alt, настроить читаемые адреса страниц, подключить https и добавить редиректы. Определённые страницы можно закрыть от индексации.

Для проверки можно воспользоваться Tilda-панелью вебмастера, которая укажет на все ошибки, негативно влияющие на индексацию.

К сайту можно подключить свой домен или использовать бесплатный адрес вида «адрес.tilda.ws». Для тех, кто привязывает домен впервые, у Tilda есть пошаговые инструкции для разных регистраторов.

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

Можно персонализировать сайт и для посетителей из разных каналов. Отслеживая метки в адресах страниц, можно показывать разные предложения для посетителей, пришедших из «Яндекса», Google, «ВКонтакте» или Instagram.

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

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

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

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

Tilda Education — журнал, в котором публикуются практические пособия по дизайну, маркетингу и бизнесу. А ещё Tilda выпускает образовательные курсы. Сейчас их три: «Дизайн в цифровой среде», «Интернет-маркетинг» и бесплатный курс по созданию лендингов.

Tilda подходит всем, кто ведёт деятельность в интернете. Сейчас конструктор активно используют:

Попробовать Tilda