Дизайн и вёрстка GetCourse | Tilda

Алиса придумала забаву, мне нравится 😜

Для начала нужно немного подготовить блоки:✅ Каждой кнопке надо задать свой уникальный класс;✅ Потом внутри формы создать разные заголовки и тексты для каждой кнопки, им тоже задать уникальные классы, при этом последняя цифра у кнопки, заголовка и текста должны совпадать. Самому блоку с формой задаём класс .castom-form✅ Потом добавить скрипт в конец страницыСкрипт выложу в комментариях под этим постом 👌Для начала нужно немного подготовить блоки:✅ Каждой кнопке надо задать свой уникальный класс;✅ Потом внутри формы создать разные заголовки и тексты для каждой кнопки, им тоже задать уникальные классы, при этом последняя цифра у кнопки, заголовка и текста должны совпадать. Самому блоку с формой задаём класс .castom-form✅ Потом добавить скрипт в конец страницыСкрипт выложу в комментариях под этим постом 👌

Друзья, всем привет 🤗В видео показываю решение частного случая в работе.Возможно у вас тоже возникают подобные ситуации 🤓В следующем посте выложу скрипт ⬇️😜

Индикатор прокрутки страницы разметка ⬇️<div id="progress-bar"></div><style>#progress-bar {  position: fixed;  top: 0;  left: 0;  height: 4px;  width: 0%;  background-color: #0E7EE5;  z-index: 9999;  -webkit-transition: width 0.2s ease;  -o-transition: width 0.2s ease;  transition: width 0.2s ease;}</style><script>document.addEventListener('scroll', function() {    var scrollTop = window.scrollY || window.pageYOffset;    var docHeight = document.body.scrollHeight - window.innerHeight;    var progress = (scrollTop / docHeight) * 100;    document.getElementById('progress-bar').style.width = progress + '%';  });</script>Друзья, если вам такой контент интересен, ставьте ❤️ или 👍Ну или что хотите поставьте😁Так я пойму, что не зря его тут выкладываю😜

#полезноеДрузья, привет 🤗Я, как и обещала, с новой полезняхой 😉Индикатор прокрутки страницы ⬇️✅ Это тонкая полоска вверху экрана, которая заполняется, когда вы прокручиваете страницу вниз. Смотрите видео☝️💡 Для чего она нужна✳️ Показывает, сколько осталось до конца страницыПосетитель сразу понимает — дочитал он половину, почти всё или только начал.✳️ Помогает не потерятьсяОсобенно удобно на длинных страницах с большим количеством текста или блоков.✳️ Мотивирует дочитать до концаЛюди любят видеть свой “прогресс” — хочется дойти до 100%. Это повышает вовлечённость.✳️ Создаёт ощущение удобного и современного сайтаДаже такая мелочь делает сайт более “живым” и продуманным.💬 Ниже сама верстка🤓#полезноеДрузья, привет 🤗Я, как и обещала, с новой полезняхой 😉Индикатор прокрутки страницы ⬇️✅ Это тонкая полоска вверху экрана, которая заполняется, когда вы прокручиваете страницу вниз. Смотрите видео☝️💡 Для чего она нужна✳️ Показывает, сколько осталось до конца страницыПосетитель сразу понимает — дочитал он половину, почти всё или только начал.✳️ Помогает не потерятьсяОсобенно удобно на длинных страницах с большим количеством текста или блоков.✳️ Мотивирует дочитать до концаЛюди любят видеть свой “прогресс” — хочется дойти до 100%. Это повышает вовлечённость.✳️ Создаёт ощущение удобного и современного сайтаДаже такая мелочь делает сайт более “живым” и продуманным.💬 Ниже сама верстка🤓

