Гетшоп | Готовые шаблоны для GetCourse (Геткурс)

Привет, друзья! Сегодня мы затронем одну из самых ярких и интересных тем в оформлении — это градиенты. Что такое градиент? Градиент (gradient) — это плавный переход между двумя и более цветами. В HTML и CSS градиенты можно использовать как фоновое оформление, для кнопок, блоков, а иногда даже для текста — чтобы сделать дизайн живым и современным. Есть несколько основных видов градиентов: ➖Линейный (linear-gradient): переход идёт по прямой линии — слева направо, сверху вниз или по диагонали. ➖Радиальный (radial-gradient): переход расходится от центра к краям (напоминает круг или овал). ➖Конический (conic-gradient): цвета «закручиваются» по кругу, похоже на циферблат. Как обозначаются цвета? В CSS цвета обычно указываются специальными кодами. Вот основные варианты: ➖HEX. Это «набор символов после решётки» — например, «#ff8a00» или «#e52e71». Такой формат состоит из цифр и букв и всегда начинается с «#». ➖RGB. Иногда можно встретить запись цвета в виде «rgb(255, 138, 0)». Здесь три числа — это пропорции красного, зелёного и синего цветов (Red, Green, Blue). Как читать запись градиента? Вот пример строки: linear-gradient(90deg, #ff8a00 0%, #e52e71 100%); linear-gradient — тип градиента. 90deg — направление (здесь слева направо). #ff8a00 0% — первый цвет в начале перехода. #e52e71 100% — второй цвет в конце перехода. Можно использовать не только градусы, но и словесные значения: linear-gradient(to right, #ff8a00, #e52e71); Это тот же переход слева направо. А еще, мы просто перечислили цвета через запятую, не указывая проценты, и теперь браузер автоматически распределит цвета по всей длине блока. Как создать свой градиент? Можно воспользоваться сервисами вроде cssgradient.io или uigradients.com. Там всё наглядно — выбираете нужный вариант, копируете строку и вставляете в настройки стиля. Как применить градиент к элементам на Геткурс? 1⃣ Если хотите окрасить фон всей страницы: Добавляете на страницу блок CSS и вставляете свой градиент внутри фигурных скобок после background: bodybackground: ВАШ ГРАДИЕНТ Пример: body background: linear-gradient(to right, #ff8a00, #e52e71); 2⃣ Если хотите окрасить фон конкретного блока страницы: Нажимаете у блока кнопку «Стиль» и переходите к подробным настройкам. Ставите ту же конструкцию, что и для всей страницы, только без body. background: ВАШ ГРАДИЕНТ Пример: background: linear-gradient(to right, #ff8a00, #e52e71); 3⃣ Если хотите окрасить кнопки: .f-btn.btn background: ВАШ ГРАДИЕНТ Если красите сразу все кнопки, то кладете конструкцию с градиентом в отдельный блок CSS как в примере с общим фоном. Если хотите покрасить отдельную кнопку идете в подробные настройки блока и ставите стиль туда. 4⃣ Теперь самое интересное, окраска текста: Для текста нужна особая «хитрость» — просто свойство background не сработает, так как по умолчанию текст останется обычного цвета, и окрасится его фон. Чтобы текст стал градиентным, используется другая комбинация CSS-свойств: .f-text background: ВАШ ГРАДИЕНТ -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; ➖.f-text — обращение к тексту (если нужен заголовок, то меняете на .f-header). ➖background — задаёт градиент (именно для текста). ➖-webkit-background-clip: text; — обрезает градиент по контуру букв, то есть градиент «становится» текстом. ➖-webkit-text-fill-color: transparent; — делает цвет текста прозрачным, чтобы был виден только градиент. ➖ display: inline-block; — чтобы градиент... https://get-shop-online.ru/shop

