Дизайн и вёрстка GetCourse | Tilda
479 subscribers
158 photos
40 videos
8 links
Оформление интерфейса школы на GetCourse [css | html | js]
Сайты на GetCourse @MarinaParfirova
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Всем привет 🤗

Поставила на днях виджет в школу, решила показать и вам😊

По сути это таймер, который берет данные из карточки покупки, визуально можно оформить по разному и в виде классического таймера с цифрами тоже)
🔥13
Друзья, всем привет😊

Как у вас дела, как начало осени и учебного года?)
Делитесь в комментариях 🤗

Мы на пару с дочкой разболелись, четыре дня сходила в школу ребетенка и все, тусим дома🙈

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

Никак не приучу себя выкладывать работы сюда, то некогда, то забываю, то ещё какие нибудь отмазки 😁

Этот сайт делала ещё весной, для школы итальянского языка.

Посмотреть его можно тут
🔥92
Всем большой привет 🤗

Потихоньку достаю из чемодана свой профессиональный багаж))

Решила показать вам, как можно оформить карточку тренинга, если описание везде разное и его много. Бывает так, что где-то описание всего одно предложение, где-то несколько.
В итоге карточки могут стать визуально перегружены и в целом на странице мы рискуем получить бардак 😳

В итоге мы решили скрыть описание в кнопку, получилось аккуратно, понятно и удобно 👌

Ниже покажу видео 👇
🔥51
Первое видео это страница тренинга, второе страница сайта, где мы используем тот же приём 😜
🔥11
Друзья, всем доброго субботнего вечера ❤️

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

На скринах примеры слайдера, которые я использую в работе с лендингами. Это не стандартный блок Геткурс, а блок html, с использованием css/js

Несмотря на сложившееся мнение, вносить правки в такой блок не сложно, достаточно посмотреть короткую инструкцию👌
🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
В этом видео я показываю слайдер в действии⬆️

Если среди вас есть те, кому интересна вёрстка и желание научиться верстать на Геткурс не уходит из головы (как у меня в свое время 😜), то у меня для вас есть новость🤗

В ближайшее время я планирую мастер-группу по верстке лендинга на Геткурс для новичков.

Меня давно об этом спрашивали и даже группа учеников собралась, но я все откладывала до момента, пока "звезды не сошлись" 😊

Мест в мастер-группе будет всего 10
Продолжительность обучения 3 недели.
Результат обучения:

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

И главное, попробуете на "вкус" ремесло верстальщика 🔥😊

Кто хочет уже сейчас занять место в группе, пишите мне в личные сообщения 🤗

На следующей неделе я покажу лендинг, который мы будем учиться верстать и расскажу более подробно об обучении❤️
6🔥2
Было/Стало🤓
Чудеса css и капелька js

Друзья, привет!
Знаю, что пропала☺️
Каюсь, много навалилось всего в сентябре, планы по мастер-группе пришлось немного сдвинуть 🧐

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

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

🔔 Первое в следующем посте

⬇️⬇️⬇️
4🔥4
Одна форма вместо восьми
Демо на видео ⬆️

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

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

Но 8 форм😳
А если позиций на странице будет 20, 30... При таком количестве блоков с формой - это лишняя работа для специалиста и потенциальный хаос при редактировании.

💡 Решение

Я оставила одну универсальную форму с полным списком уроков в предложении.

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

Таким образом мы оптимизируем саму механику GetCourse, решив сразу три типовые боли:
- дублирование форм,
- запутанный UX для пользователей,
- лишнюю ручную работу для специалистов.

🧠 Результат

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

P. S. Попутно починила баг Геткурс, когда он выделяет цветом только одно последнее предложение из выбранных, что сбивает пользователя.
Теперь все выбранные чекбоксы выделены цветом👌

Сам скрипт я выложу в комментариях под этим постом 👇
🔥162
#полезное

Друзья, привет 🤗

Я, как и обещала, с новой полезняхой 😉

Индикатор прокрутки страницы ⬇️

Это тонкая полоска вверху экрана, которая заполняется, когда вы прокручиваете страницу вниз. Смотрите видео☝️

💡 Для чего она нужна

✳️ Показывает, сколько осталось до конца страницы
Посетитель сразу понимает — дочитал он половину, почти всё или только начал.

✳️ Помогает не потеряться
Особенно удобно на длинных страницах с большим количеством текста или блоков.

✳️ Мотивирует дочитать до конца
Люди любят видеть свой “прогресс” — хочется дойти до 100%. Это повышает вовлечённость.

✳️ Создаёт ощущение удобного и современного сайта
Даже такая мелочь делает сайт более “живым” и продуманным.

💬 Ниже сама верстка🤓
5🔥1