Сайт детского садика – это отличная возможность рассказать родителям о новостях учреждения или показать малышам видеозаписи и фотографии утренников и других мероприятий. А если речь идет о частном детском садике, то сайт в таком случае служит хорошим местом для привлечения клиентов – родителей, которые ищут для своего ребенка подходящий вариант.
На таком ресурсе можно разместить блоки с преимуществами, показать садик изнутри, рассказать, почему у вас хорошо, и так далее. Таким образом, доверие и спокойствие родителей за своего ребенка увеличится в разы.
В сегодняшней статье я расскажу, как своими руками, без привлечения каких-либо специалистов, сделать сайт для детского сада.
Шаг 1: Подбираем референсы
Подбор референсов – это одна из важнейших задач для дизайнера перед разработкой сайта. Будь вы новичок или профессионал с 10-летним опытом – вы все равно будете придерживаться такого подхода.
Референсы помогают в определении общей структуры сайта, стиля и цветовой палитры. Выглядят они как простые изображения – макеты сайтов или готовые решения, на которые можно опираться.
Создать свою подборку можно не выходят из Гугла, но лучше воспользоваться специальными сервисами, где люди выкладывают свои работы. Например, это может быть Behance, Pinterest или Land-book.
Если вы еще не понимаете, о чем идет речь, то давайте покажу на примере:
- Переходим в один из сервисов, например Pinterest, и вводим в поисковую строку название сайта из той сферы, которая нам нужна. Нам нужен сайт для детского сада – так и напишем. В результате перед нами отображаются все доступные варианты. Их не так много, но есть на что посмотреть. Откроем первый в списке макет.
- Перед нами макет сайта для частного детского садика. Что это нам дает? Мы можем подхватить цвета и использовать их, посмотреть, какие используются блоки, а также изучить разные дизайнерские решения. На основе этого мы можем проработать структуру будущего сайта, понять, что в нем должно быть.
Стоит понимать, что референс – это не панацея, а лишь возможность посмотреть, как решается та или иная задача. Мы можем подглядеть, что у других, но наш сайт может требовать совершенно другого. Возможно, нам не нужны все разделы, что есть в макете, и это необходимо учитывать. Здесь следует подходить комплексно – изучить 3-5 референсов, на их основе составить структуру сайта и определиться с цветовой схемой.
Сохраните несколько референсов в одном месте, изучите их, продумайте структуру сайта и приступайте к разработке.
Шаг 2: Создаем сайт для детского сада
В создании сайта для детского сада нет ничего сложного. Если раньше для этого потребовалась бы целая команда специалистов, то сегодня его можно сделать своими руками. В этом нам помогают специальные сервисы – конструкторы сайтов. С их помощью можно всего за день создать, запустить и начать продвигать сайт.
Один из таких сервисов – Craftum. В нем доступна огромная библиотека готовых шаблонов, которые можно «подогнать» под себя, но также есть набор функций, позволяющий создавать уникальные решения. Например, дизайн-блок позволяет работать с разделами сайта так, как захочется – можно добавлять неограниченное количество элементов, перемещать и изменять их. Но это, конечно же, еще не все – есть много других интересных фишек, которые были придуманы для того, чтобы пользователи могли легко, быстро и, главное, качественно разрабатывать страницы.
За все это сервис требует символической платы – 197 рублей в месяц. Также есть ознакомительный период, включающий в себя весь функционал. Длится он 10 дней, чего вполне хватит, чтобы понять – подходит вам данная платформа или нет.
Как же выглядит и работает Craftum, давайте разбирать на примере создания сайта для детского сада.
- Первым делом проходим несложную регистрацию – открываем главную страницу сервиса и жмем на кнопку «Создать сайт бесплатно».
- В отобразившемся окне вводим свое имя, почту и жмем на «Создать сайт».
- Регистрация успешно пройдена. В ходе этой инструкции я расскажу, как сделать сайт на основе одного из шаблонов. Для этого вводим соответствующий запрос в поисковое поле и под готовым шаблоном жмем на «Выбрать шаблон».
- Мы попадаем в окно редактирования сайта. Нам нужно лишь отредактировать все блоки под себя, и сайт готов. При необходимости мы можем добавлять новые разделы и удалять старые. Давайте начнем с первого экрана, который является лицом веб-страницы и должен завлекать пользователей. Поменяем на нем фоновое изображение, текст… В общем, переделаем его полностью под себя. Чтобы изменить заголовок и подзаголовок, достаточно кликнуть по ним и ввести свои данные.
- Добавив необходимую информацию, получаем:
- Теперь давайте немного поменяем дизайн текста – для этого в верхнем левом углу нажимаем на кнопку «Настроить».
- Мы попадаем в настройки блока, где можно выполнять различные манипуляции с дизайном, контентом и формой. Нас интересует вкладка «Дизайн» и раздел «Заголовок». Давайте поменяем шрифт на Nunito, установим для него размер 60px, а также сделаем отступ в 40px снизу.
- Также давайте подредактируем подзаголовок: выберем 18px, установим шрифт Montserrat, а межстрочный интервал – 160%. Также уберем прозрачность – сделать это можно справа от выбора цвета. Делать это необязательно, но если вы хотите сделать шаблон более уникальным, то лучше поиграть с этими параметрами.
- Теперь давайте поменяем фоновое изображение. Взять качественные и бесплатные фотографии вы можете на Unsplash, также можно найти фото в разделе «Галерея», который находится в параметрах фона. Перейти в него можно следующим образом: «Настройки» -> «Дизайн» -> «Блок» -> «Настроить».
- В отобразившемся окне мы можем сделать фон сплошной заливкой, добавить в него видеозапись, а также загрузить фото из галереи либо добавить свое. Давайте поставим собственное фоновое изображение – для этого перейдем в раздел «Фото» и удалим старое изображение.
- Теперь можно загрузить свое – достаточно переместить его в нужное поле.
- Обратите внимание, что здесь также разрешено настроить параметры фильтра фотографии – можете поиграться с этими настройками, чтобы добиться нужного результата, а я оставлю все так, как есть. В завершение нужно будет нажать на кнопку «Использовать в блоке».
- В результате у меня получился вот такой первый экран:
- Давайте также настроим форму и зададим новый цвет кнопки. Для этого возвращаемся в настройки блока, переходим в «Дизайн» и раскрываем блок «Форма», откуда нажимаем на шестеренку, расположенную справа от «Кнопка».
- Перед нами открываются параметры кнопки. Поменяем здесь шрифт – укажем тот, что используется в подзаголовке. В качестве цвета я возьму оранжевый, который отлично впишется в дизайн сайта для детского сада. Дополнительно я отключу бордюр на кнопке.
- На этом с первым экраном закончено. Добавлю еще немного про форму: все заявки будут уходить на почту, которую вы укажете в настройках блока в разделе «Форма».
- Теперь вы знаете, как работать с шаблонными блоками в Craftum. Аналогичным образом следует преобразовать и шапку сайта. Сейчас она розовая и совсем не сочетается с новым цветом. Следует его поменять на тот же, что и в форме. Также разрешено изменить логотип и пункты меню – все аналогично тому, что мы делали выше.
- Хочу рассказать об одной особенности – якорных ссылках, которые помогают пользователям перемещаться по сайту. Они привязываются к пунктам меню и блокам на странице. Например, с помощью якорной ссылки по клику на пункт меню «О нас» можно быстро перейти в нужный раздел. Настроить это довольно просто: необходимо перейти в настройки шапки и напротив пункта нажать на кнопку «Настроить».
- Затем в «Тип ссылка» указать «Якорная ссылка», а ниже выбрать «Блок». Пока что у нас нет подходящих блоков, только те, что были даны по умолчанию. Но когда все будет готово, обязательно вернитесь сюда.
- Так же, как и с первым экраном, я поработал с шапкой. Теперь эти блоки выглядят в едином стиле.
- И напоследок я хочу рассказать об особенности конструктора – блоке, в котором можно управлять элементами. Как вы могли заметить, в шаблонных блоках можно лишь незначительно изменять контент, тогда как «Дизайн блок» позволяет делать все что угодно. Чтобы его добавить, необходимо между блоками нажать на кнопку «Добавить еще блок».
- Затем в самом низу выбрать «Дизайн блок».
- Таким образом, мы сразу же попадаем в редактирование блока. Давайте в этом блоке расскажем о нашем садике. Добавим текст и справа от него прикрепим фотографию коллектива, но для начала удалим элементы и очистим фон – для этого поочередно все выделяем и нажимаем «Delete».
- Удалить фоновое изображение можно в настройках блока – для этого выдвигаем меню и в разделе «Фон» нажимаем на крестик.
- Предварительно давайте включим сетку – она поможет нам выравнивать элементы. Включить ее можно в верхнем правом углу.
- Далее добавим текст – сделать этом можно через плюсик в верхнем левом углу.
- Зададим ему названием «О нас» – для этого достаточно кликнуть по тексту двойным щелчком мыши и переименовать его. Также укажем для него шрифт Montserrat, который мы уже использовали, сделаем его немного меньше (18px), а также выровняем по левому краю. Жирность сделаем обычной, другие параметры оставим на месте.
- Аналогичным образом я добавил другой текстовый контент и подредактировал его. Также я сделал цвет надписи «О нас» тем же, что мы использовали выше. Все это без проблем меняется в настройках.
- Теперь давайте добавим фотографию коллектива. Для этого нажимаем в верхнем левом углу на плюсик и выбираем «Фотография».
- У нас появляется дополнительный блок, кликнув по которому можно загрузить картинку.
- Разместив фотографию по правому краю и немного переместив текстовый контент, я получаю следующий результат:
- Мы можем добавлять различные элементы: не только фотографии и текст, но и фигуры, видео, кнопки и даже HTML-код.
- На этом блок «О нас» готов, но давайте еще уменьшим высоту блока, так как снизу у нас сейчас огромный отступ. Для этого перейдем в настройки и установим значение в 700px.
- Обратите внимание на верхнюю часть блока – там расположены элементы в виде монитора, телефона и планшета. Эти элементы нужны для адаптации блока под разные устройства. В отличие от шаблонов, дизайн-блок необходимо самостоятельно подстраивать под телефоны и планшеты, чтобы сайт везде выглядел корректно. Сложного в этом ничего нет, достаточно выровнять элементы по сетке и при необходимости их уменьшить.
- После всех манипуляций закрываем блок через верхнюю правую кнопку и идем дальше. Вот такими небольшими шагами прорабатывается весь сайт. Если вам нужно будет продублировать, переместить или удалить какой-либо блок, то просто наведите на него курсор мыши и в правой верхней части воспользуйтесь нужной кнопкой.
- Как только сайт будет готов, его необходимо опубликовать. Сделать этом можно с помощью соответствующей кнопки вверху справа.
- В результате появится ссылка, по которой ваш сайт будет доступен.
Поздравляю, сайт готов! Надеюсь, что все получилось, и теперь о вашем детском саде узнает больше людей.
Обратите внимание, что сайт публикуется на тестовом домене от Timeweb. Если вы хотите, чтобы ваше доменное имя было уникальным, его необходимо купить и привязать к странице. Все это вы можете сделать в настройках конструктора Craftum.
А у меня на этом все, спасибо за внимание!
Источник:
