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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дизайн сайта

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

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

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

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

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

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

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

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

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

Альтернативный текст изображений. Задайте для изображений текст, который поисковики будут определять как ключевые слова и учитывать его при индексации — 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.

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

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

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

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

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

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

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

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