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

❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️ Друзья, вот вам предновогодняя забава с предсказаниями на 2️⃣0️⃣2️⃣6️⃣ год! 1. Запускайте видео 2. Делайте скриншот 3. Присылайте, что у вас выпало в комментарии. Буду рада репостам. 😂

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

Для начала нужно немного подготовить блоки: ✅ Каждой кнопке надо задать свой уникальный класс; ✅ Потом внутри формы создать разные заголовки и тексты для каждой кнопки, им тоже задать уникальные классы, при этом последняя цифра у кнопки, заголовка и текста должны совпадать. Самому блоку с формой задаём класс .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%. Это повышает вовлечённость. ✳️ Создаёт ощущение удобного и современного сайта Даже такая мелочь делает сайт более “живым” и продуманным. 💬 Ниже сама верстка🤓

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

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

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

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