Где заканчивается «подумать» и начинается работа? Не раз сталкивалась с такой ситуацией: приходит клиент и спрашивает «сделайте мне вот так», а «а вообще так можно? это реально?». В этот раз запрос был такой: «Мне нужно, чтобы мои выпускники были доступны для поиска любому желающему. Поэтому хочу, чтобы их данные автоматически собирались в единую таблицу на лендинге. Как только я добавляю нового ученика в группу, его информация сразу подтягивается в эту таблицу. Всё должно обновляться само, без ручного труда. В таблице важно, чтобы можно было делать фильтрацию по разным параметрам и переходить к подробной информации о каждом выпускнике» Я взяла задачу «на подумать» — начала разбирать, какие есть варианты, насколько это вообще возможно. Искала способы, как всё сделать в рамках платформы, без нарушений по персональным данным, чтобы не затрагивать то, на что человек не давал согласия. Для страницы с доп. информацией я решила использовать открытый профиль. Обсудила эту идею с клиентом — и тут начались дополнительные желания: — «А можно добавить ещё в профиль их сторонние дипломы?» — «А можно оформить страницу открытого профиля красивее? (уйти от базового оформления)» С каждым новым вопросом вариантов становилось всё больше, а ясности — не особо прибавлялось. Время уходит, а по сути, это пока только подготовительный этап: я даже не знаю, возможно ли собрать всё, что хочет клиент. И, конечно, пока ни о какой оплате речи не идёт — ведь нет гарантии результата. Это тот случай, когда ты вкладываешься, разбираешься, а чем закончится — до конца не ясно ни тебе, ни заказчику. В итоге я потратила внушительное количество времени на тесты, вопросы в поддержку, пробные решения и доработки. Клиенту отправила своё видение и вариант реализации… и в ответ — тишина. В такие моменты появляется вопрос: Что делать с такими кейсами? Как относиться к тому, что ты уже вложился, и, возможно, не получишь от этого никакой отдачи ни в формате оплаты, ни обратной связи? Я для себя нашла выход: не просто «отпускать» такие задачи, а превращать всё, что удалось наработать, в готовые шаблоны для магазина Гетшоп. Решения, которые не пригодились одному клиенту, могут стать полезными десяткам или сотням других. Так опыт не теряется, а моя библиотека пополняется крутыми инструментами А еще, благодаря этому у нас скоро появится шаблон оформления страницы открытого профиля (себе уже оформила)🎨 👀 Если интересно посмотреть, что в итоге получилось (и как решилась, казалось бы, нерешаемая задача), вот ссылка на первичную реализацию: https://get-shop-online.ru/page242 ❓А как у вас — удаётся ли монетизировать такие открытия? Берёте ли деньги за «исследовательский» этап или воспринимаете это как инвестицию в будущие продукты? Делитесь своим опытом — уверена, этот вопрос близок многим. Кстати, если у вас есть крутые решения которыми вы готовы поделиться с миром, вы можете разместить свою работу в Гетшоп: https://get-shop-online.ru/job

🔥 С единым файлом управления темой 20% усилий дают 80% результата! О чём это? Например, вы приобрели коллекцию и оформили свою школу в светлых тонах 🌕 А теперь запускаете курс и решили сделать его в тёмном оформлении 🌒 ❌ Раньше Нужно было: ➖ заново собирать в тему все элементы коллекции ➖ в каждом менять цвет 🚀 Сейчас Теперь все проще, т.к. мы вынесли все переменные для изменения цветов и шрифтов в единый файл управления темой и благодаря этому можно сделать так: ➖ Делаете отдельную тему для элементов (куда вы складываете все CSS и JS приобретенных шаблонов) ➖ и отдельные темы для оформления, куда складываете только единые файлы с переменными (для каждого цвета — отдельная тема) ➖ В темах с цветами во вкладке «Настройки» подключаете «Родительскую тему» с элементами (выбираем её из списка тем) ➖ и дальше стандартно подключаете тему с нужным цветом к тренингу Всё готово ✔ ________ Если вам пока не понятно, что такое тема и как подключать её к тренингам — не переживайте 😊 Всё это пошагово рассказывается в наших видеоинструкциях. Посмотреть их можно на странице с подробным описанием коллекции ещё до того, как вы приобрели шаблоны. _________ 🎨 Где взять разные цвета шаблонов? Первый единый файл с выбранным цветом вы получаете после приобретения шаблонов. ➕ Далее у вас есть 2 пути: 1️⃣ Можно изменить цвета самостоятельно с помощью переменных (в личном кабинете есть отдельные уроки о том, как менять цвета и шрифты в шаблонах) 2️⃣Если вам подходит готовый вариант оформления из тех, что мы предлагаем — вы можете приобрести его единый файл управления темой в личном кабинете 👉 подключили — и получили новое оформление за пару кликов 💬 Остались вопросы или что-то не до конца понятно? Пишите в комментариях — поможем 🙌 А если было полезно — поставьте реакцию 👍 #СоветыОтГетшоп #Коллекции

