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


vlada_maestro / shutterstock
«Тильда» — это онлайн-конструктор сайтов. С его помощью можно быстро и просто создать свой сайт-визитку, протестировать и опубликовать в интернете. Чтобы сделать сайт на «Тильде», не нужно покупать доменное имя или учиться программировать — достаточно расставить по местам готовые блоки.
Почему именно «Тильда»:
- Простой и интуитивно понятный визуальный редактор, который освоит даже новичок.
- Много готовых блоков и шаблонов — легко начать, а результат будет аккуратным и красивым.
- Автоматическая адаптация дизайна сайта под все устройства и экраны.
- Один из самых популярных в рунете конструкторов сайтов.
- Есть бесплатный тариф — подойдёт для экспериментов, обучения и адаптации на платформе. От платного отличается ограничением в некоторых функциях. Например, невозможно подключить свой домен.
Что будет в этом уроке
Мы сделаем простой симпатичный сайт-визитку для дизайнера с помощью набора готовых блоков, научимся настраивать их под себя, редактировать контент и создавать внутренние (якорные) ссылки. В конце урока у вас получится вот такая красота.

Что такое сайт-визитка
Сайт-визитка рассказывает о вас: кто вы, что умеете, чем можете быть полезны и как с вами связаться. Чтобы создать такой сайт и опубликовать его в интернете, не нужно быть программистом или дизайнером — если работали в MS Word или Google Docs и у вас есть вкус, то всё получится.
Регистрируемся в «Тильде»
Здесь всё просто: заходим на сайт tilda.cc, нажимаем справа вверху кнопку «Регистрация», вводим имя и email, придумываем пароль, переходим в сервис.

Скриншот: Skillbox Media
Создаём проект
После регистрации платформа сразу же предлагает создать свой первый сайт. Вводим название сайта — например, My site — и жмём «Создать».

Скриншот: Skillbox Media
«Тильда» автоматически создаёт ссылку, по которой сайт будет доступен в интернете.

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

Скриншот: Skillbox Media
Можно выбрать готовый шаблон или начать с пустой страницы и самостоятельно наполнить её нужными блоками. Мы кликаем на пустой шаблон и переходим к редактированию.
Вот так выглядит рабочее пространство, с которым предстоит работать.

Скриншот: Skillbox Media
Что надо подготовить до создания сайта
Перед тем как выбирать и расставлять симпатичные блоки, нам надо определиться, чего мы хотим от сайта и какая у него будет структура. Без этого нет смысла верстать — получится каша.
Составим список блоков, которые нам понадобятся. Например:
- «Услуги»;
- «Об авторе»;
- «Преимущества»;
- «Портфолио»;
- «Контакты»;
- «Шапка» — меню, логотип;
- «Подвал» — ссылки на соцсети.
Теперь по этим блокам надо подготовить всю информацию: текст, изображения, примерные цвета сайта. Всё остальное сделаем уже в «Тильде».
Рекомендую подумать 5−10 минут, набросать схему своего первого сайта, найти материалы и только после этого двигаться дальше.
Знакомимся с шаблонами блоков
Обычно самый первый (верхний) блок сайта — это меню. Нажимаем на кнопку «Все блоки» и слева выбираем пункт «Меню».

Скриншот: Skillbox Media
Откроется блок с множеством шаблонов меню, однако на бесплатном тарифе можно использовать лишь несколько. Неактивные блоки выглядят немного бледнее, и у них есть иконка замка.

Скриншот: Skillbox Media
Если вы не можете сразу найти нужный вам блок, используйте поиск по библиотеке блоков — его иконка вверху.
Подключаем весь функционал «Тильды»
Чтобы оценить всю мощь «Тильды» и попробовать все функции и блоки, необходимо использовать платный тариф — после регистрации он даётся бесплатно на 14 дней. Чтобы подключить, переходим на главную страницу проекта.

Скриншот: Skillbox Media
А теперь в нижней части страницы нажимаем кнопку «Тарифы и оплата».

Скриншот: Skillbox Media
Подтверждаем активацию тарифа и читаем описание.

Скриншот: Skillbox Media
Если вы всё сделали правильно, появится такое окно.

Скриншот: Skillbox Media
Поздравляю! Теперь вы две недели можете тестировать все функции «Тильды».
Меняем заголовок страницы сайта
По умолчанию название страницы из пустого шаблона — Blank page. Давайте поменяем его на Main page, то есть «Главная страница». Снова в верхнем левом углу выбираем пункт меню «Мои сайты» и переходим на страницу проекта. Нам понадобится раздел «Редактировать сайт».

Скриншот: Skillbox Media
На открывшейся странице выбираем созданный нами шаблон Blank page, переходим в пункт «Настройки». Вместо заголовка Blank page вписываем Main page и сохраняем изменения.

