Привет, друзья! На связи Настя Соло.

Главная задача любой анимации в веб-интерфейсе — дать пользователю обратную связь. Человек должен сразу считывать, куда можно нажать и сработал ли его клик.

Вспомните обычные ссылки: вы навели курсор, и появился «кликабельный палец» или подчеркивание. Это базовый сигнал для мозга, что элемент активен. Точно так же должны вести себя кнопки, поля для ввода и карточки.

Продуманный интерфейс дает отклик на действия. Благодаря этому проект выглядит живым, дорогим и качественным.

В CSS за этот диалог с пользователем отвечают псевдоклассы. Это специальные команды, которые меняют внешний вид элемента в момент, когда мы что-то с ним делаем:

:hover — срабатывает при наведении курсора мыши.

:active — дает отклик в долю секунды самого нажатия (создает физическое ощущение реального щелчка).

transition — команда плавности. Без нее элементы будут меняться резко и дёргано. Она задает время анимации, чтобы эффект выглядел мягко и профессионально.

При наведении мы можем делать с элементом вообще всё что угодно! Например: залить другим цветом, добавить яркую рамку, изменить цвет текста, наложить тень или скруглить углы.

Давайте сделаем кнопку прямо сейчас. Я подготовила код, в котором мы зададим стартовый вид кнопки, а при наведении кардинально её поменяем.

CSS
.f-btn.btn, .xdget-button {
background: #ff8a00!important; /* задаем стартовый оранжевый цвет кнопки */
border: 2px solid transparent!important; /* делаем невидимую рамку */
color: #ffffff!important; /* делаем текст белым */
border-radius: 6px!important; /* немного скругляем углы */
transition: 0.4s; /* задаем плавность всех изменений */
}

.f-btn.btn:hover, .xdget-button:hover {
background: #ffffff!important; /* при наведении фон становится белым */
border: 2px solid #ff8a00!important; /* появляется оранжевая рамка */
color: #ff8a00!important; /* текст становится оранжевым */
transform: scale(1.05); /* кнопка плавно увеличивается */
}

.f-btn.btn:active, .xdget-button:active {
transform: scale(0.95); /* при клике кнопка проваливается, имитируя нажатие */
}

Куда вставить этот код на Геткурс?
Чтобы ответить на этот вопрос, нужно понимать, что на платформе существует два разных конструктора:

Новый конструктор — это лендинги и уроки внутри.

Старый конструктор — это системные страницы и страница входа, обратной связи, личный кабинет, список тренингов, список уроков и открытый профиль.

Именно поэтому в нашем коде мы использовали сразу два обращения, чтобы магия применилась вообще ко всем вариантам кнопок:

.f-btn.btn — сработает для кнопок в новом конструкторе, а также для системных кнопок, которые изначально свёрстаны самим Геткурсом в старом конструкторе.

.xdget-button — сработает специально для блока «Кнопка», который мы можем вручную добавить в старом конструкторе (через меню «Добавить блок»).

Если вы меняете кнопки в НОВОМ конструкторе (на лендингах или внутри уроков):

— Для всех кнопок на странице / в уроке: добавьте стандартный блок CSS из меню блоков и вставьте туда код целиком.

— Для кнопок только в одном конкретном блоке: нажмите кнопку «Стиль» и перейдите в подробные настройки. В поле CSS вставьте этот же самый код.

Если вы меняете кнопки в СТАРОМ конструкторе (например, в списке тренингов):

Нажмите кнопку «Действия» в правом верхнем углу «Настроить вид» и вставьте наш код в поле со значком </> (Стили). Это перекрасит и анимирует все кнопки на этой странице.

Если вы не хотите, чтобы в старом конструкторе окрашивались системные кнопки, просто уберите из кода часть .f-btn.btn вместе с запятой. Оставьте только классы .xdget-button (и их версии для наведения и клика).

Сохраняйте пост, чтобы шпаргалка всегда была под рукой!

И не жалейте лайков, если было полезно

Привет, друзья! На связи Настя Соло. 👋

🚀 У меня для вас потрясающие новости! В нашем магазине готовых решений Гетшоп долгожданное пополнение. Мы выпустили новую, пятую тему для нашей самой масштабной и популярной коллекции «Золотое свечение».

Если вы до сих пор думаете, что готовый дизайн — это жесткий шаблон, в котором нельзя ничего изменить, то эта коллекция перевернет ваше представление.

💎 Наши коллекции работают как настоящий умный конструктор. Вы сами выбираете только те элементы, которые нужны вашему проекту, миксуете их между собой и получаете абсолютно уникальное оформление.

