Агентство
интернет-маркетинга

 

Как создать портфолио на Tilda

19.07.2023

Сложность: новичок

10 мин.

1 166

Как создать портфолио на Tilda

Лучший способ доказать свою профессиональность предоставить работодателю работы. Правильное оформление своего портфолио – это залог того, что вы получите хорошую должность и выгодные заказы. Для чего нужно портфолио? Что туда должно входить? Как создать портфолио онлайн бесплатно? На все эти вопросы мы ответим в статье.

Что такое портфолио? Это работы собранные вместе, которые были сделаны на протяжении всей трудовой деятельности специалиста. Стоит отметить, что в portfolio, обычно входят лучшие проекты, на которые было потрачено много времени и в итоге достигнуты высокие результаты. К примеру, повышение продаж на сайте. В графике следует показать, как удалось поднять интернет-магазин с нуля.

график визиты

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

Как создать портфолио новичку? Для начала выберем подходящий движок. Существует много разных сервисов и CMS систем, мы остановим свой выбор на Tilda. Этот конструктор сайтов позволяет разрабатывать веб-сайты любой сложности. Он прост в управлении и его меню на русском языке. Основной недостаток – многие опции закрыты и доступны только по подписке, но в нашем случае они не нужны, создать портфолио онлайн бесплатно можно из готовых шаблонов. Для начала составим структуру.

Из чего должен состоять сайт-портфолио? Структура.

Перечислим, пункты. 

1. Название, обложка – при заходе на сайт, первое, что видит посетитель это шапка. Установить ее можно загрузив картинку с компьютера или указав ссылку на изображение в интернете. Название отражает суть вашей профессии, поэтому следует написать, чем вы занимаетесь. Например “Раскрутка сайтов, аналитика, управление проектами”, также следует указать имя. Другая информация – это краткое описание вашей деятельности, сюда обычно включают: опыт, место работы и т.д.

2. Услуги – оформляется в виде карточек с описанием. Добавляются картинки и пишется к ним краткий текст.

3. Примеры проектов – за все время их может быть много. Однако не все следует добавлять. Разместить нужно только те, которые были сложными и выглядят качественно. Если вы новичок, который только освоил профессию и не знает что делать, то самое время начинать нарабатывать свое портфолио. Сделать это можно двумя способами, выполнять заказы на сайте фрилансера не связываясь с заказчиком, все это нужно для практики или второй вариант посмотреть разные проекты в интернете и попытаться их повторить. 

4. Прайс-лист – оформляется в качестве списка, перечисляется перечень услуг, срок выполнения и цена. 

где создать портфолио

5. Контакты. Даже идеальный сайт-портфолио требует в наличии обратную связь, чтобы клиент смог связаться и обсудить условия сотрудничества. Поэтому в самом конце рекомендуются добавить все возможные способы обратной связи: почтовый ящик, телеграм, скайп и т.д.

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

Как создать портфолио онлайн бесплатно на тильда?

Перейдем к процессу создания на tilda. Если нет личного кабинета, нужно его создать, регистрируемся на tilda.cc. Процесс регистрации всего в несколько шагов. Для примера мы создадим портфолио разработчика веб-сайтов. Войдя в кабинет, нажмите кнопку “создать новый сайт” и придумайте название.

где сделать портфолио

Переходим, щелкнув по названию, в нашем случае “Профессиональная разработка веб-сайтов”, нажимаем кнопку “Создать новую страницу”. Откроется каталог. 

Где создать портфолио? Какой шаблон подобрать? Здесь подойдет “Универсальная страница”. Особенность страницы заключается в том, что половина блоков уже присутствует, остается их только отредактировать. 

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

Спрячем те контейнеры, которые нам без надобности. Все вариации блоков имеют уникальное название, например “Заголовок. Оффер”, это TL02. Чтобы скрыть наведите мышкой на блок и нажмите кнопку переключателя. 

как составить портфолио

Просмотрите всю страницу и скройте следующие контейнеры.

  • TL02
  • IM01
  • AB601
  • BF302

При публикации сайта в интернете все эти блоки будут невидимыми. Создадим обложку, щелкните “плюс”. Обратите внимание на “логотип” им мы займемся в конце.

обложка tilda

Из списка выберем CR01, изначально там установлена картинка “горы”.  

Мы загрузим подходящую тему из интернета. Нас интересуют веб-разработка. В поисковике можно найти много разных картинок по этой тематике. Подбираем нужный размер. Рекомендуется 1500x900 пикселей. 

Нажимаем “Контент” (кнопка появится автоматически при наведении мышкой на шапку CR01). Откроется панель с опциями, щелкаем “Загрузить файл” и выбираем файл, скаченный из интернета, в завершении нажимаем “сохранить”. Помимо картинки следует изменить текст. Сделать это можно двумя путями в настройках контента или же отредактировать блок напрямую. Вот пример готовой шапки.

шапка tilda

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

настройки шапки tilda

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

типографика tilda

Оформим раздел услуг. Для начала создадим его. Идентификатор “SV201” (Колонка с иконками).

услуги tilda

