Как научиться работать с Tilda и сделать свой первый сайт

Если вам нужен лендинг или простой сайт (например, резюме, портфолио, небольшой интернет-магазин), вы можете создать его самостоятельно при помощи Tilda. Сайт с нуля из готовых шаблонов и блоков соберёт даже новичок, не обладающий навыками дизайна, вёрстки, программирования и администрирования.

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

Что такое Tilda

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

Интерфейс редактирования статьи и библиотека блоков

Плюсы и минусы

Преимущества создания сайтов на Tilda:

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

Недостатки:

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

Цена

Tilda предлагает три тарифных плана: Free, Personal и Business. Рассмотрим их подробнее.

Тарифные планы Tilda

Free

Бесплатный тариф с ограниченным функционалом.

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

Personal

750 ₽ в месяц или 6 000 ₽ за год.

Разрешает создание одного сайта до 500 страниц и до 1 ГБ, открывает полную коллекцию блоков, позволяет принимать платежи с сайта. Можно подключить свой домен, есть возможность добавления товаров, SEO-оптимизации страниц и просмотра аналитики.

Business

1 250 ₽ в месяц или 12 000 ₽ за год.

До 5 сайтов по 500 страниц, до 1 ГБ на сервере. Включает в себя тот же функционал, что и на тарифе Personal, плюс экспорт кода и безналичную оплату для клиентов.

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

У конструктора много возможностей, ниже некоторые из них.

• Шаблоны разного назначения: магазины, курсы, имиджевые сайты, визитки, портфолио, резюме и другие.
• Готовые блоки для любых типов контента: текст, фото, обложки, кнопки, тарифы, галереи, карты, видео и аудио.
• Zero Block: полностью настраиваемая форма для создания кастомных блоков.
• Интернет-магазин с карточками товаров, корзиной и заказом через сайт.
• Формы обратной связи с любым количеством полей и подключение виджетов (JivoSite, CallBackHunter и других).
• Встроенная CRM и интеграция с внешними CRM (Битрикс24, AMO и другими) для обработки форм, заказов и коммуникации с клиентами.
• Внутренняя аналитика и быстрое подключение Google Analytics и Яндекс.Метрики.
• Гибкие настройки индексации и SEO.

Как подготовиться к созданию сайта

Чтобы сайт работал эффективно, нужно:

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

Курсы по созданию лендингов

Выбрать курс

6 курсов

Структура сайта

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

Есть два подхода к составлению структуры сайта.

Изучение конкурентов. Нужно просмотреть как можно больше сайтов конкурентов и сформировать структуру сайта по аналогии с ними.

Анализ поисковых запросов. Нужно собрать соответствующие вашей тематике поисковые запросы (например, с помощью Яндекс.Wordstat), разделить их по группам и, исходя из получившегося списка групп, сделать вывод о том, какие страницы должны быть на сайте.

Подготовка контента для сайта

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

Прототипирование

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

Для прототипирования можно воспользоваться сервисами:

• Figma,
• Axure,
• Moqups,
• Marvel,
• Google Docs,
• Microsoft Word.

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

Нарисованный вручную прототип. Пример с сайта Tilda

Шрифты, цвета, иконки

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

Выберите один шрифт (или два, но тщательно подберите шрифтовую пару) и два, максимум три, цвета (оптимальное соотношение — 90% черного и белого и 10% ярких цветовых акцентов).

Tilda предлагает встроенный набор иконок. Если среди них вы не найдёте нужные, поищите на сайте flaticon.com.

Как создать сайт на Tilda

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

Создайте проект

1. Зарегистрируйтесь на сайте Tilda.

2. Платформа сразу же предложит создать новый сайт. Укажите его название и нажмите на кнопку «Создать».

Скриншот создания проекта на Tilda

3. Перейдите в раздел «Тарифы и оплата». Даже если вы уверены, что вам хватит функционала тарифа Free, рекомендуем воспользоваться бесплатным двухнедельным тестовым периодом тарифа Personal, чтобы протестировать возможности конструктора.

Активация тарифа Personal на тестовый период

4. Вернитесь в раздел «Мои сайты», нажмите «Редактировать сайт» под названием проекта. На открывшейся странице нажмите «Настройки сайта».

Кнопка «Настройки сайта» находится в верхнем правом углу

