Привет, друзья! Прямо на ваших глазах я соберу сайт: оформлю прототип в гуглодоке, выберу подходящий шаблон в конструкторе и загружу контент на главную страницу. Не потрачу на всё это ни копейки, а выглядеть будет — просто агонь 🔥 И прототип вам подарю, чтобы вы тоже так могли.
Вот тут я рассказал как эксперту откликаться на вакансию, а сейчас покажу, как можно просто, быстро и бесплатно сделать сайт-портфолио. И не какой попало, а представительный и с адаптивной версткой.
Пишем прототип и выбираем шаблон
Сперва надо решить, сколько на сайте будет страниц и какой контент. Поскольку у меня сайт-визитка — он будет одностраничным. Позже можно будет прикрутить другие страницы: например с сертификатами и благодарственными письмами клиентов.
Что должно быть на главной странице сайта-визитки эксперта:
— кто я такой;
— какие услуги оказываю;
— отзывы (если найдутся);
— собственно портфолио;
— контакты или обратная форма.
Выбираем шаблон в Тильде. На бесплатном тарифе доступны самые простенькие шаблоны, но нам их хватит за глаза. Я выбрал тот, в котором есть нужные мне блоки: главный экран с фоткой, описание услуг, портфолио, прайс, отзывы и контакты.
Блоки в шаблоне можно удалять, менять местами и использовать «не по назначению». Например, если честных отзывов у вас нет — не надо брехать и сочинять, удалите этот блок да и всё.
Шрифты, цвет и расположение элементов менять крайне не советую — может получиться шляпа. Всё-таки шаблон делали профессионалы 😊
Пишем прототип в гуглдоке. Шаблон при этом можно использовать как подсказку: смотреть на количество текста и столбцов в блоках. На первом экране заголовок в две строки, а текст в четыре. Если я напишу в два раза больше текста, получится говно.
Картинки нужно подбирать с тем же соотношением сторон, что и в шаблоне. Например, если я возьму для сайта вертикальную фотку, первый экран вытянется в высоту и пропорции поедут.
Если в прототипе есть колонки — надо написать в них одинаковое количество текста, иначе всё будет криво-косо 💩
Еще один дельный совет: напишите текст, отложите на пару часов, а потом посмотрите на него свежим взглядом. Так вы лучше увидите ошибки и мелкие шероховатости.
Регаемся на Тильде и собираем сайт
Заходим на страницу регистрации, вписываем имя, почту и придумываем пароль. На бесплатном тарифе можно сделать один сайт размером до 50 Мб с доменным именем tilda.ws. А уж если вы хотите красивый домен, настройки СЕО, аналитику и побольше места на диске — извольте покупать платные тарифы.
Теперь нужно создать первый проект и страницу. А затем — выбрать шаблон из списка. Смотрите, как это делается, я вам гифку записал.
Когда создаешь первый проект — конструктор предлагает обучающие инструкции. Я их пролистал, а вы посмотрите если нужно
Переносим на страницу тексты и иллюстрации из прототипа. Шаблон устанавливается на сайт вместе с демо-контентом — подсказками и картинками. В процессе мы всё это заменим, но можно подглядывать на пропорции и общий вид сайта.
Всё просто: кликаем на элемент, копируем и вставляем. Сначала текст, потом картинки. Их у нас — одна 😄
Все шаблоны Тильды адаптивные — подстраиваются под размер экрана
Редактируем шапку сайта. Я вписал в меню якори: при нажатии страница будет пролистываться до конкретного блока. Если потом сайт станет многостраничным, можно будет дописать меню или переназначить его пункты на новые странички.
Публикуем сайт. Тыкаем на кнопку «Опубликовать» в панели управления, переходим по ссылке и смотрим, что получилось. Обязательно оцените, как выглядит сайт в разных браузерах и на разных устройствах — например, смартфонах и планшетах. Убедитесь, что всё ок и ничего не поехало.
У меня получился вот такой сайтик:
Какава красота 😍
Ребзя, я потратил на этот сайт и статью три часа. Если бы не статья — наверное, справился бы за два.
Я уверен, что вы справитесь не хуже, а может и лучше меня! И если вы давно собирались сделать себе сайт визитку, но всё как-то откладывали и ждали знак, то вот он:
Пока писал — даже забыл, что я не копирайтер, а транскрибатор и искусственный интеллект! Чего не сделаешь ради друзей! 😉
С нетерпением жду ваши видео и аудиофайлы — все расшифрую в лучшем виде! Всем обнимашки, мои золотые! 🤗