Скриншот: Skillbox Media
Добавляем и редактируем блоки
Блоки — основа «Тильды». Сайт создаётся из них, как домик, средневековый замок или пожарная машина в LEGO. Блоки этого конструктора сайтов собраны в большой «Библиотеке» — здесь можно находить нужные через поисковый запрос или смотреть по тематическим категориям.
Добавляем блок «Меню»
Нажимаем на Main page и возвращаемся к редактированию шаблона. В пункте «Меню» выбираем шаблон «Фиксированное меню», обозначенный как ME204 (в сером овале в левом нижнем углу). Раньше он был недоступен — ведь мы пользовались бесплатным тарифом.

Скриншот: Skillbox Media
Нажимаем и смотрим, что получилось.

Скриншот: Skillbox Media
Мы добавили на страницу блок с меню, теперь нужно поменять его пункты и вписать своё название вместо CompanyName. Для этого наводим курсор мыши на блок и нажимаем появившуюся кнопку «Контент».

Скриншот: Skillbox Media
Добавляем нужные пункты меню, а рядом проставляем внутренние (якорные) ссылки через знак # — это нужно для удобного перехода между блоками главной страницы сайта. У нас на странице пока ещё ничего нет. Но мы заранее подготовили список блоков — вот из них и сделаем якорные ссылки. Портфолио станет #portfolio, услуги — #services, и далее по такому же принципу.

Скриншот: Skillbox Media
Ниже в поле «Заголовок» вводим название сайта. Оно будет отображаться в левой стороне нашего шаблона меню.

Скриншот: Skillbox Media
Здесь же (в самом низу) надо удалить языковые версии Ru и En — они не понадобятся.

Скриншот: Skillbox Media
Мы настроили первый блок — «Меню». Теперь добавим следующий блок «Обо мне».
Добавляем блок «Обо мне»
Новые блоки добавляются очень просто: наводим курсор на блок, под которым нужно создать новый, и нажимаем плюсик.

Скриншот: Skillbox Media

Скриншот: Skillbox Media
Теперь нужно отредактировать контент: поменять фоновое изображение и фотографию на свои, а также поправить заголовок и описание блока.

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

Скриншот: Skillbox Media
Промежуточный результат.

Скриншот: Skillbox Media
Предпросмотр помогает тестировать и выявлять ошибки ещё на этапе создания сайта. Например, проблему с меню: его не видно на изображении, хотя при компоновке блоков всё было отлично.

Скриншот: Skillbox Media
Нужно вернуться в режим редактирования. Жмём в левом нижнем углу соответствующую кнопку.

Скриншот: Skillbox Media
Редактируем фон меню
Чтобы настроить цвет и прозрачность блока, надо нажать не кнопку «Контент», а «Настройки».

Скриншот: Skillbox Media
Меняем цвет фона меню на белый и сохраняемся. Кстати, когда вы видите на плашке выбора цвета серо-белые квадратики в шахматном порядке, это и означает прозрачность.

Скриншот: Skillbox Media
Проверяем результат в режиме предпросмотра.

Скриншот: Skillbox Media
Всё отлично, фон стал белым, меню и логотип видны — двигаемся дальше.
Добавляем блок«Услуги»
Прежде чем добавить блок «Услуги», вспомним про ссылки в пунктах меню. Чтобы они заработали, перед каждым разделом сайта мы поставим блок «Якорная ссылка». Как обычно, нажимаем плюсик под предыдущим блоком, только на этот раз ищем в разделе «Другое».

