Гетшоп | Готовые шаблоны для GetCourse

Конверсионный лендинг на GetCourse: правила | Часть 1 ❗За последние годы работы с платформой GetCourse я пересмотрела десятки курсов и лендингов — как собственных, так и клиентов. Заметила одну простую вещь: оформление напрямую влияет на вовлечённость и конверсию. Даже самые сильные продукты часто теряют клиентов из-за небольших ошибок в структуре страницы или визуале. Чтобы вам не наступать на те же грабли — делюсь своими правилами оформления лендинга, которые всегда использую на практике и рекомендую клиентам. Это простые вещи, которые действительно работают. 1⃣ Не ломайте Геткурс Это одно из самых важных правил, которое надо запомнить! В целом конструктор платформы уже адаптивен под разные устройства, и многие визуальные вещи можно сделать, не прибегая к стилизации кодом. Или можно использовать уже готовые шаблоны — например, из нашего магазина. Если вы все же будете самостоятельно менять визуал стилями или делать ручную адаптацию, то всегда держите в голове это правило. 2⃣Соблюдайте баланс внутренних и внешних отступов Для удобного чтения структура должна быть читабельной сразу: ➖ Расстояние внутри блока (между заголовком и текстом) всегда меньше, чем снаружи (между целыми блоками). ➖Связанные элементы должны быть ближе друг к другу, а смысловые части — дальше. Чтобы добавить внешний отступ без хаоса в коде, используйте готовый пустой блок: ➖Зайдите в «Конструктор страниц» ➖Откройте раздел «Все блоки» ➖Выберите «Пустой блок» ➖Отрегулируйте размер отступа по необходимости ➖Настройте его видимость, если нужно сделать отступ только на компьютере или только на мобильных (эта настройка доступна для любого пустого блока в свойствах) 🔎Смотрите скриншот 3⃣Сохраняйте аккуратность оформления Обратите внимание на такие детали: ➖Отступы между блоками ➖Расстояние от края блока до заголовка ➖Промежуток между заголовком и текстом ➖Кнопки должны быть визуально отделены от остального контента ➖Отступы от текста или кнопки до края блока тоже важны На разных устройствах эти расстояния могут смотреться по-разному. На компьютере большие отступы выглядят естественно, а на мобильных иногда — как пустое место. Используйте функцию видимости блоков, чтобы оформить страницу адаптивно. 🎥Продолжение — в следующих постах. 💻Сохраняйте в избранном, чтобы не потерять основные правила! #СоветыОтГетшоп #Лендинг

CSS по-простому: что это и зачем вам может пригодиться Многим CSS кажется чем-то сложным — мол, это только для программистов. На самом деле это очень дружелюбный инструмент оформления любого интерфейса: урока, страницы, формы, панели управления и так далее. Что такое CSS? 💡 Проще всего представить так: ➖HTML — это «скелет», структура. ➖CSS — это «одежда» для элементов: задаёт цвет, размер, отступы, шрифты, скругления углов, тени, фон. Зачем разбираться в CSS, если вы не разработчик? ✅ Даже базовые знания помогают быстро менять внешний вид интерфейса и делать всё более индивидуальным. ✅ Но если разбора кода не хочется — тоже не проблема. Мы сделали сложно простым — разберётся даже новичок! ➖ Мы изначально закладываем в шаблоны специальные переменные CSS. Это такие ключевые «точки настройки» — меняя их, вы можете за несколько минут изменить цвет, шрифт, скругление, тени основных элементов и настроить визуал под свой бренд. ➖ Всё необходимое заложено в едином файле управления темой— никаких поисков кода по всему шаблону. Как сменить стиль под себя? 📑 После покупки каждый клиент получает инструкцию, как легко поменять переменные именно под ваш бренд или вкус: ➖ открываете файл с переменными, ➖ меняете нужные параметры (цвета, шрифты, отступы и т. д.), ➖ сохраняете — шаблон автоматически применяет новый стиль ко всем элементам. Всё просто, не нужно быть разработчиком! CSS — ваш инструмент для настроек «под себя» и красивого визуала без сложностей. У нас уже всё готово к применению — вы просто выбираете и адаптируете по своему вкусу! 👉Гетшоп h #Прочее

