Инструкции

Как создать сайт на Tilda: гайд для новичков

Как создать сайт на Тильде

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

Один из самых популярных и удобных конструкторов — Tilda. В статье расскажем, как устроена платформа, какие проекты здесь можно реализовывать и как создать сайт на Tilda с нуля.

Как устроена Tilda и что здесь можно сделать

Возможностей Tilda хватает для самых разных проектов. Здесь можно создать:

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

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

У Tilda есть как преимущества, так и недостатки.

Плюсы Tilda Минусы Tilda
Большая библиотека готовых блоков под разные запросы Готовые шаблоны ориентированы в основном на лендинги
Графический редактор для создания собственного дизайна с нуля Если создавать сайт с нуля в графическом редакторе, придется вручную подстраивать его под размеры мобильных устройств
Встроенные сервисы для измерения эффективности посадочных страниц Платные тарифы стоят дороже, чем у других конструкторов
Возможность настроить SEO При переносе сайта на другую платформу дизайн ломается
Встроенная CRM На бесплатном тарифе нельзя подключить свой домен

Сколько стоит сделать сайт на Tilda

Пользователям доступны три тарифных плана: Free, Personal, Business.

На бесплатном тарифе можно создать сайт-визитку. В него входит 50 МБ виртуального пространства, а на сайте может быть не больше 50 страниц. Функциональность такого сайта будет ограничена. На этом тарифе сайт можно зарегистрировать только на поддомене Tilda — свой подключить не получится. Адрес вашего сайта будет выглядеть так: my-site.tilda.ws. Однако на взаимодействии с сайтом и на его выдаче в поиске это никак не отражается.

Тариф Personal подходит для корпоративных сайтов, медиа и интернет-магазинов — стоит 6000 рублей в год. Также пользователь получает: доменное имя в зоне .ru или .com, возможность создавать до 500 страниц, 1 ГБ места на диске, доступ ко всей библиотеке готовых блоков.

В тариф Business дополнительно входит до пяти сайтов. Также он позволяет экспортировать код и переносить его на свой сервер. Стоимость — 1000 рублей в месяц плюс услуги хостинг-провайдера.

Наша сравнительная табличка поможет сориентироваться и выбрать подходящий тариф под ваши задачи и бюджет.

Тариф Цена в год, руб. Возможности Кому подходит
Free Бесплатно Сайт на поддомене, до 50 страниц, до 50 МБ на диске Фрилансерам, которым нужен небольшой сайт-визитка
Personal 6000 Сайт на платном домене, до 500 страниц, 1 ГБ на диске, полный доступ к библиотеке модулей Блогерам, издателям, компаниям, онлайн-магазинам
Business 12 000 Возможности тарифа Personal, опция экспорта кода, до 5 сайтов на одном аккаунте Разработчикам, которые создают сайты на заказ и одновременно работают над несколькими проектами

Как создать сайт на Tilda: пошаговая инструкция

Базовые настройки сайта

Зарегистрируйтесь на платформе, перейдите в раздел «Тарифы» и выберите тариф Personal — для новых пользователей действует бесплатный пробный период.

Тарифы и оплата на Тильде
У меня тариф уже оплачен, но вам он будет доступен бесплатно после регистрации

Создайте новый сайт в разделе «Мои сайты». Там же укажите название проекта — его увидите только вы.

Создаем новый сайт на Тильде
Руководство по Тильде: для начала работы над сайтом введите название проекта и нажмите «Создать»
Как создать сайт на Тильде — начало: название проекта

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

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

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

Создание страниц сайта

Перейдите в панель управления сайта и нажмите кнопку «Создать страницу».

Создаем страницу нового сайта на Тильде

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

Выбираем шаблон сайта
Меню редактирования блоков

Для выбора блока вызовите выпадающее меню в левом верхнем углу окна. Если навести курсор на описание шаблона, на экране отобразится его миниатюра.

Тильда: выбираем внешний вид готового блока

У каждого блока есть свои настройки и оформление. Чаще всего здесь можно изменить цвет фона, шрифт, ширину блока, адаптивность под разные экраны, параметры кнопок.

Для продвижения сайта в поисковых системах в этом же разделе необходимо прописать заголовки или теги H1, H2 и H3.

Настраиваем внешний вид блока

Чтобы добавить на сайт текст или изображение, откройте меню «Контент». Здесь редактировать информацию можно как в любом текстовом или графическом редакторе. Текст в блоках можно редактировать, не открывая меню «Контент». Чтобы изменить данные, установите курсор на нужной строчке и отредактируйте текст.

Редактируем контент блока
Редактируем контент блока

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

Добавляем новый блок на тильдовский сайт
Конструктор Тильды: библиотека блоков