Блокируют Telegram — Геткурс включил чаты. Я срочно обновила шаблоны‍🎨 Геткурс снова активно развивает чаты в тренингах. Не просто «вспомнили, что они есть», а в рамках обычного тарифа: ⏩ убрали ограничения на количество чатов в тренинге ⏩ включили уведомления ученикам На фоне блокировок Telegram инструмент начали массово использовать. Что изменилось в шаблонах? Раньше блок с чатами я не оформляла — им просто никто не пользовался. Но сейчас чаты начали активно появляться в тренингах → и стало понятно: нужно срочно оформлять. Поэтому я доработала этот момент⬇ 1️⃣  Актуальные события с горячими кнопками ⏩ Чаты автоматически перемещаются вверх и оформляются в виде горячих кнопок 2️⃣ Единая панель ученика Чаты начали подтягиваться и туда (в актуальных событиях), но в этом месте они не нужны. Поэтому: ⏩ в новой версии я их скрыла ⏩ и добавила код для тех, кто установил панель до 1 апреля 3️⃣Чаты внутри тренинга Есть отдельный блок — чат тренинга. Я встроила его в вертикальные горячие кнопки. Теперь можно: ⏩ использовать только чаты ⏩ оставить кнопки и чаты вместе ⏩ использовать кнопки как есть и убрать чаты Обновление уже доступно во всех коллекциях, которые сейчас в продаже. Но у всех сейчас установлены разные версии шаблонов. Если обновлять без понимания — можно сломать текущее оформление. Поэтому я сняла видео, где ответила на основные вопросы по функционалу чатов, варианты их использования и правильное обновление шаблонов. Смотрите его на удобной вам платформе: ⏩ YouTube - www.youtube.com/...jce ⏩ Rutube - rutube.ru/...d93 ------------------------- И ещё У нас появился MAX Присоединяйтесь max.ru/...xoq #НовостиГетшоп

🤖 НОВАЯ КОЛЛЕКЦИЯ «ХАЙ-ТЕК» — И ОНА НЕ СЛУЧАЙНАЯ Помните, недавно рассказывала, что мы упростили логику работы с шаблонами и процессами выдачи доступов внутри платформы? Так вот… это дало больше, чем просто удобство 👇 У нас наконец-то появилось время не только поддерживать, но и создавать новое. И первая такая работа — 🚀 коллекция шаблонов «Хай-тек» --- 💡 Интересный факт: Этот стиль был с нами с самого начала (тот самый тренинг с роботом 👀) Но всё остальное постоянно откладывалось — не хватало ресурса собрать всё в единую систему. И вот сейчас пазл сложился 🧩 --- ⚙ Что по визуалу: — фон с эффектом нейронных связей — стекло и металл в элементах — лёгкие «прозрачные» слои — ощущение интерфейса из будущего Это уже не просто дизайн, это ассоциация с AI, технологиями и развитием. ❗ При этом вы не «привязаны» к стилю: как и во всех наших коллекциях, вы можете легко заменить картинку фона, цвета и шрифты под себя — буквально в несколько кликов, адаптируя дизайн под свой бренд, нишу или настроение проекта. --- 🔥 Что внутри коллекции: — тренинги и уроки — единая логика личного кабинета — баннер и календари — зачетка и прогрессы — всё собрано в один цельный стиль --- 👀 Кому особенно откликнется: — проекты про AI, digital, обучение будущего — эксперты, которые хотят выглядеть «на уровне продукта», а не просто курса — школы, где важна атмосфера технологий и движения вперёд --- 💬 Это коллекция не «про оформление» Она про ощущение: что вы не просто проходите курс, а находитесь внутри технологичной среды. И, если честно, она очень долго ждала своего часа 🙂 ➡Посмотреть коллекцию можно здесь: https://get-shop-online.ru/high-tech1?utm_source=dzen&utm_medium=clip&utm_campaign=post

