Осваиваем конструктор 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.
Вот так выглядит выбранный шаблон «Услуги».
Если по каким-то причинам шаблон вам не нравится, его легко можно поменять не удаляя. Для этого наведите на него курсор и кликните по номеру шаблона — слева от кнопки «Настройки».
В появившемся списке выбираем нужный шаблон. Если к этому времени вы уже добавили в блок свой контент — текст, фото и тому подобное, — надо включить опцию «Сохранение контента при переключении».
Редактируем блок «Услуги»
Меняем текст, а также меняем цвет заголовков в карточках на красный. Текст и картинки редактируются через кнопку «Контент», а внешний вид заголовков и текста — через «Настройки», пункт «Типографика»:
- Сделаем шрифт заголовков красным с помощью опции «Заголовок: Цвет».
- Сделаем шрифт полужирным с помощью опции «Насыщенность» — Bold.
Вот что получилось.
Копирование и перемещение блоков
После настройки блока «Услуги» добавим якорную ссылку для следующего блока — «Портфолио». На этот раз не будем обращаться к библиотеке блоков, а продублируем готовый, просто заменив название ссылки.
Готово! Мы продублировали блок и поменяли имя ссылки, а теперь стрелочкой «Вниз» в правом углу блока передвинем его на нужное место.
Добавляем блок «Портфолио»
Следующий на очереди блок — «Портфолио». Для него возьмём шаблон из категории «Галерея» под номером GL10 — «Слайдер картинок».
Редактируем блок «Портфолио»
Для начала поменяем цвет фона на тёмный в разделе «Настройки» — чередование контрастных блоков помогает им не сливаться в одно длинное скучное полотно. Теперь добавляем картинки, а затем в режиме предпросмотра проверяем, всё ли отображается корректно и работают ли якорные ссылки.
Выглядит неплохо, якорные ссылки работают.
Редактируем блок «Преимущества»
Добавляем блок под номером FR403 из категории «Преимущества» (не забываем якорную ссылку).
Правим текст, вставляем свои цифры, меняем заголовок и описание, настраиваем шрифты.
Редактируем блок «Контакты»
Остался последний блок — «Контакты». Он же по совместительству будет подвалом (футером). Для контактов тоже есть свой раздел в библиотеке блоков под номером CN104. Выбираем его.
Добавляем свою информацию, при необходимости настраиваем внешний вид, фон, отступы и так далее.
Тестируем сайт
Всё почти готово. Включаем режим предпросмотра и тестируем свой сайт. Рекомендую проверить, как он отображается на компьютере и на мобильном устройстве, прокликать все ссылки, понажимать на все кнопки.
Проект готов, осталось только опубликовать его в сети.
Публикуем сайт
По умолчанию платформа присваивает новому сайту буквенно-цифровой адрес вида project1234567.tilda.ws. Но мы хотим красивую ссылку, поэтому нажимаем на My site в левом верхнем углу редактора.
Кстати, «Тильда» сразу сохраняет все наши изменения, поэтому на странице нет кнопки «Сохранить». Если пропал интернет или вы случайно закрыли вкладку, никакие данные не потеряются. А на сайт они попадут только после нажатия кнопки «Опубликовать» — так что можно смело экспериментировать с содержанием страницы.
Переходим в настройки сайта.
Указываем нужное название ссылки шдля публикации. Она будет отображаться в адресной строке браузера, и по ней можно зайти на ваш сайт. Мы не привязывали к сайту свой домен второго уровня (например, skillbox.ru), поэтому сделаем красивый домен третьего уровня. В моём примере ссылка на сайт будет webisamurai.tilda.ws.
Ссылка готова. Сохраняем изменения и публикуем сайт. Опубликовать его можно двумя способами:
1. Со страницы шаблонов проекта — с помощью кнопки «Публиковать».
2. В режиме редактирования страницы — с помощью кнопки «Опубликовать».
Публикуем. Ждём подтверждения от «Тильды».
Переходим по ссылке, нажав на кнопку «Открыть страницу», и проверяем, всё ли работает. Обращаем внимание на адресную строку браузера.
Всё работает корректно, а по ссылке можно посмотреть результат этого урока.
Вот так собирается боевой сайт-визитка дизайнера с красивой ссылкой, которую можно прислать заказчику или приложить к резюме.
Заключение
В этом уроке мы разобрали, как сделать сайт из готовых блоков. Но это только начало. С помощью конструктора «Тильда» можно собрать интернет-магазин, подключить систему оплаты и аналитику, настроить SEO, интегрировать CRM, собирать заявки, верстать и отправлять красивые email-рассылки. Эта платформа освобождает веб-дизайнеров от рутины, давая простые и мощные инструменты для творчества.
Курс
Дизайнер сайтов на Tilda
Вы освоите новую профессию и научитесь делать красивые и функциональные сайты, которые решают вопросы бизнеса, даже если никогда не занимались дизайном. Вы узнаете, как готовить сайт к запуску, находить клиентов и работать с аналитикой. В течение курса вы создадите три рабочих проекта и сможете использовать их в портфолио.