Внешний вид страницы можно увидеть в карте блоков. Она помогает оценить расположение блоков и удобство их использования. Активируется карта в меню «Еще → Блоки на странице» в правом верхнем углу экрана.

Карта блоков Тильды
Карта блоков

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

Базовые настройки страницы на Тильде: заголовок и описание

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

Настраиваем сниппет для соцсетей

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

Когда все будет готово, нажмите «Сохранить изменения», а затем — «Опубликовать». Готово, ваш сайт теперь находится в общем доступе.

Создание меню сайта

Чтобы сделать меню, создайте новую страницу сайта. Затем перейдите в библиотеку блоков и в разделе «Меню» выберите подходящий.

Выбираем меню для сайта

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

Настраиваем меню для сайта, сделанного на Тильде

Далее сделайте эту страницу хедером. Перейдите в общие настройки сайта и в разделе «Шапка и подвал» выберите ее в выпадающем меню. Сохраните изменения и опубликуйте все страницы. Проверьте, как отображается меню.

Настраиваем хедер сайта на Тильде

Дизайн сайта

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

Лучшие сайты, созданные на Тильде

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

Пример хорошей обложки сайта

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

Пример качественных фотографий на сайте

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

Пример фирменного шрифта

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

Возможности SEO

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

Так выглядит сниппет в поисковой выдаче

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

Так выглядит сниппет в соцсетях

Теги для заголовков. Заголовки могут быть разных уровней — H1, H2 или H3. Такое разделение помогает поисковикам определить тематику сайта и чаще показывать его пользователям по подходящим поисковым запросам.

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

Так отображается Alt, если картинка не загружается

Оптимизация доставки изображений. Быстрая загрузка сайтов на Tilda хорошо влияет на их выдачу в поисковых системах. Технологий по оптимизации доставки изображений несколько: отложенная загрузка, CDN, адаптивный ресайз и пр. Они работают по умолчанию и уменьшают вес сайта в 3–7 раз.

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

Домен — это адрес сайта в сети. Чтобы подключить сайт на Tilda к своему домену и открывать его по ссылке вроде http://mysite.com, необходимо сделать следующее:

  1. Купите домен. Сделать это можно как на Tilda, так и у регистраторов доменов — такие сервисы легко найти в интернете по запросу «Купить домен».
  2. Укажите домен в настройках сайта на Tilda. Перейдите в «Настройки сайта → Домен», укажите домен и сохраните изменения. Система подскажет оптимальный для вашего сайта IP-адрес А-записей, которые необходимо установить на стороне регистратора.
  3. Укажите записи для домена на сайте регистратора. Для этого нужно перейти в зону управления DNS, добавить A-запись и прописать для нее IP-адрес из «Настроек сайта» на Tilda.
Тильда: Подключаем домен для сайта

Подробную инструкцию о подключении домена найдете в справочном руководстве по Tilda.

Что еще умеет Tilda

Tilda позволяет решить множество разных задач. Вот некоторые из них.

Подготовка писем для рассылки

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

У нас есть отдельная статья, как создавать рассылки в Tilda, с классными примерами писем.

Создание пользовательских блоков

Если у вас есть базовые представления о веб-дизайне и навыки верстки, создавайте страницы сайта самостоятельно в редакторе Zero Block. Открыть редактор можно в нижней части сайта, нажав кнопку Zero.

Открываем Zero Block
Так выглядит Zero Block

Интеграция с внешними сервисами

К сайту на Tilda можно подключить внешние сервисы и приложения:

  • CRM;
  • системы приема платежей;
  • мессенджеры;
  • сервисы email-рассылок;
  • формы для получения контактов и пр.

Электронная торговля

У Tilda есть следующие инструменты для быстрого запуска интернет-магазина:

  • Возможность интеграции с платежными сервисами.
  • Шаблоны страниц для электронной торговли в разделе «Бизнес».
  • Модули для самостоятельного создания страниц магазина в меню блоков «Магазин».
  • Модули для интеграции сайта на Tilda с платформой «Эквид».
Блоки, доступные для создания магазина на Тильде

Пользовательская страница 404

На Tilda можно самостоятельно назначить и отредактировать страницу 404 — чтобы пользователь не уходил с несуществующей страницы к конкурентам, а возвращался в главное меню или в другие релевантные разделы сайта. Чтобы создать такую страницу, перейдите в «Настройки сайта → Еще».

Настраиваем страницу 404

Создаем сайт на Tilda : главное

Возможностей Tilda хватит для большинства задач: здесь можно создать как небольшой сайт-визитку, так и онлайн-магазин.

Для создания сайта на Tilda не нужно знать программирование — с настройкой справится даже новичок.

Есть несколько тарифов: полноценный сайт можно создать бесплатно.

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