✨Новость из закулисья Гетшоп: как мы сделали ещё проще — и вам, и себе Мы всегда стремились сделать работу с шаблонами максимально лёгкой и быстрой для вас. Но за кулисами нашего магазина шла большая рутинная работа — создавать для каждой темы отдельные продукты, предложения, группы, уроки. доступы… Иногда казалось, что мы попали в день сурка. Теперь наконец-то можем выдохнуть: сделали большой шаг вперёд и для себя, и для вас. ⭐Мы создали единый файл управления темой и собирали в нём переменные всех шаблонов коллекции. И теперь достаточно открыть только этот файл, чтобы изменить цвета и шрифты во всех элементах сразу — быстро, понятно, удобно! Если вы уже приобретали шаблоны и хочется поменять их оформление без ручной замены цветов — просто докупите в личном кабинете единый файл управления с другой темой коллекции и замените им прежний. Смена стиля теперь занимает всего пару кликов. Что это значит для нас? Нам больше не нужно тратить недели на подготовку каждой новой темы и погружаться в рутину. Значит, появится больше свежих оформлений, больше новых идей и элементов — мы сможем по-настоящему развиваться и больше времени уделять самому важному: вашим удобным шаблонам и новым возможностям. Спасибо, что вы даёте обратную связь и развиваете вместе с нами магазин Гетшоп. Мы всегда рядом, если нужен совет или просто хочется поделиться впечатлениями. Делать продукты удобнее — это наш общий путь. С любовью, команда Гетшоп! ❤ #НовостиГетшоп

Привет, друзья! Продолжаем разбирать рабочие правила для лендингов. Если пропустили первую часть, то её можно найти тут: https://t.me/kanal_GetCourse_shop/73 А в этом посте — вторая порция конкретных советов для повышения конверсии. 4⃣Заметные кнопки целевого действия Кнопки целевого действия (регистрация, оплата и т.п.) должны быть заметными и несколько раз дублироваться на странице. Заметная кнопка может в разы увеличить конверсию лендинга. Вести кнопки могут как на форму внизу лендинга (с помощью якоря), так и открывать всплывающую форму или добавлять товар в корзину. Выбрать привлекающую внимание кнопку и приобрести модифицированный вариант корзины можно по ссылке https://get-shop-online.ru/shop?filter=page1.2 5⃣«Нет» внешним ссылкам Если перед вами стоит цель — создание конверсионного лендинга, то не используйте внешние ссылки, уводящие клиента на другие ресурсы (сайты, соц.сети и т.д.), в том числе на другие страницы вашего сайта. Ничто не должно отвлекать клиента от целевого действия — покупки или регистрации! 6⃣Доступность связи клиента с поддержкой При возникновении каких-либо вопросов у клиента, он должен понимать и видеть, что ему есть куда обратиться и получить ответ или решить свою проблему. Для этого кнопка связи с поддержкой должна быть на сайте заметно оформленной и доступной, на виду. Например, ее можно расположить в нижнем меню или сбоку от читаемого контента. Клиент не должен искать, как с вами связаться. 7⃣Логотип бренда Если ваш бренд еще не известен, то размещение логотипа на одностраничном сайте не обязательно, но его присутствие увеличит узнаваемость бренда. 🎥Продолжение — в следующих постах. 👍Если материал был полезен — жмите лайки и сохраняйте в избранном, чтобы не потерять важные правила!

5 базовых правил дизайна для онлайн-школы на GetCourse Заметили, что часть учеников не доходит до финала курса? Причин может быть много — у каждого своя история. Но часто дело не только в программе или мотивации, а в том, насколько удобно и понятно устроена ваша онлайн-школа. ❗ Дизайн — это не только «про красоту». Это про заботу, структуру и ту самую простоту, когда всё на своём месте. В свежей статье я собрала 5 простых правил, которые помогают сделать школу действительно дружелюбной. https://kanun.blog/post/369-5-bazovyh-pravil-dizayna-dlya-onlayn-shkoly-na-getcourse

Красная звёздочка в формах GetCourse: простой способ не терять заявки ❗Наверняка вы сталкивались с ситуацией: в форме на GetCourse есть обязательные поля, но никаких подсказок о том, что поле обязательно, в том числе стандартной красной звёздочки — нет, а ошибка появляется где-то наверху, и пользователь может её просто не заметить. ⏳ В итоге человек жмёт на кнопку, ничего не происходит — он теряется, не понимает, в чём дело, и просто закрывает страницу. То есть мы теряем реально заинтересованных людей из-за мелочи! Решение очень простое: добавьте к названию обязательного поля красную звёздочку — так сразу понятно: это заполнить обязательно. Как это сделать? Добавьте к названию поля такой фрагмент: <span style="color: red;">*</span> Пример названия поля для ввода имени: Имя <span style=“color: red;”>*</span> Почему это работает? ➖Пользователь сразу видит, какие поля обязательные. ➖Меньше ошибок и путаницы. ➖Форма получается прозрачной, конверсия — выше. Маленькая деталь, а делает процесс заполнения формы более дружелюбным и понятным! 📌Сохраняйте пост, чтобы не потерять код. 💬 И делитесь в комментариях — какие ещё мелочи, на ваш взгляд, снижают конверсию? #СоветыОтГетшоп

