Дизайн
#Руководства

Осваиваем конструктор Tilda: делаем сайт-визитку с нуля

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

 vlada_maestro / shutterstock

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

Почему именно «Тильда»:

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

Что будет в этом уроке

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

Скриншот: Skillbox Media

Что такое сайт-визитка

Сайт-визитка рассказывает о вас: кто вы, что умеете, чем можете быть полезны и как с вами связаться. Чтобы создать такой сайт и опубликовать его в интернете, не нужно быть программистом или дизайнером — если работали в 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-рассылки. Эта платформа освобождает веб-дизайнеров от рутины, давая простые и мощные инструменты для творчества.

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

Участвовать
Научитесь: Дизайнер сайтов на Tilda Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована