36 подписчиков
Быстрое вовлечение на Геткурсе — покажите больше по клику! Фишка, которую легко внедрит даже новичок.
💡Бывают моменты, когда хочется дать ученику что-то чуть позже — не сразу вываливать весь материал, а дать возможность сделать небольшой выбор или открыть деталь по запросу. Именно здесь появляется простой и классный инструмент — скрытый блок, который открывается по клику на кнопку.
⁉️В каких ситуациях это пригодится:
➡️На лендинге: можно компактно разместить дополнительные подробности об авторе, кейсы, сертификаты или отзывы — всё, что изначально не должно занимать место на экране, но может быть интересно тем, кто дочитал до конца или «задержался» на секции.
➡️В уроках: идеален для формата «Сначала подумай сам!» — например, когда хотите спрятать ответы к упражнениям, тестам, чек-листам или бонусный материал. Ученик сначала пробует сам, а только после нажатия открывает подсказку или правильный вариант.
➡️В мини-играх и интерактивах: спойлеры, быстрые квизы, «Открой награду», мотивационные послания, которые появляются по достижению шага — всё это строится на скрытых элементах.
➡️Для оформления бонусов и сюрпризов: можно сделать для учеников неожиданные подарки или «секретные» материалы, которые доступны только активным или вовлечённым пользователям.
⁉️Что это даёт вашему курсу и вашим ученикам?
⭐Страница выглядит аккуратно: нет длинной простыни текста, важное всегда на виду — лишнее или дополнительное открывается только по реальному интересу.
⭐Удобнее мотивация: сама динамика «открыл/нашёл ответ» добавляет геймификацию и удерживает внимание.
⭐Интерактив выше, вовлечённость лучше: пользователь не просто «потребляет», а сам взаимодействует, делает выборы и клики.
⚙️ Делаем скрытый блок с кнопкой, которая исчезает после нажатия:
1️⃣ Добавляем кнопку:
➖Жмём «Добавить блок»
➖Пункт «Формы»
➖Выбираем «Кнопка»
Кнопка будет элементом, по клику на который появится скрытый блок.
2️⃣ Добавляем JavaScript-блок:
➖Жмём «Добавить блок»
➖Пункт «Вставка»
➖Выбираем «JavaScript»
➖Вставляем туда код:
// Класс у кнопки — .btn-hide
document.querySelectorAll('.btn-hide').forEach(function(btn)
btn.addEventListener('click', function()
btn.style.display = 'none';
);
);
Он будет отвечать за то, чтобы кнопка исчезала после нажатия.
3️⃣ Добавляем скрытый блок (например, картинку):
➖Жмём «Добавить блок»
➖Выбираем нужный вариант, например, «Картинка», «Текст» и т. д.
❗️Расположение блоков по итогу должно получиться как на скрине № 1
4️⃣ Делаем блок скрытым:
➖В настройках блока который будет появляться ( в моем примере это картинка) переходим на вкладку «Стиль»
➖Ставим галочку «Является всплывающим или скрытым блоком»
➖В выпадающем списке выбираем «Скрытый блок»
➖Копируем код блока — он пригодится для кнопки
➖Сохраняем настройки
⭐Смотри скрин №2
5️⃣ Настраиваем кнопку:
➖В настройках кнопки в пункте «Действие при клике» выбираем «Показать всплывающий или скрытый блок»
➖Вставляем тот код блока, который скопировали на прошлом шаге
➖В поле «CSS класс элемента» прописываем: btn-hide
➖Сохраняем настройки
⭐Смотри скрин №3
📌Если нужно, чтобы исчезала не только кнопка, а целый блок, где она находится — в стилях блока тоже добавьте класс btn-hide.
⭐Смотри скрин №4
6️⃣Готово! Проверяем результат
➖Публикуем страницу или урок
➖Переходим в просмотр
🚀 Теперь, когда пользователь кликает на кнопку: появляется скрытый блок, а кнопка или весь блок с кнопкой исчезают
Ставь 🔥 если было полезно и сохраняй, чтобы не потерять.
Поделитесь в...
2 минуты
8 декабря