Как создать сайт для учителя

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

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

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

Шаг 1: Подбираем референсы

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

Для подборки референсов существует множество различных сервисов. Вот некоторые из них:

• Pinterest,
• Behance,
• Dribbble.

Давайте рассмотрим, как ими пользоваться. Возьмем для примера сервис Behance:

1. Открываем главную страницу сайта и вводим необходимый запрос. Скажем, «Сайт для учителя английского языка». 
2. В результате мы попадаем в подборку по запросу. Возьмем в качестве примера первый попавшийся результат.
3. После выбора макета перед нами отобразится его полная версия. Обратите внимание на его цвета – синий и красный. Это хороший вариант для использования, так как люди привыкли ассоциировать английский именно с этими цветами. Также обратите внимание и на другие элементы, в частности на УТП (уникальное торговое предложение) – это вся текстовая информация, расположенная слева. Возьмите ее за основу и попробуйте либо перефразировать, либо сделать что-нибудь подобное.

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

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

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

Шаг 2: Создаем сайт для учителя своими руками

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

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

Давайте приступим:

1. Первым делом пройдем быструю регистрацию – для этого переходим на официальную страницу конструктора и выбираем «Создать сайт бесплатно».
2. Заполняем поля своими контактными данными и жмем на «Создать сайт».
2. В результате мы попадаем на страницу выбора шаблонов. В разделе «Образование» есть несколько подходящих шаблонов, но я же хочу усложнить нам задачу, дабы освоить интерфейс конструктора в полной мере. Давайте возьмем шаблон «Бухгалтерские услуги» (раздел «Финансы и страхование»).
5. После выбора шаблона мы попадаем в окно его редактирования. Здесь все очень просто – достаточно кликнуть по элементу и внести изменения. Давайте начнем с самого верха сайта, шапки: переименуем логотип и пропишем свой номер телефона.
6. Следующим этапом поменяем УТП, о котором мы говорили при разборе референса. Например, в заголовке можно написать «Здравствуйте, дорогие ученики». Под заголовком можно раскрыть информацию с помощью абзаца «На этом сайте вы сможете найти всю необходимую информацию о ваших занятиях: домашние работы, оценки и другие материалы».
7. Теперь давайте поменяем шрифт: установим дополнительному тексту шрифт Open Sans, сделаем его обычным, а размер выставим в районе 18px. В заголовке сделаем следующие настройки: шрифт Inter, полужирный, размер 46px. Это необязательные действия, но с помощью них мы немного улучшили читабельность текста, а также сделали акцент на фотографии.
8. Теперь давайте поменяем картинку, чтобы ученики сразу видели, к кому они заходят на сайт. Для этого кликаем по исходной картинке, после чего отобразится дополнительное окно, в которое нужно загрузить новую фотографию. Делаем это, затем обрезаем картинку до нужных размеров, в завершение жмем «Вставить изображение».
9. Первый экран практически готов. Осталось изменить названия кнопок – сделаем это только для первой, с другой разберемся чуть позже. Например, дадим ей название «Посмотреть ДЗ» – по клику на нее будет открываться другая страница с домашним заданием для учеников.
9. 
10. Теперь перейдем ко второй кнопке – в нашем примере она не нужна, так как достаточно одной для перехода к ДЗ. Если же вам нужно направить пользователя еще куда-то, то можете настроить дополнительную кнопку для своих целей. Мы же уберем ее через окно «Настроить».
11. В разделе «Кнопка #2» просто стираем весь текст, после чего кнопка тут же пропадает.
12. В этом же окне давайте настроим отображаемую кнопку. Установим на нее ссылку, которая будет вести к домашнему заданию. Например, домашнее задание можно разместить на Google Drive. Для этого откроем раздел «Кнопка #1» и в подразделе «Адрес» пропишем необходимый URL.
13. На этом разработка первого экрана завершена. Давайте посмотрим, как он будет выглядеть на мобильных устройствах – для этого в верхней части экрана нажимаем на иконку смартфона.
14. Аналогичным образом прорабатываются последующие блоки страницы. Их наполнение зависит от ваших целей. Если вы создаете сайт только для того, чтобы выкладывать домашние работы, то можно ограничиться и одной страницей. Если же сайт создается для предоставления ваших услуг, например, репетиторства, тогда точно потребуется добавить несколько блоков: «Услуги», «Стоимость» и так далее. После того как все действия будут завершены, останется опубликовать сайт – для этого в верхнем правом углу есть специальная кнопка.
15. В отобразившемся окне изменяем название страницы и в правой части задаем адрес, затем жмем «Опубликовать».

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

Полезные советы

• Чтобы добавить новый блок, необходимо навести курсор мыши между блоками, а затем нажать на плюсик.
• Чтобы удалить блок, необходимо навести курсор мыши на блок и нажать на иконку в виде корзины.
• Блок с отправкой заявки, как правило, не настроен. Если его не настроить, то все поступающие заявки через сайт будут уходить в никуда. Решить это довольно просто – необходимо прописать свою почту в настройках. Для этого следует выбрать нужную форму и навести на нее курсор, затем нажать «Настроить». В разделе «Форма» выбрать «Отправка данных с формы» и прописать адрес электронной почты.
• Изменение всех цветовых схем и прочего дизайна происходит в разделе «Дизайн».

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