🔥Новый способ мотивировать учеников на GetCourse — командный рейтинг от Гетшоп! Привет! На связи Настя Соло и команда магазина Гетшоп.😊 Давайте честно: простые баллы и прогресс-бар — штука полезная, но иногда хочется чего-то посильнее, чтобы ученики не просто двигались к своим целям, а реально «заряжались» от процесса. 🚀 Теперь в наших шаблонах появился инструмент, который помогает прокачать вовлечённость — командный рейтинг! Что это такое? 👥 Делите учеников на команды прямо внутри курса; 🏅 Каждая команда копит баллы за прохождение уроков и активности; 📊 Сразу в тренинге видно общий командный рейтинг — кто впереди, а кто уже почти догнал лидеров; ⚡Баллы начисляются автоматически, ничего не нужно настраивать вручную; 🌍 Рейтинг можно сделать публичным — его увидят даже те, кто не авторизован в аккаунте; 🎨 Всё кастомизируется: названия команд и цвета легко поменять под ваш бренд. Появляется здоровый азарт и командный дух: в команде никто не хочет подвести своих и хочется дойти до конца вместе! Люди заряжаются общей идеей, и учиться становится чуть веселее — проверено на практике.😉 ➡ Шаблон командного рейтинга уже доступен во всех коллекциях. Добавляйте эту механику — и наблюдайте, как ученики включаются в процесс! 👉 За покупками в Гетшоп (https://get-shop-online.ru/shop#education?smm&utm_source=dzen&utm_medium=post&utm_campaign=smm) #Прогресс #Гетшоп

➡ Знаете ли вы, что больше 70% учеников проходят обучение на Геткурс именно с мобильного телефона? Для большинства именно мобильная версия — главный способ учиться, и эта цифра только растёт. ❗ Поэтому важно не просто оформить курс красиво на компьютере, но и обязательно проверить, насколько удобно выглядит всё на телефоне. Ведь даже мелкие недочёты могут сделать обучение неудобным и отвлечь учеников. На что важно обратить внимание: ⭐Все элементы остаются в пределах экрана, ничего не «уезжает» вбок и не обрезается. ⭐Текст хорошо читается и не становится слишком мелким. ⭐Кнопки, баннеры, меню — всё удобно нажимается, элементы не располагаются слишком близко друг к другу. ⭐Важная информация всегда видна и не «прячется» за другими блоками. 📌 В Гетшоп мы всегда внимательно проверяем, как шаблон выглядит на ПК, в мобильном браузере и в мобильном приложении. Такой подход помогает избежать ошибок, но, поскольку у каждой школы свой уникальный контент, рекомендуем обязательно посмотреть мобильную версию уже с вашими материалами. Далее — простые инструкции, как это сделать 👇 1⃣ Просмотр мобильной версии через инструменты разработчика в браузере Этот метод позволяет эмулировать мобильное устройство в браузере и подходит для проверки отображения любых страниц: лендингов, уроков, тренингов и других элементов. ➖Откройте страницу, которую хотите проверить, в браузере: Для Windows: нажмите клавишу F12. Для Mac: нажмите Cmd + Option + I. В открывшейся панели разработчика активируйте режим эмуляции мобильного устройства: ➖Нажмите на иконку с изображением смартфона и планшета (обычно в верхней части панели). ➖Выберите нужное устройство из списка или задайте собственные параметры экрана. 2⃣ Эмулятор мобильного приложения через раздел IDE Этот метод позволяет увидеть, как тренинги и уроки будут выглядеть в мобильном приложении Геткурс. ➖В левой панели Геткурс перейдите в раздел: Apps → IDE. ➖Вставьте в браузерную строку эмулятора (справа) ссылку на нужную страницу (например, личный кабинет). 🔎 Показываем куда вставлять ссылку: h ➖Теперь вы видите страницу так, как она будет отображаться для пользователя в мобильном приложении. ➖Можно переходить по ссылкам внутри — всё будет отображаться в мобильном формате. 3⃣ Просмотр мобильного вида для уроков внутри Этот метод подходит только для просмотра уроков внутри и не применим для списка тренингов или списка уроков. В остальных случаях возникнет ошибка 404 (страница не найдена). ➖Откройте нужный урок. ➖В адресной строке браузера найдите часть ссылки, где написано: view (например, …/lesson/view/12345). ➖Перед словом view допишите web, чтобы получилось webview (например, …/lesson/webview/12345). ➖Нажмите Enter — страница откроется в мобильном формате, как её увидят в приложении, но в размере вашего ПК экрана. ➖Для того, чтобы уменьшить ее в размере мобильного, дополнительно используйте первый вариант нашей инструкции. 💜Если инструкция оказалась полезной — поддержите пост лайком и сохраните себе, чтобы не потерять. ⬇А если хочется обсудить нюансы или есть свои мысли — делитесь ими в комментариях; мы с удовольствием читаем и вдохновляемся вашей обратной связью! #СоветыОтГетшоп

Больше, чем просто оформление: визуальные решения для успешного обучения Когда видишь индивидуальное оформление на GetCourse, кажется, что это просто приятный визуал. 💡 Но за кажущейся простотой — реальный опыт и внимание к деталям. Каждый элемент продуман так, чтобы обучение проходило легче, а ученики не терялись и доходили до результата. Что меняют визуальные решения из магазина Гетшоп? ➡ Статусы уроков на кнопках — видно какой этап уже пройден и что впереди ➡ Чёткое разделение уроков и тренингов — ученику интуитивно понятно где урок, а где тренинг. Без лишней путаницы ➡ Удобная навигация — используйте единую панель ученика и горячие кнопки, и обращения в техподдержку сократятся в разы! ➡ Игровые элементы — прогресс-бары, рейтинги, календари событий и другие детали, которые мотивируют двигаться дальше 🚀 ⭐И главное — вы сами выбираете и комбинируете элементы так, как удобно именно для вашего проекта: только то, что надо, и ничего лишнего. Можно собрать оформление под задачи любой школы, кабинета или программы. А если вы затрудняетесь с выбором, наш бот ⤵ поможет подобрать оформление под вашу нишу. 🤖 https://t.me/Botya_getshop_online_bot 💬 А какие визуальные решения помогают вашим ученикам лучше учиться и досматривать курсы до конца❓ #Коллекции