Евгения Светачева
Интернет-маркетолог

Tilda – это многофункциональная платформа для создания профессиональных проектов без навыков программирования. В основе лежит принцип визуального WYSIWYG-редактора: контент в режиме правки отображается в том же виде, в котором он будет опубликован и доступен для пользователей. Библиотека готовых шаблонов насчитывает более 550 решений под различные цели: от запуска промостраницы до корпоративного блога или интернет-магазина, а Zero-Block поможет в разработке индивидуального дизайна. В статье поделимся пошаговой инструкцией, как самостоятельно создать сайт на конструкторе tilda с нуля, проведем обзор интерфейса и познакомим с дополнительными возможностями.

Кому подойдет и для чего нужна Тильда

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

Какой тарифный план выбрать

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

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

Free

Чтобы разобраться в работе конструктора и создать простой лендинг, будет достаточно этого тарифа. Он позволяет открыть один проект.  Вы погрузитесь в основы и узнаете, как запустить сайт на тильде, используя часть готовых блоков и возможности Zero-Block. В тарифе нельзя подключить свой домен, отслеживать аналитику и другое. При этом будет автоматически добавлено «made on Tilda».

Personal

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

Business

Профессиональный план предназначен для крупного бизнеса и сети компаний, которым будет недостаточно одного ресурса. В учетной записи можно вести от 10 до 30 параллельных продуктов. Тариф более гибкий, чем остальные, и подойдет тем, кто хочет внести изменения в HTML-код или перенести макет на свой хостинг через экспорт исходного кода. Стоимость начинается от 1250 рублей в месяц и зависит от выбранных опций.

Привлечем целевых пользователей из Яндекс и Google. Работаем над внутренними и внешними факторами ранжирования и видимостью сайта в поисковиках. Вы получаете рост посещаемости и высокий охват среди потенциальных клиентов.
Оставить заявку
Подробнее…

Этапы создания сайта на тильде с нуля и самостоятельно: от идеи до прототипа

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

Как сформулировать основную идею

Начните с ответа на вопросы «Зачем?» и «Для кого?» вы хотите собрать сайт на тильде. Какую пользу он должен принести вам, как владельцу, и пользователям (читателям, клиентам и т.д). Что вы хотите донести до целевой аудитории? Изучите конкурентов, найдите вдохновляющие референсы – так вы обозначите границы и наметите план работ. 

Структура

Следующий шаг – структурировать всю информацию в виде карты портала. Вы должны представить конечный продукт и, как можно подробнее, составить список всех необходимых пунктов. Удобно нарисовать на бумаге или в приложении (например, в Xmind, FreeMind или MindMeister). Выделите цветом или метками то, что нужно реализовать в первую очередь, а остальное можно доработать уже после запуска. Это позволит определить, достаточно ли будет визитки или нужен полноценный корпоративный портал. После того, как вы создадите в тильде ряд страниц, уже сложно будет корректировать всю структуру.

Прототип

Многие пропускают этап прототипирования и сразу переходят к верстке «вслепую» – это неизбежно приводит к ошибкам и увеличению сроков реализации. Чтобы ничего не упустить, лучше заранее выстроить логику макета. Например, чтобы грамотно составить прототип лендинга, можно ориентироваться на формулу AIDCA (Attention, Interest, Desire, Confidence, Action), придерживаясь которой вы сможете захватить внимание пользователя и подвести его к необходимому действию.

Подготовка материалов

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

Регистрация в Tilda

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

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

Как настроить проект на Tilda 

Активируйте пробный Personal в разделе «Тарифы и оплата» или подключите необходимый план сразу. Изучите все условия и сравните их. Оплачивать можно ежемесячно или за год.

Далее можно переходить к редактированию параметров. 

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

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

Главное

Составьте описание и придумайте субдомен. Свой адрес можно подключить на следующих этапах.

Шрифты и цвета 

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

Что такое инфографика: примеры, шаблоны и советы по оформлению Читайте также Что такое инфографика: примеры, шаблоны и советы по оформлению

Аналитика

Платформа тильда онлайн хорошо подходит для как для небольшого промо материала, так и полноценного проекта, которому необходим постоянный поток трафика. Она имеет не только встроенные счетчики, но и позволяет добавить сторонние, такие как Я.Метрика, G.Analytics и другие, активировать можно тут же дополнительно.

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

SEO

Тильда — комплексная программа для создания сайтов, обеспечивающая не только привлекательный дизайн, но предоставляющая широкие технические возможности для поискового продвижения. Во вкладке «SEO» достаточно много функций, предлагаемых для грамотной оптимизации вашего ресурса. Среди них – подключение сертификата безопасности HTTPS, редиректы, управление файлами ads.txt и app-ads.txt  для рекламных сетей и продавцов цифрового контента, а также запуска Яндекс.Вебмастера и Google Search Console.

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

оптимизация
SEO.

Формы 

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

Сбор и обработка заявок 

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

Автоматизация коммуникации с клиентами на примере Tilda CRM: 

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

Если вы регулярно делаете email-рассылки, то обязательно включите разрешение подписки и интеграцию с сервисами рассылок. Автоматизируйте процесс пополнения контактной базы. На выбор есть 7 платформ, среди которых MailChimp, UniSender, GetResponse и другие. 