Чек-листы: мифы, факты и почему этот формат действительно работает 📝 Чек-листы крепко вошли в онлайн-обучение, продающие страницы и рассылки. Но до сих пор вокруг них много предположений и споров — давайте разберёмся! Мифы о чек-листах: 1⃣Чек-листы — это просто списки, которые никто не использует. ➖На самом деле, продуманный чек-лист очень облегчает жизнь и помогает не забыть важные шаги. 2⃣Их никто не воспринимает всерьёз — слишком просто. ➖Именно простота — главный плюс такого инструмента. Меньше перегруза, больше фокуса. 3⃣Это что-то устаревшее. ➖Актуальные и лаконичные чек-листы востребованы даже у опытных пользователей — потому что удобство всегда в цене. Факты о чек-листах: ✅Помогают структурировать действия и увидеть прогресс. ✅Повышают мотивацию — отмечать выполненное по пунктам приятно и наглядно. ✅Экономят время и силы и для учеников, и для преподавателей. Почему чек-листы работают? 📌Они дают ощущение контроля и движения вперёд: когда всё важное перед глазами, а каждый выполненный шаг сопровождается галочкой, проходить обучение становится проще и приятнее. Если смотреть шире — электронный чек-лист отлично работает прямо в курсе ⚡Для этого у нас реализован специальный шаблон «Зачётка». По сути, это электронный чек-лист внутри курса, который собирается из конкретных уроков. Как это устроено: ➖ Вы выбираете, какие уроки должны быть в зачетке — самые важные, ключевые для результата, или, например, обязательные для получения сертификата. ➖ Названия уроков в зачетке можно менять, чтобы они были максимально понятными или мотивирующими для учеников. ➖ Прямо из зачетки ученик может перейти к нужному уроку, выполнить домашнее задание — и получить галочку автоматически в зачетке. ➖ Вся картина прогресса — как на ладони: что сделано, что впереди, что осталось добить до результата. ❗Это не только контроль, но и элемент геймификации: процесс прохождения становится заметно увлекательнее, и дойти до финала ученику гораздо легче. Зачётка уже доступна во всех коллекциях и темах шаблонов. Можно внедрять в любой проект на GetCourse — для больших программ и небольших курсов. 👉Хочу зачётку h #Прогресс

[Вопрос–ответ] FAQ про установку шаблонов ❓Если остались вопросы — загляните в инструкции на сайте или напишите свои вопросы в комментариях, мы поможем разобраться! 👉Гетшоп h #СоветыОтГетшоп

Быстрое вовлечение на Геткурсе — покажите больше по клику! Фишка, которую легко внедрит даже новичок. 💡Бывают моменты, когда хочется дать ученику что-то чуть позже — не сразу вываливать весь материал, а дать возможность сделать небольшой выбор или открыть деталь по запросу. Именно здесь появляется простой и классный инструмент — скрытый блок, который открывается по клику на кнопку. ⁉️В каких ситуациях это пригодится: ➡️На лендинге: можно компактно разместить дополнительные подробности об авторе, кейсы, сертификаты или отзывы — всё, что изначально не должно занимать место на экране, но может быть интересно тем, кто дочитал до конца или «задержался» на секции. ➡️В уроках: идеален для формата «Сначала подумай сам!» — например, когда хотите спрятать ответы к упражнениям, тестам, чек-листам или бонусный материал. Ученик сначала пробует сам, а только после нажатия открывает подсказку или правильный вариант. ➡️В мини-играх и интерактивах: спойлеры, быстрые квизы, «Открой награду», мотивационные послания, которые появляются по достижению шага — всё это строится на скрытых элементах. ➡️Для оформления бонусов и сюрпризов: можно сделать для учеников неожиданные подарки или «секретные» материалы, которые доступны только активным или вовлечённым пользователям. ⁉️Что это даёт вашему курсу и вашим ученикам? ⭐Страница выглядит аккуратно: нет длинной простыни текста, важное всегда на виду — лишнее или дополнительное открывается только по реальному интересу. ⭐Удобнее мотивация: сама динамика «открыл/нашёл ответ» добавляет геймификацию и удерживает внимание. ⭐Интерактив выше, вовлечённость лучше: пользователь не просто «потребляет», а сам взаимодействует, делает выборы и клики. ⚙️ Делаем скрытый блок с кнопкой, которая исчезает после нажатия: 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️⃣Готово! Проверяем результат ➖Публикуем страницу или урок ➖Переходим в просмотр 🚀 Теперь, когда пользователь кликает на кнопку: появляется скрытый блок, а кнопка или весь блок с кнопкой исчезают Ставь 🔥 если было полезно и сохраняй, чтобы не потерять. Поделитесь в...

