​Как создать сайт для детского сада

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

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

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

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

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

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

Создать свою подборку можно не выходят из Гугла, но лучше воспользоваться специальными сервисами, где люди выкладывают свои работы. Например, это может быть Behance, Pinterest или Land-book.

Если вы еще не понимаете, о чем идет речь, то давайте покажу на примере:

  1. Переходим в один из сервисов, например Pinterest, и вводим в поисковую строку название сайта из той сферы, которая нам нужна. Нам нужен сайт для детского сада – так и напишем. В результате перед нами отображаются все доступные варианты. Их не так много, но есть на что посмотреть. Откроем первый в списке макет.Как подобрать референсы для сайта
  2. Перед нами макет сайта для частного детского садика. Что это нам дает? Мы можем подхватить цвета и использовать их, посмотреть, какие используются блоки, а также изучить разные дизайнерские решения. На основе этого мы можем проработать структуру будущего сайта, понять, что в нем должно быть.

Пример сайта для частного детского сада

Стоит понимать, что референс – это не панацея, а лишь возможность посмотреть, как решается та или иная задача. Мы можем подглядеть, что у других, но наш сайт может требовать совершенно другого. Возможно, нам не нужны все разделы, что есть в макете, и это необходимо учитывать. Здесь следует подходить комплексно – изучить 3-5 референсов, на их основе составить структуру сайта и определиться с цветовой схемой.

Сохраните несколько референсов в одном месте, изучите их, продумайте структуру сайта и приступайте к разработке. 

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Шаг 2: Создаем сайт для детского сада

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

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

За все это сервис требует символической платы – 197 рублей в месяц. Также есть ознакомительный период, включающий в себя весь функционал. Длится он 10 дней, чего вполне хватит, чтобы понять – подходит вам данная платформа или нет.