Привлечем целевых пользователей из Яндекс и Google. Работаем над внутренними и внешними факторами ранжирования и видимостью сайта в поисковиках. Вы получаете рост посещаемости и высокий охват среди потенциальных клиентов.
Оставить заявку
Подробнее…

Создание сайтов на Tilda и наполнение страниц

Создайте новый макет одним нажатием на кнопку. Перед вами готовые решения, сгруппированные по тематикам и категориям. Есть удобный предпросмотр.

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

Начнем с конфигурации конкретной страницы:

  • Напишите заголовок, добавьте короткое описание и url-адрес.
  • Теперь подберем превью. Загрузить его просто, во вкладке «Бейджик».
  • Отображение готового проекта в социальных сетях, мессенджерах и на поиске можно настроить в разделе «Соцсети» и «SEO».
  • Процесс экспорта доступен только на бизнес тарифах. Он будет полезен, если вы захотите перенести материалы из тильда на свой портал или внести изменения с помощью кода.
  • В разделе «Действия» и «Дополнительно» можно скопировать или удалить конкретный лист, также есть возможность передачи на другой аккаунт. Если вы планируете создавать похожие, удобно назначить эту страницу шаблоном и использовать каждый раз. Есть опция вставить свой html-код, настроить скролл и анимацию.

Теперь перейдем к оформлению и наполнению контентом. На примере готового решения «Преимущества» детально разберем особенности настройки элементов. 

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

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

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

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

Индивидуальный дизайн: Zero Block

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

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

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

Для управления Zero-мастером важно понять принцип применения настроек, так, вся рабочая область является контейнером – основной Grid Container привязан к сетке и по умолчанию рассчитан на 12-колоночный макет. Это значит, что контент будет внутри и при просмотре на компьютере, и на мобильном телефоне.

Соседний (Window Container) – гибкий контейнер, который все связанные с ним компоненты автоматически подстраивает под расширение экрана устройства. Проверить привязку можно слева внизу. В меню настроек можно выровнять объекты, назначить фон. Оформлять собственный дизайн так же просто, как и делать сайты на тильде из готовых решений. Интерфейс редактора достаточно прост.

Текст

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

Изображение

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

Геометрические формы: линии, прямоугольники и круги 

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

Кнопка и призыв к действию

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

Видео

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

Как разработать дизайн и оформление упаковки товара: пошаговый план Читайте также Как разработать дизайн и оформление упаковки товара: пошаговый план

Tooltip. Подсказка

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

HTML-код

Не всегда готовые элементы могут удовлетворить все потребности. Не нашли шаблона для своей идеи или нет быстрой интеграции с каким-то приложением? Напишите собственный скрипт и добавьте нужные операции. 

CRM форма

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

Галерея

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

Веб-анимация в Тильда

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

Функция «Step by step animation» доступна только в Zero Block, она позволяет не просто настроить анимацию, но продумать ее последовательно в зависимости от назначенных триггеров и шагов.

Что еще можно сделать в Тильда: интеграции

Если у вас уже есть портал, то через API вы можете интегрировать, проекты из конструктора сайтов на tilda в основной ресурс. Такой вариант будет удобен, если вы регулярно создаете промостраницы с уникальным дизайном. Для единичных случаев подойдет экспорт кода – выгружаете готовый и добавляете его к себе. Для CMS WordPress и 1C-Битрикс есть специальные плагины. Также доступны интеграции с другими бизнес-платформами. Их можно подключить через Webhook или вставку кода напрямую. В списке более 30 предложений: от сервисов аналитики и CRM-систем до платежных систем и коллтрекинга. 

Преимущества самостоятельного создания веб-ресурсов

Tilda WS – что это такое? Это не только конструктор, но и целая система, позволяющая вести аналитику, управлять заявками и влиять на оптимизацию. Первое и самое важное отличие – это no code принцип, не обязательно разбираться в коде, чтобы выпустить ИТ-продукт. В этом плюсы таких платформ. Все элементы заранее созданы так, чтобы пользователь не думал о технической составляющей, а исходил только из функциональных целей и задач и визуального предпочтения. Освоив базовые возможности конструктора, вы сможете создавать простые лендинги за считанные дни, самостоятельно отслеживать статистику посещаемости и оперативно вносить изменения в содержимое, внешний вид, добавлять новые или удалять неэффективные элементы. 

SEO оптимизация сайтов

Сервис анализирует созданные материалы и формирует индивидуальные SEO-рекомендации, которые влияют на видимость поисковиками. Блочная последовательная структура – один из факторов, необходимых для хорошей индексации. Пропишите метаописания, выделите h1-h6 для заголовков. Robots.txt и xml-карта генерируются автоматически. 

Подключение своего домена

Хотите добавить уже имеющийся адрес? В таком случае введите его название и примените изменения. 

Если вы хотите подобрать новый, то программа тильда предложит купить и зарегистрировать его во вкладке «Домены». Можно выбрать международные или зоны конкретного региона (.com .ru .su .рф) и сразу же проверить свободен ли адрес.

Заключение

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

Оставить заявку
Оставить заявку
Получите консультацию и персональное предложение по развитию вашего бизнеса.
У меня есть промокод
Заявка отправлена!
Мы свяжемся с вами в ближайшее время.
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
0 Комментарий
Межтекстовые Отзывы
Посмотреть все комментарии