По умолчанию 6 карточек, уменьшим до четырех. В блоке SV201 переходим в “контент” и раздел “Карточки”. Уберем последние две кнопкой “Удалить”. Не забываем “сохранить”.

карточки tilda

Текст с иконками расположен три в ряд. Переходим в “Настройки” SV201 и меняем опции “Кол-во карточек в ряду”. В раскрывающемся списке устанавливаем 2 и сохраняемся.

как создать портфолио новичку

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

Чтобы загрузить значок, щелкните по картинке у первого элемента, появится всплывающее окно, перетащите на него изображение которое хотите загрузить. Потом повторите это действия над остальными иконками. Рекомендуемый размер для загрузки 150x150 пикселей и формат svg, но, мы использовали png(с прозрачным фоном), он тоже подходит. 

По умолчанию текст заголовка в шапке “What We Do”. Напишем другой “Услуги”. Поменяем текст и в остальных полях. Придумаем описание.

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

установка размера шрифта

Поэкспериментируйте и со стилями шрифта, например, измените стандартный TildaSans на Arial. 

Ниже предоставлен пример раздела услуг портфолио веб-разработчика. Мы использовали размер 20 пикселей, стиль Georgia. 

пример услуг веб-разработчика 

Продолжаем разбирать тему как создать портфолио новичку? Следующий пункт “проекты”. 

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

Сначала перенесем TE100 вверх и расположим его под “Услугами (SV201)”. Несколько раз нажмите стрелку пока блок, не окажется в нужном месте 

пример проекты 

Заголовок “Наши услуги” переименуем в “Мои работы”. Под оглавлением уберем описание оно здесь не к чему. Начинайте редактировать карточку номер 1, для этого переходим в “контент” и заполняем данные. Первый сайт с фильмами. Вы можете выбрать другую тему. Нам потребуется заполнить: заголовок, текст (краткое описание) и ссылку на источник. 

Установите флажок “в новом окне”, это позволит открывать сайты в новых вкладках. Пример заполнения данных.

пример редактирование карточек tilda 

Добавьте остальные карточки. Увеличьте их число до 5 или 7 штук. Если  пока нечего добавлять, то создайте несколько проектов, это будет началом вашего карьерного роста. При получении реальных заказов, вы обновите portfolio, заменив старые работы на новые. 

пример карточки проектов 

Мои навыки – если речь заходит о программировании, то пользователям неважно на каком языке написана программа. Однако при трудоустройстве в крупную компанию, требуется указать языки программирования. Обычно такая информация входит в резюме, но дополнительным плюсом станет, если включить свои навыки на сайте-портфолио.  Воспользуемся блоком AB201 (Заголовок описание и три изображения), поместим его после “Мои работы”. Пошаговые действия на скриншоте. 

как создать портфолио

Отредактируем контейнер, придумаем текст и загрузим картинки. 

Блок AB201 позволяет загрузить только три картинки, если нужно больше создайте дубликат. 

блок навыки tilda 

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

навыки tilda 

Исправим это, поменяв отступы. Для этого перейдите в настройки первого объекта. Установите отступы снизу 0.5 line и сохраните.

настройки отступов 

У дубликата настройте “отступы сверху” 0 line. Получится раздел.

навыки тильда

“Обо мне”. В портфолио, где добавлена личная информация об авторе, веб-страница вызывает больше доверия, чем ее отсутствие. Поэтому нужно добавить раздел “Обо мне”. 

настройка блока об авторе

В кружочек загрузите свою аватарку и напишите текст.

пример блока об авторе

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

Как добавить прайс-лист в tilda? 

Прайс-лист будет состоять из трех колонок. В нашем макете уже установлен подходящий блок, под идентификатором FR202.

блок прайс-лист

Перейдите в “Контент”, отредактируйте данные.

настройка прайс-листа tilda

  1. Удалите иконку.
  2. Укажите сроки выполнения задания.
  3. Используйте визуальный редактор и маркированный список, чтобы придать тексту аккуратный вид.

После всех изменений сохранитесь. Текст в колонке размещен по центру. Выровняйте его по левому краю. Выделите список и во встроенном редакторе нажмите “Выровнять текст влево”.

выравнивания текста tilda

Цену переместите вправо (по правому краю). Ниже предоставлено готовое решение.

выравнивания текста тильда

Обратная связь – в “Универсальном шаблоне”, который используется для оформления portfolio, присутствует блок “Наши контакты” (CN501N). Здесь уже добавлен номер телефона, почта и форма для отправки писем. 

В бесплатной версии форма не работает, придется поменять на рубрику “Контакты с заголовком”.    

контакты с заголовком tilda

Отредактируем через “Контент”. Здесь мало полей, только “заголовок” и “Текст”.

настройка контактов tilda

Дополнительные опции, которые можно настроить для раздела “контакты”, это “Ссылки на соц.сети”. В этой вкладке предлагается добавить новые или отредактировать существующие пункты “Социальных сетей”.

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

пример меню навигации tilda

В меню навигации откроем “Контент” добавим еще ссылки и сохраним.

настройка меню tilda