Скриншот: Skillbox Media
Через кнопку «Контент» добавляем ссылку «services» (обратите внимание — здесь мы не указываем знак # перед меткой), сохраняем изменения и закрываем окно.

Скриншот: Skillbox Media
Теперь добавляем блок «Услуги» — у «Тильды» есть аккуратные стандартные варианты в одноимённом разделе библиотеки блоков. Выбираем самый первый шаблон — SV101.

Скриншот: Skillbox Media
Вот так выглядит выбранный шаблон «Услуги».

Скриншот: Skillbox Media
Если по каким-то причинам шаблон вам не нравится, его легко можно поменять не удаляя. Для этого наведите на него курсор и кликните по номеру шаблона — слева от кнопки «Настройки».

Скриншот: Skillbox Media
В появившемся списке выбираем нужный шаблон. Если к этому времени вы уже добавили в блок свой контент — текст, фото и тому подобное, — надо включить опцию «Сохранение контента при переключении».

Скриншот: Skillbox Media
Редактируем блок «Услуги»
Меняем текст, а также меняем цвет заголовков в карточках на красный. Текст и картинки редактируются через кнопку «Контент», а внешний вид заголовков и текста — через «Настройки», пункт «Типографика»:
- Сделаем шрифт заголовков красным с помощью опции «Заголовок: Цвет».
- Сделаем шрифт полужирным с помощью опции «Насыщенность» — Bold.
Вот что получилось.

Скриншот: Skillbox Media
Копирование и перемещение блоков
После настройки блока «Услуги» добавим якорную ссылку для следующего блока — «Портфолио». На этот раз не будем обращаться к библиотеке блоков, а продублируем готовый, просто заменив название ссылки.

Скриншот: Skillbox Media
Готово! Мы продублировали блок и поменяли имя ссылки, а теперь стрелочкой «Вниз» в правом углу блока передвинем его на нужное место.

Скриншот: Skillbox Media
Добавляем блок «Портфолио»
Следующий на очереди блок — «Портфолио». Для него возьмём шаблон из категории «Галерея» под номером GL10 — «Слайдер картинок».

Скриншот: Skillbox Media
Редактируем блок «Портфолио»
Для начала поменяем цвет фона на тёмный в разделе «Настройки» — чередование контрастных блоков помогает им не сливаться в одно длинное скучное полотно. Теперь добавляем картинки, а затем в режиме предпросмотра проверяем, всё ли отображается корректно и работают ли якорные ссылки.

Скриншот: Skillbox Media
Выглядит неплохо, якорные ссылки работают.
Редактируем блок «Преимущества»
Добавляем блок под номером FR403 из категории «Преимущества» (не забываем якорную ссылку).

Скриншот: Skillbox Media
Правим текст, вставляем свои цифры, меняем заголовок и описание, настраиваем шрифты.

Скриншот: Skillbox Media
Редактируем блок «Контакты»
Остался последний блок — «Контакты». Он же по совместительству будет подвалом (футером). Для контактов тоже есть свой раздел в библиотеке блоков под номером CN104. Выбираем его.

Скриншот: Skillbox Media
Добавляем свою информацию, при необходимости настраиваем внешний вид, фон, отступы и так далее.
Тестируем сайт
Всё почти готово. Включаем режим предпросмотра и тестируем свой сайт. Рекомендую проверить, как он отображается на компьютере и на мобильном устройстве, прокликать все ссылки, понажимать на все кнопки.

Скриншот: Skillbox Media
Проект готов, осталось только опубликовать его в сети.
Публикуем сайт
По умолчанию платформа присваивает новому сайту буквенно-цифровой адрес вида project1234567.tilda.ws. Но мы хотим красивую ссылку, поэтому нажимаем на My site в левом верхнем углу редактора.
Кстати, «Тильда» сразу сохраняет все наши изменения, поэтому на странице нет кнопки «Сохранить». Если пропал интернет или вы случайно закрыли вкладку, никакие данные не потеряются. А на сайт они попадут только после нажатия кнопки «Опубликовать» — так что можно смело экспериментировать с содержанием страницы.

Скриншот: Skillbox Media
Переходим в настройки сайта.

Скриншот: Skillbox Media
Указываем нужное название ссылки шдля публикации. Она будет отображаться в адресной строке браузера, и по ней можно зайти на ваш сайт. Мы не привязывали к сайту свой домен второго уровня (например, skillbox.ru), поэтому сделаем красивый домен третьего уровня. В моём примере ссылка на сайт будет webisamurai.tilda.ws.

Скриншот: Skillbox Media
Ссылка готова. Сохраняем изменения и публикуем сайт. Опубликовать его можно двумя способами:
1. Со страницы шаблонов проекта — с помощью кнопки «Публиковать».

Скриншот: Skillbox Media
2. В режиме редактирования страницы — с помощью кнопки «Опубликовать».

Скриншот: Skillbox Media
Публикуем. Ждём подтверждения от «Тильды».

Скриншот: Skillbox Media
Переходим по ссылке, нажав на кнопку «Открыть страницу», и проверяем, всё ли работает. Обращаем внимание на адресную строку браузера.

Скриншот: Skillbox Media
Всё работает корректно, а по ссылке можно посмотреть результат этого урока.
Вот так собирается боевой сайт-визитка дизайнера с красивой ссылкой, которую можно прислать заказчику или приложить к резюме.
Заключение
В этом уроке мы разобрали, как сделать сайт из готовых блоков. Но это только начало. С помощью конструктора «Тильда» можно собрать интернет-магазин, подключить систему оплаты и аналитику, настроить SEO, интегрировать CRM, собирать заявки, верстать и отправлять красивые email-рассылки. Эта платформа освобождает веб-дизайнеров от рутины, давая простые и мощные инструменты для творчества.