Кто стоит за созданием онлайн-курсов? 5 ключевых ролей 💡 Онлайн-курс — не просто набор видеоуроков. За каждым успешным запуском всегда стоит команда (или как минимум — несколько ролей, которые кто-то берёт на себя). Вот кто чаще всего участвует в создании курса: 1️⃣ Автор/Эксперт ➖Тот, кто придумывает идею, пишет программу и делится знаниями. Это лицо курса — отвечает за контент и вдохновляет учеников. 2️⃣ Методолог ➖«Архитектор» курса. Помогает структурировать материал так, чтобы обучение было поэтапным и понятным. Делит большие темы на простые шаги. 3️⃣ Дизайнер-верстальщик ➖Человек, который превращает идею в красивое и удобное оформление. Создаёт дизайн страничек, добавляет визуальные акценты, переносит всё это на саму платформу. По сути — делает так, чтобы курс не только был полезным, но и выглядел современно. 4️⃣Технический специалист ➖Разбирается во всех настройках платформы: собирает курс из модулей, настраивает процессы, помогает с автоматизацией, делает рассылки, собирает курсы и воронки. 5️⃣ Куратор/Сопровождающий ➖Помогает студентам двигаться вперёд: отвечает на вопросы, поддерживает, подсказывает, если что-то непонятно. Часто бывает тем самым человеком, который доведёт до результата. ⭐ Если вы пока совмещаете все эти роли в одном лице — это нормально. Со временем каждый оптимизирует процесс под себя: что-то можно делегировать, что-то автоматизировать, что-то упростить с помощью готовых решений (например, шаблонов оформления для GetCourse). ❓А сколько ролей вы совмещаете сейчас: автор, дизайнер, технический спец, куратор — или уже есть команда? Напишите свой опыт, всегда интересно узнать, как всё организовано у других!

🌈 Новые темы и элементы коллекции «Радуга» Для всех, кто оформляет тренинги на GetCourse — отличные новости! ‼️Мы добавили новые темы и элементы, чтобы вы могли добавлять разнообразие в оформление при сохранении единого стиля. Что появилось? ➡️ Две новые темы (цветовое оформление): 🔵Тема 4 ➖Тёплые бежево-кремовые оттенки с оливковыми и графитовыми акцентами — спокойное, доверительное настроение для мягких обучающих направлений. 🔵Тема 5 ➖Насыщенная фиолетово-сливовая палитра со светлыми акцентами — ярко, динамично, современно. ➡️Новые шаблоны: 🔵Горизонтальный прогресс‑бар ➖Показывает прогресс по урокам или модулям в процентах. Визуально мотивирует учеников завершать тренинг. 🔵Тренинги в аккордеоне ➖Раскрывает список уроков одним кликом. Видно количество уроков и сколько уже пройдено. Все уроки недоступны — тренинг закрыт, все пройдены — завершён. 🔵Список уроков плитками без картинок ➖Прямоугольные плитки по две в ряд со статусами прохождения на кнопках. Хорошо смотрится с любым списком тренингов из коллекции. 🎬 К посту добавили видео, чтобы вы могли увидеть новые элементы в работе. Напишите в комментариях, каких элементов или цветов вам ещё не хватает — ваша обратная связь помогает нам создавать новые шаблоны и делать оформление ещё удобнее! ⬇️ 👉 Гетшоп get-shop-online.ru/...smmm #Коллекции #Тренинги #Списокуроков

🎁 Заполни анкету — получи баннер в подарок Многие откладывают оформление тренингов, потому что кажется, что это долго, дорого и сложно. ❕Но начать можно с простой детали, которая сразу меняет визуальное впечатление. ➖Мы подготовили короткую анкету — по её результатам вы сможете выбрать баннер из коллекции, подходящий под стиль вашего проекта. ➖Без дизайнера, без сложностей, без долгих согласований. Что внутри анкеты: ➡несколько базовых вопросов, чтобы понять вашу задачу ➡ выбор баннер наиболее подходящего под ваш фирменный стиль ‼ А дальше — просто установить баннер в свой GetCourse. Это занимает до 5 минут и не требует знания кода. 🖇Это бесплатный способ сделать первый шаг к фирменному оформлению. 👉 Заполнить анкету #СоветыОтГетшоп