Справа от списка ссылок, есть поля для ввода url-адресов, там находится три опции.

  • В новом окне
  • Выбрать страницу
  • Выбрать блок

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

1. Выбрать блок 

2. Мышкой указываем контейнер. 

В поле для ссылок появится ключевое слова со знаком “#”. 

как настроить якорные ссылки tilda

Проверяем, как все работает. Следующий шаг, нужно изменить две вкладки: почистить “Логотип” от текста и “Кнопки”, там тоже надо затереть текст. Изменим настройки:

Пункты меню:

настройка пункты меню tilda

Фон меню:

настройка цвета фона меню tilda

Меню навигации – ссылка-якорь будет перемещать пользователя на определенный участок сайта. Для плавного перехода, нужно добавить “скролл”.

как настроить плавный переход в tilda

 Последний шаг, чтобы разместить страничку в интернете, нажимаем кнопку “опубликовать”.

создать портфолио онлайн бесплатно

Портфолио для других профессий?

  • Фотограф – существует много разных направлений, некоторые фотографируют пейзажи, другие свадьбы. Фото в портфолио должны соответствовать навыкам фотографа. Если дело касается снимков для свадьбы, значит, стену сайта следует украсить высококачественными фотоснимками со свадьбы. Если профессия заключается в том, чтобы убирать дефекты с фото, в таком случае список работ следует пополнить фото “до” и “после”. Чтобы пользователь визуально увидел изменения.
  • Дизайнер – показ фотографий помещений, в которых видно как оформлены офисы и квартиры, также можно добавить проекты дизайнерского стиля для ландшафта и придомовых территорий. Веб-дизайнер занимается внешним видом сайтов, в этом случае скриншоты нужно сопровождать ссылками.
  • Программист – разместите разработанные вами коды, для этого укажите ссылки на репозитории github. Расскажите, в каких последних проектах вы принимали участие и опишите программы, которые вы создали.
  • Маркетолог – заказчик должен увидеть графики и таблицы. Это послужит наглядной демонстрацией, того какую выгоду получит клиент от сотрудничество с фрилансером.  

Дополнительные инструменты для портфолио

  • Видео – если рассказать о своей деятельности в видеоролике, то шанс найти выгодные заказы увеличивается. Рекомендуем прочитать статью о том, как добавить видео на тильду, если есть сомнения насчет этого функционала. 
  • Галерея – можно сделать карусель, где будет объясняться процесс работы. Такой стиль похож на презентацию в PowerPoint.
  • Команда – когда дело касается группы или организации, где работают несколько человек, то здесь уместно поместить вкладку с именами сотрудников, занимаемой должности и описанием. В библиотеке для этого существует целый раздел. 

блок команды tilda

  • Преимущества – создавая страницу веб-мастера, мы обошлись без этого блока. Однако он может оказаться полезным, если требуется перечислить сильные стороны компании. 

блок преимущества

  • Отзывы – прежде чем сделать заказ или покупку, большинство пользователей хотят убедиться в качестве товара и читают отзывы. В бесплатной версии tilda этот раздел полностью закрыт. Но есть альтернативные решения. Нарисовать отзывы в Zero Block или воспользоваться Текстовыми блоками ->Прямая речь.

текстовый блок

Еще вариант использовать другой макет “Универсальная страница компании”. Там отзывы включены по умолчанию.

Шаблоны для портфолио в tilda

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

В Тильде существует пробный период, 2 недели бесплатно и открывается доступ к конструктору на 100%. Но прежде чем воспользоваться данным предложением рекомендуется сначала поработать с готовыми макетами, освоиться и уже потом, приступать к созданию проекта с чистого листа.

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

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

шаблоны для портфолио

Как составить портфолио – полезные советы

  1. Одна профессия, один портфель – если много довелось где работать и сменить несколько профессий, то для каждой нужно создавать свое portfolio. Не стоит пытаться запихнуть все проекты в одну страницу, так как заказчик или работодатель может запутаться. Для каждой деятельность должна быть отдельная страничка. 
  2. Интернет отличное место для поиска заказчиков. Но даже идеальное portfolio требует продвижения. Поэтому разместите ссылку на свой сайт-портфолио во всех социальных сетях.
  3. Обновляйтесь чаще – регулярное обновление портфеля, дает понять, что вы постоянно развиваетесь. Делайте это хотя бы 2 раза в месяц 
  4. Лучшие проекты – если вы участвовали в разработке сложных приложений или написали полезную программу, то пополните ими свое portfolio. Первые работы напротив, следует убрать, здесь подразумеваются задания в начале карьеры и во времена учебы в университете. Так как исполнение этих проектов обычно  низкого качества. Заказчики могут усомниться в квалификации специалиста. 
  5. Ставьте защиту – электронные копии это хорошо, можно быстро распространять свое портфолио по социальным сетям и почтовым адресам. Однако, может случиться так, что недобросовестный пользователь присвоит ваши труды указав свое имя, чтобы этого избежать, ставьте защиту. Способы существуют разные от водяных знаков, до специальных скриптов. 

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

Готовы пообщаться?Готовы пообщаться?Готовы пообщаться?

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кейсы