Внутри коллекции «Золотое свечение» вам доступна невероятная вариативность: целых 3 вида оформления списка тренингов и 3 варианта отображения уроков. Вы можете выводить уроки аккуратными плашками, плитками с нумерацией, делать их большими или маленькими.

🖼️ Каждое оформление можно использовать как с картинками, так и без них. Достаточно просто загрузить свои обложки, и шаблон мгновенно перестроится, создав совершенно новый визуальный стиль. В несколько кликов вы можете полностью изменить шрифты, цвета и адаптировать каркас под конкретные задачи вашего проекта.

Новая Тема 5 выполнена в благородных светло-голубых тонах. Это идеальная базовая гамма, которая выглядит дорого и свежо. Она универсальна и без изменения цветовой схемы подойдет абсолютно для любой ниши — от серьезного бизнеса до бьюти-сферы.

📱 При этом все наши шаблоны полностью адаптивны. Они безупречно отображаются на любых смартфонах и планшетах, а также отлично работают внутри официального мобильного приложения Геткурс.

Отдельная моя любовь в Теме 5 — это продуманная система мотивации студентов. Мы детально проработали путь ученика и добавили элементы, которые вызывают привыкание в хорошем смысле слова.

🎨 Цветовые статусы уроков. Для каждого статуса («пройден», «на проверке», «стоп-урок») мы настроили индивидуальные цвета. Ученик визуально видит свой путь. Это работает как легальный дофамин: загорается заветный зеленый цвет, и внутри сразу рождается приятное чувство «Ура, я молодец, я сделал это!».

📊 Прогресс-бары и календари. Шкала завершенности курса и наглядное расписание дают студенту ощущение целостности продукта. Он понимает, где находится сейчас и сколько осталось до финала, что защищает от выгорания и повышает доводимость до конца.

Напоминаю, что в Гетшоп действует гибкая система сборки. Вы можете приобрести как один элемент, так и всю коллекцию целиком. И здесь работает простое правило: чем больше элементов вы выбираете в свой конструктор, тем выше ваша персональная скидка — она может достигать 25%!

➡️ Переходите на сайт Гетшоп и собирайте свой идеальный Геткурс легко и без переплат дизайнерам 👇

[Ссылка на коллекцию «Золотое свечение»]

Коллеги, а что для вас важнее в оформлении: визуальный стиль или чтобы интерфейс помогал ученику быстрее проходить уроки?

#Коллекции #НовостиГетшоп

Привет, друзья! На связи Настя Соло. 👋

Обычно в этом блоге мы много говорим про визуал, оформление уроков и удобство платформы. Но сегодня мне хочется немного отойти от темы дизайна и просто поболтать с вами как коллега с коллегой. Давайте заглянем за кулисы красивых кейсов и вспомним ту самую «кухню» онлайн-образования.

🌃 Представьте картину. Ночь перед стартом продаж. Эксперт пьет ромашковый чай, продюсер нервно обновляет таблицу с заявками, а технический специалист в третий раз перепроверяет настройки вебинарной комнаты, потому что «кажется, что-то может отвалиться». Знакомая ситуация?

👩‍💻 Я знаю об этом не понаслышке. Я работаю с платформой Геткурс с 2018 года и прошла путь от технического специалиста до верстальщика и администратора крупных онлайн-школ. В свое время я вела параллельно несколько проектов с огромной аудиторией — более 100 000 учеников.

Мы все любим красивые цифры, но мало кто показывает, сколько седых волос стоит за ними у команды реализации. Чем ближе старт, тем больше хаоса: уроки дописываются на коленке, рассылки меняются за пять минут до отправки, а техспец превращается в многорукого Шиву.

За годы работы я вывела для себя железные правила, которые помогли мне сберечь нервы и выжить в период бесконечных запусков. Делюсь ими с вами:

1️⃣ Жесткий дедлайн на изменения

Мы всегда договаривались «на берегу»: за 24 часа до старта никакие глобальные изменения не вносятся. Текст на сайте остается таким, какой он есть. Письма уходят по согласованному сценарию. Правило «стоп-правок» уберегает от фатальных ошибок, которые делаются исключительно из-за спешки.

2️⃣ Резервный план на случай «всё сломалось»

Всегда дублируйте каналы связи. Мы используем простую и надежную механику: после того как пользователи заполняют форму для email-рассылки, мы перекидываем их на дополнительную страницу.

На этой странице мы даем выбор и предлагаем присоединиться к каналу для уведомлений: либо в Телеграм, либо в мессенджер Max.

