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

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

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

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

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

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

Степан Степанов

Автор статей по дизайну. В веб-дизайн пришёл в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил вёрстку. Время от времени публикует переводы на Хабре.


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

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

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

Сайт-визитка рассказывает о вас: кто вы, что умеете, чем можете быть полезны и как с вами связаться. Чтобы создать такой сайт и опубликовать его в интернете, не нужно быть программистом или дизайнером — если работали в MS Word или Google Docs и у вас есть вкус, то всё получится.

Регистрируемся в «Тильде»

Здесь всё просто: заходим на сайт tilda.cc, нажимаем справа вверху кнопку «Регистрация», вводим имя и email, придумываем пароль, переходим в сервис.

Страница регистрации

Создаём проект

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

Название сайта — используется только внутри «Тильды»

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

Позже вместо автоматически присвоенного имени в настройках сайта можно будет указать своё

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

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

Нажимаем на кнопку «Создать новую страницу» и переходим к выбору шаблонов.

Страница выбора шаблонов

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

Вот так выглядит рабочее пространство, с которым предстоит работать.

Рабочее пространство пустого шаблона

Что надо подготовить до создания сайта

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

Составим список блоков, которые нам понадобятся. Например:

  • «Услуги»;
  • «Об авторе»;
  • «Преимущества»;
  • «Портфолио»;
  • «Контакты»;
  • «Шапка» — меню, логотип;
  • «Подвал» — ссылки на соцсети.

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

Рекомендую подумать 5−10 минут, набросать схему своего первого сайта, найти материалы и только после этого двигаться дальше.

Знакомимся с шаблонами блоков

Обычно самый первый (верхний) блок сайта — это меню. Нажимаем на кнопку «Все блоки» и слева выбираем пункт «Меню».

Выбираем категорию меню

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

Так выглядят недоступные блоки меню на бесплатном тарифе

Если вы не можете сразу найти нужный вам блок, используйте поиск по библиотеке блоков — его иконка вверху.

Подключаем весь функционал «Тильды»

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

Переход на главную страницу сайта

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

Кнопка «Тарифы и оплата»

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

Активируем тариф

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

Активируем тариф

Поздравляю! Теперь вы две недели можете тестировать все функции «Тильды».

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

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

Кнопка настройки сайта

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

Меняем заголовок шаблона главной страницы и сохраняем изменения

Добавляем и редактируем блоки

Блоки — основа «Тильды». Сайт создаётся из них, как домик, средневековый замок или пожарная машина в LEGO. Блоки этого конструктора сайтов собраны в большой «Библиотеке» — здесь можно находить нужные через поисковый запрос или смотреть по тематическим категориям.

Добавляем блок «Меню»

Нажимаем на Main page и возвращаемся к редактированию шаблона. В пункте «Меню» выбираем шаблон «Фиксированное меню», обозначенный как ME204 (в сером овале в левом нижнем углу). Раньше он был недоступен — ведь мы пользовались бесплатным тарифом.

После активации нового тарифа стали доступны все шаблоны

Нажимаем и смотрим, что получилось.

Установка блока меню

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

Кнопка редактирования контента

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

Меняем пункты меню и прописываем якорные ссылки

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

Меняем логотип

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

Убираем языковые версии шаблона с помощью кнопки «Контент»

Мы настроили первый блок — «Меню». Теперь добавим следующий блок «Обо мне».

Добавляем блок «Обо мне»

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

Добавление блока с помощью «+»

Слева появится знакомая нам библиотека блоков. Находим пункт «Обложка» и выбираем обложку с фотографией автора с номером CR31.

Выбираем обложку

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

Редактируем контент блока «Обо мне»

Режим предпросмотра

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

Включаем режим предпросмотра

Промежуточный результат.

Смотрим результат в новой вкладке

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

Найден баг — меню в режиме редактирования и предпросмотра отображается по-разному

Дело в том, что при использовании шаблонов из категории «Обложка» «Тильда» размещает меню не перед блоком с фотографией, а вторым слоем — прямо на него. А меню по умолчанию не белое, а прозрачное. Поэтому, оказавшись над фото, чёрный текст на прозрачном фоне слился с тёмными элементами изображения. Это легко исправить в настройках меню.

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

Кнопка возврата в режим редактирования

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

Чтобы настроить цвет и прозрачность блока, надо нажать не кнопку «Контент», а «Настройки».

Заходим в настройки и устанавливаем цвет фона меню

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

Меняем цвет блока меню на белый

Проверяем результат в режиме предпросмотра.

Меню теперь видно

Всё отлично, фон стал белым, меню и логотип видны — двигаемся дальше.

Добавляем блок«Услуги»

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

Устанавливаем блок якорной ссылки

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

Редактируем якорную ссылку

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

Выбираем блок «Услуги»

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

Шаблон «Услуги» на странице проекта

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

Быстрая замена блока услуги на другой

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

Переключаем флажок сохранения контента при выборе блока

Редактируем блок «Услуги»

Меняем текст, а также меняем цвет заголовков в карточках на красный. Текст и картинки редактируются через кнопку «Контент», а внешний вид заголовков и текста — через «Настройки», пункт «Типографика»:

  1. Сделаем шрифт заголовков красным с помощью опции «Заголовок: Цвет».
  2. Сделаем шрифт полужирным с помощью опции «Насыщенность» — Bold.

Вот что получилось.

Меняем текст и добавляем акцент на заголовки карточек

Копирование и перемещение блоков

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

Дублируем блок якорной ссылки

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

Перемещаем блок якорной ссылки вниз с помощью стрелок

Добавляем блок «Портфолио»

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

Выбираем слайдер для блока «Портфолио»

Редактируем блок «Портфолио»

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

Тестируем якорные ссылки и готовые блоки

Выглядит неплохо, якорные ссылки работают.

Редактируем блок «Преимущества»

Добавляем блок под номером FR403 из категории «Преимущества» (не забываем якорную ссылку).

Добавляем блок «Преимущества»

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

Готовый блок «Преимущества»

Редактируем блок «Контакты»

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

Блок «Контакты» совмещаем с подвалом

Добавляем свою информацию, при необходимости настраиваем внешний вид, фон, отступы и так далее.

Тестируем сайт

Всё почти готово. Включаем режим предпросмотра и тестируем свой сайт. Рекомендую проверить, как он отображается на компьютере и на мобильном устройстве, прокликать все ссылки, понажимать на все кнопки.

Финальный результат

Проект готов, осталось только опубликовать его в сети.

Публикуем сайт

По умолчанию платформа присваивает новому сайту буквенно-цифровой адрес вида project1234567.tilda.ws. Но мы хотим красивую ссылку, поэтому нажимаем на My site в левом верхнем углу редактора.

Кстати, «Тильда» сразу сохраняет все наши изменения, поэтому на странице нет кнопки «Сохранить». Если пропал интернет или вы случайно закрыли вкладку, никакие данные не потеряются. А на сайт они попадут только после нажатия кнопки «Опубликовать» — так что можно смело экспериментировать с содержанием страницы.

Страница шаблонов сайта

Переходим в настройки сайта.

Кнопка «Настройки сайта»

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

Меняем имя ссылки субдомена

Ссылка готова. Сохраняем изменения и публикуем сайт. Опубликовать его можно двумя способами:

1. Со страницы шаблонов проекта — с помощью кнопки «Публиковать».

Публикация сайта со страницы рабочих шаблонов

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

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

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

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

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

Проверяем ссылку в адресной строке

Всё работает корректно, а по ссылке можно посмотреть результат этого урока.

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

Заключение

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

Курс

Дизайнер сайтов на Tilda


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

Понравилась статья?
Да