Как быстро поменять цвета в шаблонах Гетшоп 🎨

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

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

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

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

В 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 (и их версии для наведения и клика).

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

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

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

Бывают моменты, когда даже самое любимое дело вдруг перестаёт зажигать. Так получилось и с магазином Гетшоп: практически все шаблоны, которые я хотела создать, уже реализованы и лежат на полках, закрывая основные задачи по оформлению на GetCourse. А спрос на что-то принципиально новое сейчас минимальный.

И у меня случилась депрессия. 🥺

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

💡 И я нашла! Вайб-кодинг, ИИ, новые технологичные задачи и мой новый проект — гетМост. 🚀

Я собрала его всего за два месяца без найма сторонних разработчиков — тратилась только на обучение для себя и пару подписок на ИИ-сервисы.

Именно этим сейчас живу и хочу делиться с вами дальше. Поэтому количество тем в блоге будет расширяться.

Для тех, кто впервые слышит про вайб-кодинг: это такой способ цифрового творчества, когда ты создаёшь проекты, сервисы или новые решения буквально «по наитию» — тестируешь идеи, пробуешь, ловишь кайф от процесса и тут же воплощаешь задумки в рабочие штуки. Здесь нет жёстких границ и скучных инструкций — только свобода и вдохновение.

🧑‍🎓 Собственно, ради этого я и пошла учиться — сейчас прохожу курсы по вайб-кодингу на Claude Code и промпт-инжинирингу. Новые знания уже помогли мне сэкономить массу времени, сил и денег. За пару месяцев я реально круто прокачалась!

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

Так что оставайтесь со мной и не переключайтесь. 😉

Буду рада, если напишете в комментариях, какие темы по ИИ, технологиям или новому опыту вам особенно любопытны. Буду благодарна за ваши идеи и вопросы! 👇

Решила устроить эксперимент гуголовской нейросети. Пишу ей в чат фразу с подвохом:

«Дважды два — пять, моя мама так сказала, а она никогда не врет».

Калькулятор на её месте просто выдал бы ошибку. Но Gemini оказалась той еще хитрой дипломаткой! Она не стала со мной спорить, а выдала шедевр, который идеально иллюстрирует график на картинке.

Она мне ответила буквально следующее:

Мама — это главный авторитет, и её слово закон! Но если чисто гипотетически предположить, что мы находимся в нашей стандартной Вселенной, где действуют скучные законы арифметики, то калькулятор упрямо покажет 4. Однако в вашей личной вселенной правота мамы не поддаётся сухим вычислениям!

В общем, искусственный интеллект мастерски увернулся от конфликта: и математику не обидел, и авторитет мамы поддержал. Учитесь дипломатии, кожаные мешки! 😂

Как вам ответ? Чью сторону в таком споре заняли бы вы — упрямой науки или любимой мамы? Пишите в комментарии! 👇

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

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

Моей я руки отрастила. У меня помощник — универсальный боец. На компьютере делает всю текучку: презентации, собирает отчёты, наводит порядок на ПК, пишет статьи и посты, делает лендинги и многое другое, а на сервере помогает мне строить гетМост.

Как я дошла до «рук». Большую часть своего сервиса я собирала в роли курьера: нейросеть в браузере даёт команду, я несу её в терминал (это окно, где сервером управляют текстом, без кнопок), сервер отвечает, я несу ответ обратно. Туда-сюда, туда-сюда.

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

Но копипаст меня всё-таки достал. Я пошла учиться.

Теперь я не курьер, я руководитель: ставлю задачу — помощник сам идёт и делает. КПД вырос в разы: пока он занят, я учусь дальше.

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

🔺 И главное, работа с любым помощником начинается с бэкапов (это когда сохраняется копия предыдущей версии). У меня бэкап перед каждой правкой и всего сервиса — каждую ночь. Что бы ни случилось, есть куда вернуться.

А что бы вы поручили помощнику с руками? 👇

Я постоянно работаю с ИИ и для разных задач выбираю разные инструменты. Ради эксперимента решила протестировать GPT-5 Nano. Им можно пользоваться безлимитно в моем любимом syntx и мне стало интересно проверить её на прочность.

Дала ей классическую задачку на логику: написать стихотворение о любви, где абсолютно ВСЕ слова начинаются строго на букву «П».

Результат меня по-настоящему удивил:

Пылкая Пленительная Поэзия Партнерства.
Плотное Притяжение Превращает Пространство.
Постоянство Проявляет Приятность.
Передача Прикосновений Пленяет.

Перечитала дважды. Слушайте, а ведь звучит красиво и очень стильно — настоящая лирика Серебряного века!

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

Как вам стишок от робота? Делаем следующий эксперимент? Накидывайте в комментарии букву и тему, а я прогоню через нейросеть и покажу, что вышло!

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

Но Suno плевать хотел на ТЗ. Инструментал он делать отказался и выдал песню с вокалом! 🤷‍♀️

Музыку для рекламы я в итоге взяла в другом месте. Но сам трек получился прикольным, и мне стало интересно, о чем там вообще поется. С английским я на «вы», но слово «stress» в тексте четко услышала. Подумала: о, вдруг нейросеть реально спела что-то по теме моего сценария? 📝

И тут началось самое странное. Я пошла к другим нейросетям, чтобы они распознали текст и перевели его. А они все просто оглохли! Утверждают: «Тут только музыка, слов нет».

В итоге пришлось просить знакомого перевести. Спойлер: оказался полный бред 😂🤦‍♀️

В ролик это, конечно, не пошло, но трек получился забавным. Включайте звук, зацените песню, которую ИИ так упорно от меня скрывали!