Привет, друзья! 👋 На связи Настя Соло, и сегодня хочу поделиться своими любимыми сервисами Telegram, которые реально упрощают мне жизнь. ✍️ Буквица Надо быстро перевести видео или аудио в текст? Буквица делает это за пару минут и формирует аккуратный конспект. 🎁 3 бесплатные генерации в месяц. 👉 bykvitsa.ru 🧠 Toki Не ищите личного помощника — Toki помогает планировать задачи и события и синхронизирует их с календарем. Полностью бесплатный. 👉 yestoki.com ⚙️ SYNTX AI Устали прыгать между десятками разных AI-сервисов для текста, изображений, видео и озвучки? Все привычные AI‑сервисы в одном месте — почти 90 инструментов: ChatGPT, Midjourney, DALL·E, Stable Diffusion, ElevenLabs и другие, всего от 890 ₽ в месяц. Можно попробовать бесплатно. 👉 syntx.ai 💛 Уверенно пробуйте эти сервисы — и вы тоже не сможете от них отказаться.

💥 Когда открываешь старый проект… И там код. Без отступов. Без логики. Всё вперемешку. Кажется, будто кто-то просто вылил миску текста в редактор и нажал «сохранить». 😅 Глаза дёргаются, а мозг отчаянно ищет кнопку «сделать красиво». Хорошая новость — такая кнопка действительно есть! И сейчас я покажу, как за пару секунд превратить хаос в аккуратный код 👇 Если у вас всё слиплось в одну строку, и непонятно, где что начинается — используйте сервис: https://codebeautify.org/css-beautify-minify Он аккуратно разложит код построчно и сразу сделает его читабельным ✨ А если у вас просто разъехались отступы и код выглядит неаккуратно — есть быстрый способ навести порядок прямо в редакторе: 1️⃣ Ctrl+A — выделяем весь код 2️⃣ Shift+Tab — выравниваем отступы ⚡ И всё — код становится аккуратным, ровным и приятным глазу! Если такие посты полезны — ставьте 👍 и сохраняйте, чтобы не потерять! А в комментариях делитесь своими лайфхаками, которые делают работу с кодом легче 💬 Когда код выглядит аккуратно, работать с ним приятно — так же, как и учиться в красиво оформленном личном кабинете 💻✨ Если хотите, чтобы и ваш GetCourse выглядел опрятно и современно — загляните в Гетшоп 😍 Там всё продумано до мелочей, как в хорошем коде: аккуратные детали, стильные решения и новые темы, которые только что пополнили любимые коллекции. Мы постоянно обновляем магазин, чтобы у вас всегда были свежие идеи для вдохновения 💛 https://get-shop-online.ru/shop?utm_source=dzen&utm_medium=clip&utm_campaign=post#education

📲 Как сделать тренинг на GetCourse удобнее на телефоне На компьютере всё выглядит идеально: 🟢 слева — тренинги и уроки 🟡 справа — вспомогательные элементы — например, расписание, прогресс, зачётка, карточки достижений, отзывы или бонусные материалы. А вот с телефона вторая колонка уходит вниз 😅 Из-за этого ученик может просто не заметить эти важные блоки. 💡 Решение простое — поменять колонки местами только на мобильной версии. Что нужно сделать: 1️⃣ В тренинге → Действие → Настроить вид 2️⃣ Выделите блок «2 колонки» 3️⃣ В поле Класс HTML-элемента впишите: column_wrap и сохраните ✅ 4️⃣ Добавьте этот код в CSS темы или через </>: @media (max-width: 991px) .column_wrap display: flex; flex-direction: column-reverse; Теперь на телефоне ученик сначала увидит вспомогательные элементы, а уже потом — тренинги 💪 📌 Сохраните пост, чтобы не потерять код — пригодится при следующей настройке! ✨ А если хотите сделать следующий шаг — привести оформление GetCourse к единому фирменному стилю, зайдите в Гетшоп 💛 Выберите готовый шаблон под ваш бренд — и страница тренинга будет выглядеть стильно и профессионально уже сегодня👇 https://get-shop-online.ru/shop#education #СоветыОтГетшоп