С учетом текущих реалий нельзя полагаться только на один мессенджер — тот же Телеграм сейчас у многих работает со сбоями, а другие популярные приложения заблокированы. Благодаря такой воронке у нас появляется минимум два канала коммуникации с человеком. И если в день икс один из сервисов «ляжет», вы не потеряете людей и спасете продажи.

3️⃣ Запасные вебинарные комнаты с разными плеерами

Это прямо мастхэв в условиях современных блокировок! Буквально на днях я была на автовебинаре, где было подготовлено минимум три комнаты с абсолютно разными видеоплеерами (YouTube, Zoom и другие).

Фишка в том, что в каждой комнате последовательно висела кнопка: «Если не работает трансляция — переходите в запасную комнату».

То есть я зашла в первую комнату — у меня трансляция не заработала. Я кликнула на кнопку, перешла во вторую — там всё отлично, эфир пошел. Но и там на всякий случай висела кнопка для перехода в третью комнату. Таким образом клиент сам по цепочке находит тот плеер, который у него работает. Итог: вне зависимости от страны и провайдера, люди остаются на эфире.

4️⃣ Право на сон

Героизм и работа по 20 часов в сутки ведут только к выгоранию. Я на своем опыте поняла, что ошибки чаще всего совершаются от банального недосыпа, когда глаз замыливается, и ты в упор не видишь пропущенную галочку в настройках.

Пройдя всю эту изнанку и глубоко поняв логику платформы, я осознала главное: техническую рутину нужно упрощать.

🛠 Именно поэтому я и создала магазин Гетшоп. Чтобы помочь школам и таким же техническим специалистам, какой была я, быстро внедрять современный и продуманный дизайн без сложной разработки. Чтобы у вас было больше времени на сон и меньше стресса из-за кода.

🎢 Запуски — это всегда адреналин. Но пусть он приносит удовольствие, а не желание выбросить ноутбук в окно!

💬 Коллеги, делитесь в комментариях: какой момент на запусках для вас самый стрессовый? Или, может быть, у вас есть веселая история о том, как всё пошло

Привет, друзья! На связи Настя Соло. 👋

Сегодня хочется немного поностальгировать и рассказать вам о том, как трансформировался наш подход к продукту. Те, кто с нами давно, наверняка помнят, как всё начиналось.

📦 Раньше магазин Гетшоп работал по классической модели: мы предлагали готовые, полностью собранные наборы оформления.

Механика была следующей: если вы покупали элементы по отдельности — скидки не было. Но если брали полный комплект (всё в едином стиле), то получали отличную скидку 25%.

По сути, это было выгодно: те элементы, которые не были нужны вам прямо сейчас, доставались вам условно в подарок. И, возможно, они пригодились бы в будущем. Но со временем мы поняли одну важную вещь — нашим клиентам не хватает свободы выбора.

Многим техспецам и владельцам школ нужно было оформить, например, только список тренингов и сами уроки. И им психологически не хотелось добавлять в корзину лишние блоки просто ради того, чтобы получить ту самую скидку за комплект.

Мы услышали вас. И больше года назад полностью перестроили систему, превратив магазин Гетшоп в настоящий лего-конструктор.

🛠 Мы дали вам возможность собирать кабинет пользователя как пазл. Выбирать только то, что реально нужно вашему проекту прямо сейчас. Но мы не могли просто взять и отменить скидки за объем!

Поэтому мы разработали новую, прогрессивную систему лояльности, которая привязана не к количеству добавленных товаров, а к сумме вашей корзины.

Как это работает сейчас?

Как только общая сумма вашего заказа достигает 10 000 рублей, у вас автоматически активируется начальная скидка 5%.

А дальше включается приятная математика: при каждом увеличении суммы корзины кратно 5 000 рублей, ваша скидка пропорционально растет! Она увеличивается шаг за шагом: 10, 15, 20 и вплоть до максимальных 25 процентов.

Получается идеальный баланс: вы платите только за те решения, которые будете использовать, и при этом автоматически снижаете итоговую стоимость корзины.

🛒 Вы можете сами зайти на сайт, положить нужные блоки в корзину и посмотреть, как умная система пересчитывает итоговую сумму с учетом вашей нарастающей скидки.

💬 Коллеги, поделитесь: а как вам комфортнее работать? Вы предпочитаете собирать визуальную часть школы постепенно, по отдельным элементам, или любите закрыть этот вопрос разом и оформить платформу от и до? 👇

#НовостиГетшоп