Как же выглядит и работает Craftum, давайте разбирать на примере создания сайта для детского сада.

  1. Первым делом проходим несложную регистрацию – открываем главную страницу сервиса и жмем на кнопку «Создать сайт бесплатно».Конструктор сайтов Craftum официальная страница
  2. В отобразившемся окне вводим свое имя, почту и жмем на «Создать сайт». Регистрация аккаунта в конструкторе Craftum
  3. Регистрация успешно пройдена. В ходе этой инструкции я расскажу, как сделать сайт на основе одного из шаблонов. Для этого вводим соответствующий запрос в поисковое поле и под готовым шаблоном жмем на «Выбрать шаблон».Craftum шаблон сайта для частного садика
  4. Мы попадаем в окно редактирования сайта. Нам нужно лишь отредактировать все блоки под себя, и сайт готов. При необходимости мы можем добавлять новые разделы и удалять старые. Давайте начнем с первого экрана, который является лицом веб-страницы и должен завлекать пользователей. Поменяем на нем фоновое изображение, текст… В общем, переделаем его полностью под себя. Чтобы изменить заголовок и подзаголовок, достаточно кликнуть по ним и ввести свои данные. Как в Craftum изменить заголовок
  5. Добавив необходимую информацию, получаем:Как в конструкторе Craftum сделать сайт для частного садика
  6. Теперь давайте немного поменяем дизайн текста – для этого в верхнем левом углу нажимаем на кнопку «Настроить». Как в Craftum настроить блок
  7. Мы попадаем в настройки блока, где можно выполнять различные манипуляции с дизайном, контентом и формой. Нас интересует вкладка «Дизайн» и раздел «Заголовок». Давайте поменяем шрифт на Nunito, установим для него размер 60px, а также сделаем отступ в 40px снизу.Как изменить заголовок в конструкторе Craftum
  8. Также давайте подредактируем подзаголовок: выберем 18px, установим шрифт Montserrat, а межстрочный интервал – 160%. Также уберем прозрачность – сделать это можно справа от выбора цвета.  Делать это необязательно, но если вы хотите сделать шаблон более уникальным, то лучше поиграть с этими параметрами.Настройка текста в конструкторе Craftum
  9. Теперь давайте поменяем фоновое изображение. Взять качественные и бесплатные фотографии вы можете на Unsplash, также можно найти фото в разделе «Галерея», который находится в параметрах фона. Перейти в него можно следующим образом: «Настройки» -> «Дизайн» -> «Блок» -> «Настроить».Как изменить фон блока в Craftum
  10. В отобразившемся окне мы можем сделать фон сплошной заливкой, добавить в него видеозапись, а также загрузить фото из галереи либо добавить свое. Давайте поставим собственное фоновое изображение – для этого перейдем в раздел «Фото» и удалим старое изображение.Как поменять фон блока в Craftum
  11. Теперь можно загрузить свое – достаточно переместить его в нужное поле.Как в Craftum поставить свое изображение на фон
  12. Обратите внимание, что здесь также разрешено настроить параметры фильтра фотографии – можете поиграться с этими настройками, чтобы добиться нужного результата, а я оставлю все так, как есть. В завершение нужно будет нажать на кнопку «Использовать в блоке».Как поменять фон блока Craftum
  13. В результате у меня получился вот такой первый экран:Первый экран для детского сада
  14. Давайте также настроим форму и зададим новый цвет кнопки. Для этого возвращаемся в настройки блока, переходим в «Дизайн» и раскрываем блок «Форма», откуда нажимаем на шестеренку, расположенную справа от «Кнопка».Как изменить кнопку в конструкторе Craftum
  15. Перед нами открываются параметры кнопки. Поменяем здесь шрифт – укажем тот, что используется в подзаголовке. В качестве цвета я возьму оранжевый, который отлично впишется в дизайн сайта для детского сада. Дополнительно я отключу бордюр на кнопке.Как поменять кнопку в конструкторе Craftum
  16. На этом с первым экраном закончено. Добавлю еще немного про форму: все заявки будут уходить на почту, которую вы укажете в настройках блока в разделе «Форма».Как сделать сайт для детского сада самому
  17. Теперь вы знаете, как работать с шаблонными блоками в Craftum. Аналогичным образом следует преобразовать и шапку сайта. Сейчас она розовая и совсем не сочетается с новым цветом. Следует его поменять на тот же, что и в форме. Также разрешено изменить логотип и пункты меню – все аналогично тому, что мы делали выше.Как поменять контент блока в Craftum
  18. Хочу рассказать об одной особенности – якорных ссылках, которые помогают пользователям перемещаться по сайту. Они привязываются к пунктам меню и блокам на странице. Например, с помощью якорной ссылки по клику на пункт меню «О нас» можно быстро перейти в нужный раздел. Настроить это довольно просто: необходимо перейти в настройки шапки и напротив пункта нажать на кнопку «Настроить».Как изменить пункты меню в шапке Craftum
  19. Затем в «Тип ссылка» указать «Якорная ссылка», а ниже выбрать «Блок». Пока что у нас нет подходящих блоков, только те, что были даны по умолчанию. Но когда все будет готово, обязательно вернитесь сюда.Как сделать якорную ссылку в Craftum
  20. Так же, как и с первым экраном, я поработал с шапкой. Теперь эти блоки выглядят в едином стиле.Как сделать сайт для частного детского сайта самому
  21. И напоследок я хочу рассказать об особенности конструктора – блоке, в котором можно управлять элементами. Как вы могли заметить, в шаблонных блоках можно лишь незначительно изменять контент, тогда как «Дизайн блок» позволяет делать все что угодно. Чтобы его добавить, необходимо между блоками нажать на кнопку «Добавить еще блок».Как добавить новый блок Craftum
  22. Затем в самом низу выбрать «Дизайн блок».Как в Craftum добавить дизайн блок
  23. Таким образом, мы сразу же попадаем в редактирование блока. Давайте в этом блоке расскажем о нашем садике. Добавим текст и справа от него прикрепим фотографию коллектива, но для начала удалим элементы и очистим фон – для этого поочередно все выделяем и нажимаем «Delete». Как очистить дизайн блок в Craftum
  24. Удалить фоновое изображение можно в настройках блока – для этого выдвигаем меню и в разделе «Фон» нажимаем на крестик.Как в дизайн блоке очистить фон Craftum
  25. Предварительно давайте включим сетку – она поможет нам выравнивать элементы. Включить ее можно в верхнем правом углу.Как в конструкторе Craftum включить сетку
  26. Далее добавим текст – сделать этом можно через плюсик в верхнем левом углу.Как в дизайн блоке добавить текст
  27. Зададим ему названием «О нас» – для этого достаточно кликнуть по тексту двойным щелчком мыши и переименовать его. Также укажем для него шрифт Montserrat, который мы уже использовали, сделаем его немного меньше (18px), а также выровняем по левому краю. Жирность сделаем обычной, другие параметры оставим на месте. Настройка текста в дизайн блоке Craftum
  28. Аналогичным образом я добавил другой текстовый контент и подредактировал его. Также я сделал цвет надписи «О нас» тем же, что мы использовали выше. Все это без проблем меняется в настройках.Создание сайта в дизайн блоке Craftum
  29. Теперь давайте добавим фотографию коллектива. Для этого нажимаем в верхнем левом углу на плюсик и выбираем «Фотография». Как в дизайн блоке добавить фотографию Craftum
  30. У нас появляется дополнительный блок, кликнув по которому можно загрузить картинку.Как добавить картинку в дизайн блоке Craftum
  31. Разместив фотографию по правому краю и немного переместив текстовый контент, я получаю следующий результат:Как работать в дизайн блоке Craftum
  32. Мы можем добавлять различные элементы: не только фотографии и текст, но и фигуры, видео, кнопки и даже HTML-код. 
  33. На этом блок «О нас» готов, но давайте еще уменьшим высоту блока, так как снизу у нас сейчас огромный отступ. Для этого перейдем в настройки и установим значение в 700px.Как изменить высоту блока в дизайн блоке Craftum
  34. Обратите внимание на верхнюю часть блока – там расположены элементы в виде монитора, телефона и планшета. Эти элементы нужны для адаптации блока под разные устройства. В отличие от шаблонов, дизайн-блок необходимо самостоятельно подстраивать под телефоны и планшеты, чтобы сайт везде выглядел корректно. Сложного в этом ничего нет, достаточно выровнять элементы по сетке и при необходимости их уменьшить.Как адаптировать дизайн блок в Craftum
  35. После всех манипуляций закрываем блок через верхнюю правую кнопку и идем дальше. Вот такими небольшими шагами прорабатывается весь сайт. Если вам нужно будет продублировать, переместить или удалить какой-либо блок, то просто наведите на него курсор мыши и в правой верхней части воспользуйтесь нужной кнопкой.Как удалить блок в Craftum
  36. Как только сайт будет готов, его необходимо опубликовать. Сделать этом можно с помощью соответствующей кнопки вверху справа.Как опубликовать сайт в конструкторе Craftum
  37. В результате появится ссылка, по которой ваш сайт будет доступен.Публикация сайта в Craftum

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

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

А у меня на этом все, спасибо за внимание!

источник

Related Posts
AllEscortAllEscort