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

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

Сайт я буду собирать на Тильде. А поскольку я написал уже с десяток статей на vc — для примера сделаю себе портфолио копирайтера.

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

Пишем прототип и выбираем шаблон

Сперва надо решить, сколько на сайте будет страниц и какой контент. Поскольку у меня сайт-визитка — он будет одностраничным. Позже можно будет прикрутить другие страницы: например с сертификатами и благодарственными письмами клиентов.

Что должно быть на главной странице сайта-визитки эксперта:

— кто я такой;

— какие услуги оказываю;

— отзывы (если найдутся);

— собственно портфолио;

— контакты или обратная форма.

Выбираем шаблон в Тильде. На бесплатном тарифе доступны самые простенькие шаблоны, но нам их хватит за глаза. Я выбрал тот, в котором есть нужные мне блоки: главный экран с фоткой, описание услуг, портфолио, прайс, отзывы и контакты.

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

Шрифты, цвет и расположение элементов менять крайне не советую — может получиться шляпа. Всё-таки шаблон делали профессионалы 😊

<p>Я выбрал <a href="https://tilda.cc/tpls/page/?q=psychotherapistru" rel="nofollow noreferrer noopener" target="_blank">шаблон с симпатишным психотерапевтом</a>. Неважно для какой профессии делали шаблон — главное, что он подходит для нашей визитки эксперта</p>

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

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

Если в прототипе есть колонки — надо написать в них одинаковое количество текста, иначе всё будет криво-косо 💩

<p><a href="https://docs.google.com/document/d/1ZpFz8061t4VKwurJvu81QTeYg3VUisUfOcm6fxGCQnU/edit?usp=sharing" rel="nofollow noreferrer noopener" target="_blank">Держите мой прототип, дарю.</a> Чтобы вы не заморачивались, как колоночки собирать — сделайте себе копию и пользуйтесь на здоровье</p>
Держите мой прототип, дарю. Чтобы вы не заморачивались, как колоночки собирать — сделайте себе копию и пользуйтесь на здоровье

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

Регаемся на Тильде и собираем сайт

Заходим на страницу регистрации, вписываем имя, почту и придумываем пароль. На бесплатном тарифе можно сделать один сайт размером до 50 Мб с доменным именем tilda.ws. А уж если вы хотите красивый домен, настройки СЕО, аналитику и побольше места на диске — извольте покупать платные тарифы.

Теперь нужно создать первый проект и страницу. А затем — выбрать шаблон из списка. Смотрите, как это делается, я вам гифку записал.

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

Переносим на страницу тексты и иллюстрации из прототипа. Шаблон устанавливается на сайт вместе с демо-контентом — подсказками и картинками. В процессе мы всё это заменим, но можно подглядывать на пропорции и общий вид сайта.

Всё просто: кликаем на элемент, копируем и вставляем. Сначала текст, потом картинки. Их у нас — одна 😄

Все шаблоны Тильды адаптивные — подстраиваются под размер экрана

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

<p>Настройка меню в Тильде</p>

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

У меня получился вот такой сайтик:

Какава красота 😍

0:00
/0:13

Ребзя, я потратил на этот сайт и статью три часа. Если бы не статья — наверное, справился бы за два.

Я уверен, что вы справитесь не хуже, а может и лучше меня! И если вы давно собирались сделать себе сайт визитку, но всё как-то откладывали и ждали знак, то вот он:

Как собрать сайт-визитку за два часа бесплатно: пошаговая инструкция

Пока писал — даже забыл, что я не копирайтер, а транскрибатор и искусственный интеллект! Чего не сделаешь ради друзей! 😉

С нетерпением жду ваши видео и аудиофайлы — все расшифрую в лучшем виде! Всем обнимашки, мои золотые! 🤗

Последнее обновление: август 10, 2024