Одна форма вместо восьмиДемо на видео ⬆️Верстала я на днях первый экран страницы, где настроены продажи серии уроков и удивилась от количества форм, их было столько же, сколько карточек с уроками😳Это было сделано для того, чтобы выбранный урок при открытии формы всегда был на первом месте в списке, с активным чекбоксом и выделением. Что логично с точки зрения покупателя, сразу видно, что выбрано и исключен лишний клик.Но 8 форм😳А если позиций на странице будет 20, 30... При таком количестве блоков с формой - это лишняя работа для специалиста и потенциальный хаос при редактировании.💡 РешениеЯ оставила одну универсальную форму с полным списком уроков в предложении. А с помощью скрипта:- связала каждую кнопку с нужным предложением внутри этой формы,- при клике нужный урок автоматически отмечается галочкой,- сам блок с уроком поднимается в начало списка,- пользователь видит его первым, но при этом может выбрать и другие уроки.После закрытия формы всё возвращается в исходное состояние, чекбоксы сбрасываются👌✨ Таким образом мы оптимизируем саму механику GetCourse, решив сразу три типовые боли:- дублирование форм,- запутанный UX для пользователей,- лишнюю ручную работу для специалистов.🧠 Результат✅ вместо восьми форм — одна,✅ пользователю не нужно искать свой урок — он сразу сверху и выделен, ✅ можно добавить другие уроки, если захочет,✅ специалисту проще поддерживать сайт — правки делаются в одном месте.P. S. Попутно починила баг Геткурс, когда он выделяет цветом только одно последнее предложение из выбранных, что сбивает пользователя. Теперь все выбранные чекбоксы выделены цветом👌Сам скрипт я выложу в комментариях под этим постом 👇

Было/Стало🤓Чудеса css и капелька jsДрузья, привет! Знаю, что пропала☺️Каюсь, много навалилось всего в сентябре, планы по мастер-группе пришлось немного сдвинуть 🧐Ну раз уж так выходит, думаю, что надо мне реабилитироваться перед вами 🤗Поэтому пока идёт подготовка сайта, который мы будем учиться верстать, я буду выкладывать вам ежедневно интересные решения из своей практики💡🔔 Первое в следующем посте ⬇️⬇️⬇️Было/Стало🤓Чудеса css и капелька jsДрузья, привет! Знаю, что пропала☺️Каюсь, много навалилось всего в сентябре, планы по мастер-группе пришлось немного сдвинуть 🧐Ну раз уж так выходит, думаю, что надо мне реабилитироваться перед вами 🤗Поэтому пока идёт подготовка сайта, который мы будем учиться верстать, я буду выкладывать вам ежедневно интересные решения из своей практики💡🔔 Первое в следующем посте ⬇️⬇️⬇️

В этом видео я показываю слайдер в действии⬆️Если среди вас есть те, кому интересна вёрстка и желание научиться верстать на Геткурс не уходит из головы (как у меня в свое время 😜), то у меня для вас есть новость🤗В ближайшее время я планирую мастер-группу по верстке лендинга на Геткурс для новичков. Меня давно об этом спрашивали и даже группа учеников собралась, но я все откладывала до момента, пока "звезды не сошлись" 😊✅ Мест в мастер-группе будет всего 10✅ Продолжительность обучения 3 недели. ✅ Результат обучения:- у вас будет готовый крутой шаблон лендинга для Геткурс, написанный на html, - полное понимание как написаны и работают все блоки сайта, - вы сможете сами дорабатывать его и писать новые блоки под задачи заказчика. И главное, попробуете на "вкус" ремесло верстальщика 🔥😊Кто хочет уже сейчас занять место в группе, пишите мне в личные сообщения 🤗На следующей неделе я покажу лендинг, который мы будем учиться верстать и расскажу более подробно об обучении❤️

Друзья, всем доброго субботнего вечера ❤️На лендингах мы часто используем различные слайдеры. Они позволяют последовательно демонстрировать несколько блоков контента в ограниченном пространстве экрана. Учитывая, что сейчас большинство пользователей заходят на сайт с мобильных устройств, слайдеры актуальны как никогда)На скринах примеры слайдера, которые я использую в работе с лендингами. Это не стандартный блок Геткурс, а блок html, с использованием css/jsНесмотря на сложившееся мнение, вносить правки в такой блок не сложно, достаточно посмотреть короткую инструкцию👌Друзья, всем доброго субботнего вечера ❤️На лендингах мы часто используем различные слайдеры. Они позволяют последовательно демонстрировать несколько блоков контента в ограниченном пространстве экрана. Учитывая, что сейчас большинство пользователей заходят на сайт с мобильных устройств, слайдеры актуальны как никогда)На скринах примеры слайдера, которые я использую в работе с лендингами. Это не стандартный блок Геткурс, а блок html, с использованием css/jsНесмотря на сложившееся мнение, вносить правки в такой блок не сложно, достаточно посмотреть короткую инструкцию👌

Первое видео это страница тренинга, второе страница сайта, где мы используем тот же приём 😜Первое видео это страница тренинга, второе страница сайта, где мы используем тот же приём 😜