Гетшоп | Готовые шаблоны для 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