5. На вкладке «Главное» добавьте описание и пропишите субдомен (адрес, по которому будет доступен сайт). Здесь же есть ссылка на подключение собственного домена.

Основные настройки сайта на Tilda

Настройте сайт

В разделе настроек «Аналитика» подключите Google Analytics или Google Tag Manager и Яндекс.Метрику. Здесь же можно добавить на сайт пиксели соцсетей.

Перейдите в раздел «SEO», подключите к сайту защищённый протокол HTTPS, настройте перенаправление с HTTP на HTTPS, а также редирект с WWW на основной домен (или наоборот: важно, чтобы сайт был доступен либо только с WWW, либо только без WWW). В этом же разделе вы можете подключить к сайту панели Яндекс.Вебмастер и Google Search Console.

Раздел SEO-настроек

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

Создайте первую страницу

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

Кнопка «Создать страницу» списке страниц проекта

Выберите шаблон

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

Готовые шаблоны Tilda, разбитые на группы

Измените заголовок страницы сайта

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

Основные настройки страницы

Добавьте блоки

Часто бывает, что готовый шаблон не удовлетворяет вашим потребностям на 100%. Ничего страшного в этом нет — вы легко отредактируете страницы, добавив к ним нужные блоки. Рассмотрим процесс добавления и кастомизации меню (другие блоки добавляются и редактируются по аналогии).

1. Откройте страницу в режиме редактирования.

2. Блок можно добавить в любое место страницы, нажав на значок «+» под, над и между другими элементами.

3. Слева откроется библиотека готовых блоков, которые распределены по тематическим группам. Найдите группу «Меню» и выберите вариант блока с нужными вам элементами, например, ME301 (универсальное меню с логотипом слева).

4. Блок появился на странице, теперь вы можете его отредактировать. При наведении на меню вы увидите кнопки: номер блока (позволяет сменить тип блока, сохранив содержимое), «Настройки» (всё, что касается внешнего вида) и «Контент» (содержимое блока).

Кнопки управления меню

5. Чтобы изменить пункты меню, добавить логотип, ссылки на соцсети и другие элементы, нажмите на кнопку «Контент».

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

Редактирование пунктов меню

7. Ниже добавьте логотип или название компании/сайта и ссылки на соцсети.

8. Если хотите, чтобы посетители сайта совершали целевое действие прямо в верхнем меню (например, писали вам в мессенджер), разместите там соответствующие кнопки.

9. После того как внесли изменения, нажмите «Сохранить» (если планируете ещё что-то делать в контенте блока) или «Сохранить и закрыть».

Протестируйте сайт

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

Мобильная версия сайта в режиме предпросмотра

Опубликуйте сайт

Когда вы довольны тем, как выглядит и работает сайт, он готов к публикации. Здесь есть три варианта:

• нажать на кнопку «Опубликовать» в режиме редактирования страницы;
• в списке страниц сайта навести на нужную страницу и нажать на появившуюся кнопку «Публиковать»;
• в этом же списке кликнуть по ссылке «Опубликовать все страницы».

Публикация страницы из интерфейса редактирования

Публикация из списка страниц

Как создавать страницы сайта на Tilda

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

Как работать с внутренними страницами сайта

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

Если на сайте предполагается несколько однотипных документов (карточек товара, записей блога), создайте одну такую страницу, отредактируйте её под себя, сохраните как шаблон и используйте при создании новых страничек. Вы можете сохранить несколько собственных шаблонов и выбирать их в разделе «Мои шаблоны» при создании новых страниц.

Как сделать страницу на Tilda с чистого листа

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

Как подключить платный домен к сайту на Tilda

По умолчанию сайты расположены на домене tilda.ws, но тарифы Personal и Business дают возможность подключить свой домен (адрес сайта). Купить его можно как у регистраторов доменов, так и через Tilda. После покупки нужно указать новый адрес сайта в разделе настроек «Домен», а в личном кабинете регистратора доменов добавить DNS-записи. Рекомендуем воспользоваться пошаговой инструкцией по подключению домена от Tilda, так как набор действий отличается в зависимости от того, через какую компанию вы приобрели домен.

Заключение

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

Читайте также:

Как сделать сайт бесплатно, чтобы получилось хорошо

Дарья Сопина

5 мин.