Конструктор Tilda: как создать свой сайт с нуля

Цены проверены 5 октября 2026 года. При оплате за год Personal стоит 500 рублей в месяц, Business — 1000 рублей в месяц.

Для простого сайта-визитки может хватить бесплатного тарифа. Если позже понадобятся дополнительные блоки или собственный домен, можно перейти на Personal. Business пригодится, если нужно создавать несколько отдельных сайтов или экспортировать их исходный код.

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

Какие сайты можно сделать на Tilda

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

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

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

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

Разберём, как собрать сайт-визитку с нуля: добавим информацию о себе, услугах и выполненных проектах, а затем разместим контакты. Для этого будем использовать готовые блоки Tilda — их можно добавлять на страницу и настраивать без программирования.

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

1. Зарегистрируйтесь в Tilda, если у вас ещё нет аккаунта.

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

3. Нажмите «Создать новую страницу». В Tilda можно начать с пустой страницы, готового шаблона или воспользоваться AI-генерацией. Для нашей инструкции выберите пустую страницу: так будет проще разобраться, как устроены блоки конструктора.

4. По умолчанию новая страница может называться Blank page. Чтобы изменить название, откройте её настройки и укажите «Главная».

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

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

Начнём с первого экрана сайта: разместим на нём имя, короткий рассказ о себе и фотографию. Для этого подойдут готовые блоки из категории «О компании».

1. Нажмите «Все блоки», откройте категорию «О компании» и выберите подходящий шаблон. В исходной версии инструкции использовались AB402 и AB603 — номера блоков указаны рядом с названиями. Если нужного варианта нет в библиотеке, выберите похожий по расположению текста и изображения.

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

3. Откройте «Настройки» и установите отступ сверху 2.5 line, а снизу — 0. Сохраните изменения.

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

Добавьте блок с услугами

Теперь расскажем посетителям, чем вы занимаетесь и с какими задачами к вам можно обратиться. Для этого удобно использовать блок из трёх колонок: в каждой разместим отдельную услугу и её описание.

1. Наведите курсор на нижнюю границу предыдущего блока и нажмите на плюс. В категории «Преимущества» выберите шаблон FR201.

2. Нажмите «Контент» и откройте «Шапку блока». В заголовке напишите «Услуги», а в описании — коротко о своей работе.

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

4. В «Настройках» установите отступ сверху 5 line (150 px), а снизу — 6 line (180 px). Сохраните изменения.

Добавьте блоки в портфолио

Теперь покажем примеры работ. Для каждого проекта добавим изображение и короткое описание: что это за работа и какую задачу вы решали.

1. Наведите курсор на нижнюю границу блока с услугами и нажмите на плюс.

2. В категории «Заголовок» выберите TL02B. Нажмите на текст и напишите «Портфолио». Затем откройте «Настройки», установите верхний и нижний отступы на 0 и сохраните изменения.

3. Добавьте блок IM10. Нажмите «Контент», напишите короткое описание проекта и замените стандартную иллюстрацию изображением своей работы.

4. В настройках блока установите отступ сверху 2 line (60 px), снизу — 0. Сохраните изменения.

5. Добавьте ещё один или два таких же блока с другими проектами. Чтобы чередовать расположение текста и изображений, в настройках одного из блоков включите «Отразить по горизонтали».

Добавьте блок с контактами

Осталось объяснить посетителям, как с вами связаться. Контакты разместим в конце страницы, чтобы человек мог написать вам после просмотра портфолио.

1. Наведите курсор на нижнюю границу последнего блока и нажмите на плюс. В категории «Контакты» выберите CN102.

2. Нажмите «Контент» и в заголовке напишите «Связаться со мной». Удалите ненужное содержимое второго и третьего разделов.

3. Укажите, как с вами можно связаться: телефон, электронную почту, Telegram или другие соцсети. Проверьте правильность адресов и ссылок.

4. Откройте «Настройки» и установите отступы сверху и снизу по 5 line (150 px).

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

Проверьте и опубликуйте работу

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

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

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

3. Нажмите «Опубликовать». При первой публикации Tilda предложит задать адрес сайта. Для сайта-визитки можно использовать своё имя, например dashaivanova.tilda.ws. Перед публикацией проверьте, что адрес написан правильно.

Готовый сайт можно редактировать и после публикации. Например, добавить новые проекты в портфолио, изменить контакты или оформление. Чтобы посетители увидели изменения, страницу нужно опубликовать повторно.

Как настроить сайт на Tilda после создания

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

Настройте шрифты, цвета и основные параметры

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

Если на сайте несколько страниц, укажите главную — ту, на которую посетитель должен попадать при открытии основного адреса.

Подключите собственный домен

По умолчанию сайт можно опубликовать на бесплатном адресе вида mysite.tilda.ws. Если вы хотите использовать собственный адрес, например myportfolio.ru, понадобится домен и платный тариф Tilda.

Откройте «Настройки сайта» → «Домен», укажите свой адрес и настройте DNS-записи по инструкции Tilda. После изменения записей потребуется некоторое время, прежде чем домен начнёт работать.

Настройте меню

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

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

Подробнее о настройке навигации читайте в нашей инструкции «Как сделать меню для многостраничного сайта в Tilda».

Подключите аналитику и проверьте SEO-настройки

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

Если хотите отслеживать посещаемость, на платном тарифе можно подключить систему аналитики, например Яндекс Метрику или Google Analytics. Это поможет узнать, сколько людей заходит на сайт и какие страницы они просматривают.

После изменения настроек опубликуйте страницы повторно.

Настройте формы и приём заявок — если они нужны

Если посетители должны не только смотреть портфолио, но и отправлять заявки, добавьте на сайт форму обратной связи. Например, она может содержать поля для имени, контактов и сообщения.

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

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