Найти в Дзене

Дизайн сайта на Геткурсе

Как обычно длинный пост с разбором, начнем?)
Оглавление

Как обычно длинный пост с разбором, начнем?)

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

На данный момент есть большое количество конструкторов сайтов которые позволяют за короткое время создать и запустить свою интернет-страничку. И много преподавателей и тренеров выбрали для себя такой сервис как Геткурс.

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

Главный баннер сайта
Главный баннер сайта

И это почти правда.

Если вы тренер и у вас есть авторские курсы (так как данный ресурс нацелен в целом на курсы, однако я занимаюсь дизайном для различных видов деятельности) то скорее всего вам нужно будет делать сайты.

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

Итак заказав всего один сайт можно сделать еще несколько бесплатно.

Давайте разберем что данный конструктор позволяет сделать

Верхняя навигация

Лого и пару кнопочек летающих по странице
Лого и пару кнопочек летающих по странице

«Ну это везде просто делается» тут так не работает пытаясь добавить лого картинкой его вечно уносит в пиксели, какое бы разрешение не поставил, единственный вариант который я нашел это svg код картинки закинутый вместо пункта меню(да да, этот тип читает код и правильно отображает его)

Место вставки кода с выравниванием по левую сторону
Место вставки кода с выравниванием по левую сторону

И если в версии для ПК кнопки можно добавить стандартные то для мобилки история повеселее.

Тут проблема в том что, для того чтоб меню при скроле оставалось необходимо его сделать всплывающим и прилипающим, но тогда оно 100% будет в бургере, я смог решить это только таким образом, на фото ниже

Тут все, логотип SVG кодом, кнопки HTML кодом(прописано в блоке Компания)
Тут все, логотип SVG кодом, кнопки HTML кодом(прописано в блоке Компания)
Тут у нас стили на языке CSS, как выглядят кнопки, как ведут себя при наведении, и общий вид меню так же описан, некоторые элементы удалены, некоторые перекрашены, для того чтоб адекватно отображаться на мобильной версии сайта.
Тут у нас стили на языке CSS, как выглядят кнопки, как ведут себя при наведении, и общий вид меню так же описан, некоторые элементы удалены, некоторые перекрашены, для того чтоб адекватно отображаться на мобильной версии сайта.

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

-7

Картинка+текст

-8

На данном экране нам больше интересны пункты списка, стандартный стиль у них не особо привлекательный, но мы его прокачали стилем

Короткий код позволяет сделать из некрасивого списка, список покрасивей)
Короткий код позволяет сделать из некрасивого списка, список покрасивей)

Для того чтоб статья сильно не затягивалась разберем самые интересные элементы

Заголовок с раскрывающимся текстом

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

Ниже несколько элементов как они выглядят на готовом сайте.

Выпадающее видео
Выпадающее видео
Тут у нас под кнопкой 2 колонки текста с картинками
Тут у нас под кнопкой 2 колонки текста с картинками

И вот их внутренности, как вы могли бы догадаться это HTML код

Это для видео
Это для видео
А это текст с картинками
А это текст с картинками

Заключение

Сделали сайт для онлайн школы вождения посмотреть поклацать можно по сслыке

https://lesson.vozhdenium.com/intv

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

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

Если вас интересует эта тема подробнее пишите в телеграм
t.me/Vladislav_Grigorenko или в поиске телеграма @Vladislav_Grigorenko

Другие мои статьи по дизайну мой Дзен канал

Есть вопросы? Спроси в комментариях!

Также у меня появился сайт, на котором больше информации обо мне, заходи смотреть!
vladislavgrigorenko.ru