Гетшоп | Готовые шаблоны для GetCourse (Геткурс)
Развеиваем страх кода. Часть №2. Анимация при взаимодействии (псевдоклассы) Привет, друзья! На связи Настя Соло. Главная задача любой анимации в веб-интерфейсе — дать пользователю обратную связь. Человек должен сразу считывать, куда можно нажать и сработал ли его клик. Вспомните обычные ссылки: вы навели курсор, и появился «кликабельный палец» или подчеркивание. Это базовый сигнал для мозга, что элемент активен. Точно так же должны вести себя кнопки, поля для ввода и карточки. Продуманный интерфейс дает отклик на действия. Благодаря этому проект выглядит живым, дорогим и качественным. В 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 вставьте этот же самый код. Если вы меняете кнопки в СТАРОМ конструкторе (например, в списке тренингов): Нажмите кнопку «Действия» в правом верхнем углу ➡ «Настроить вид» ➡ и вставьте наш код в поле со значком </> (Стили). Это перекрасит и анимирует все кнопки на...
🤔А кем вы были в «прошлой жизни»? Привет, друзья! На связи Настя Соло. 👋 Недавно задумалась: ведь до того, как мы все с головой ушли в онлайн, у большинства из нас была совсем другая реальность. Другие профессии, совершенно другие цели и планы на жизнь. Никто же не рождается сразу техспецом, продюсером или дизайнером. У каждого за плечами свой уникальный, а иногда и очень неожиданный путь в интернет-профессии. 🎢 Решила вспомнить свой. Спойлер: побросало меня изрядно! Мало кто знает, но у меня есть красный диплом повара-пекаря-кондитера четвертого разряда. Да-да, я умею не только верстать красивые страницы для магазина Гетшоп, но и профессионально печь торты! А дальше был настоящий квест по карьерной лестнице. Я торговала на рынке, работала официантом, была секретарем и согласовывала проекты по строительству и реконструкции зданий. 📈 Целых 9 лет я отдала работе в Билайне. Прошла долгий путь с самых низов — от простого специалиста колл-центра до руководителя отдела по работе с партнерами, оттоку и клиентскому сервису в Московском регионе. «Кто бы мог тогда подумать, что девушка с дипломом кондитера и опытом работы на рынке станет заядлым технарем и будет запускать проекты на Геткурсе?» 🤗 Мне кажется, такие истории очень сближают. Они показывают, что мы все пришли сюда разными дорогами, принесли свой жизненный опыт, и именно поэтому делаем такие классные проекты сейчас. Коллеги, давайте устроим вечер знакомств! Расскажите в комментариях: кем вы работали до того, как перешли в онлайн? Какая профессия была у вас в «прошлой жизни»? 👇 #Другое
Как быстро поменять цвета в шаблонах Гетшоп📺 В большинстве шаблонов вы можете легко изменить цвета, шрифты, фон и некоторые другие параметры. Мы специально закладываем эту возможность, чтобы любой шаблон можно было адаптировать к вашему стилю и задачам — без долгих доработок и сложных настроек. Чтобы быстро и наглядно менять оформление под себя, мы предлагаем использовать браузерные расширения для работы со стилями. Сегодня расскажем, как это работает на примере расширения Magic CSS —https://github.com/webextensions/live-css-editor но вы можете пользоваться и аналогами. 1⃣С чего начать: ➖Прежде, чем начать менять цвета, установите приобретенный шаблон себе на Геткурс. 2⃣Перейдите к элементам которые будете менять. ➖Например, если меняете оформление тренингов, то перейдите на страницу где видно оформление тренингов. ➖Находясь на нужной странице запустите расширение. 3⃣Вставляем код который будем менять: ➖Если вы меняете цвета в шаблонах из коллекций — скопируйте единый файл управления темой и вставьте его целиком в рабочую область расширения. ➖Если вы меняете цвета в других шаблонах — скопируйте CSS шаблона и вставьте его в рабочую область расширения. 4⃣Меняем цвета: ➖Находите переменные того элемента, который хотите поменять — все они подписаны для удобства и подбираете цвет прямо в редакторе Magic CSS. Например, хотите изменить цвет кнопки в тренингах — находите соответствующие переменные и задаёте свои цвета. Все изменения вносимые в расширение вы будете видеть сразу на странице. О том, как обозначаются цвета и как сделать свой градиент мы рассказывали в предыдущем посте. 5⃣Сохраняем результат: ➖Когда подобрали нужные цвета, просто перенесите обновленный код на GetCourse. Если вы делали оформление с помощью коллекций и хотите использовать разные цвета для разных тренингов, посмотрите наш пост «С единым файлом управления темой 20% усилий дают 80% результата!» о том, как оптимизировать этот процесс. 💘Было полезно? Ставьте лайк, пишите вопросы и делитесь впечатлениями — ваши реакции помогают нам делать материалы ещё лучше! #СоветыОтГетшоп #Коллекции
Развеиваем страх кода. Часть №1 Привет, друзья! На связи Настя Соло. 👋 Я знаю, как бывает страшно брать первые заказы на визуальное оформление. Смотришь на пустой экран и думаешь: «А вдруг у меня не получится? Вдруг код сломается?». Чтобы побороть этот страх, нужно просто начать с маленьких шагов. Взять готовый кусочек кода, скопировать, вставить — и своими глазами увидеть классный результат. Сегодня мы с вами создадим такой «вау-эффект» своими руками. Поговорим про псевдоэлементы! Звучит как сложное заклинание, но на деле это гениальный инструмент в дизайне. Псевдоэлементы позволяют менять внешний вид или добавлять новые детали на страницу вообще без создания лишних блоков. Их очень много, поэтому я решила сделать для вас целую серию постов! Мы разберем разные варианты: текстовые, декоративные (когда мы рисуем плашки или иконки буквально из воздуха), варианты для красивых подчеркиваний и выделений. А начнем сегодня с текстовых — они работают напрямую с буквами и строками. Делаем журнальную «буквицу» за 1 минуту Вы наверняка видели в глянцевых журналах или на дорогих сайтах прием, когда первая буква абзаца огромная и красивая, а остальной текст ее элегантно обтекает. Вам не нужно идти в редактор и пытаться выделить первую букву в отдельный текстовый блок разными шрифтами — код сделает всё сам. Пошаговая инструкция: как вставить код 👩💻 Давайте попробуем прямо сейчас! 1⃣ Нажмите на любой блок с текстом и кликните на кнопку «Стиль». 2⃣ Спуститесь ниже к разделу «CSS класс блока» и в поле «Теги» впишите наш класс: my-text 3⃣ Затем скопируйте код (он будет чуть ниже). 4⃣ В этом же меню «Стиль» найдите ссылку «Подробные настройки» (она находится в верхнем углу) и нажмите на нее. 5⃣ В открывшемся окне просто вставьте скопированный код: .my-text::first-letter font-size: 350%; /* Размер нашей буквы */ font-weight: 700; /* Жирность буквы от 100 до 900 */ color: #ff6600; /* Замените на любой свой цвет */ float: left; /* Текст будет обтекать букву справа */ margin-right: 10px; /* Отступ от буквы до текста */ line-height: 1; /* Выравнивание */ Как только вы сохраните изменения, первая буква вашего текста превратится в стильный акцент. Попробуйте поиграть с настройками, чтобы посмотреть, как меняется дизайн от изменения одной цифры в коде: 🔹 Поменяйте размер (font-size) и цвет (color). 🔹 Обязательно протестируйте толщину буквы (font-weight). Значения здесь задаются в цифрах от 100 (очень тонкая) до 900 (очень жирная). Выбирайте круглые значения (100, 200, 300 и так далее) и смотрите, как меняется результат! Чувствуете это? Вы только что сами, с помощью нескольких строчек кода, сделали крутой дизайнерский элемент! И так работает всё оформление. Глаза боятся, а руки делают. В следующих постах мы продолжим разбирать магию псевдоэлементов, чтобы вы собрали свою копилку крутых фишек. 🔥 Кто уже пошел тестировать код на платформе? Жду ваши огонечки и скрины с результатами в комментариях! 👇 #СоветыОтГетшоп
Как техспецу начать зарабатывать больше уже завра? Привет, друзья! На связи Настя Соло. 👋 Давайте начистоту. Многие технические специалисты рано или поздно упираются в финансовый потолок. Больше клиентов на стандартное техническое ведение взять просто физически невозможно — в сутках всего 24 часа. Значит, нужно расширять чек за счет новых дорогих услуг. Например, делать красивое визуальное оформление школ для своих заказчиков. Обычно для этого нужно быть дизайнером или верстальщиком, а на изучение новых профессий уйдут месяцы. Но у меня для вас есть готовая бизнес-модель. Она позволяет зарабатывать на визуале уже сейчас, без выгорания и покупки дорогих обучений. С нашими шаблонами вы можете уже завтра делать индивидуальное оформление школ даже без знания кода. Вы просто берете и добавляете эту новую, очень востребованную услугу в свой прайс. А чтобы вам было легко это продавать, я продумала безопасную схему работы. Вам даже не нужно покупать шаблон заранее, рискуя своими деньгами. Как это работает на практике? У вас есть два пути: 1⃣ Работа под ключ (для ваших текущих или новых клиентов) Если человек уже нанял вас как техспеца, он вряд ли захочет настраивать визуал сам. Вы показываете заказчику примеры дизайна, он выбирает нужный и вносит предоплату. На эти деньги вы покупаете шаблон в магазине Гетшоп и за 40 минут устанавливаете его по нашей инструкции. Остаток суммы забираете себе за работу. А исходники шаблона навсегда остаются у вас для работы с будущими проектами! 2⃣ Личные рекомендации (дополнительный доход) Бывает, что вы общаетесь с коллегами или знакомыми экспертами, которые хотят настраивать всё своими руками. Вы можете просто порекомендовать им наши решения в личной переписке и дать свою партнерскую ссылку. Человек сам оплачивает шаблон, а вы получаете приятный процент с каждой такой продажи. И самое главное в этой модели — никакого синдрома самозванца! Вы не «впариваете» воздух. Вы даете клиенту или коллеге крутой, современный и абсолютно рабочий продукт. Они в восторге от визуала, а вы — в отличном плюсе. И это не просто теория! 👉 В карусели к этому посту я прикрепила отзыв Анастасии. Она уже приобрела наши коллекции шаблонов, внедрила их в работу и успешно на этом зарабатывает. По её словам, магазин Гетшоп буквально открыл для нее новый мир дизайна. Обязательно смахните фото, чтобы прочитать её историю — пусть это станет для вас тем самым знаком, что пора действовать! Кстати, чтобы ваш заказчик при выборе дизайна под ключ не видел изначальную стоимость шаблонов и не задавал лишних вопросов, я придумала классную штуку. Я хочу собрать для вас «слепой каталог» — презентацию со скриншотами дизайнов без наших логотипов и цен. Вы сможете просто пересылать этот файл клиентам для согласования визуала. 🔥Если вам нужен такой инструмент для работы — пишите «каталог» в комментариях. Если будет спрос, я его подготовлю! Все нужные ссылки для старта: 🔗Зарегистрироваться в партнерской программе, чтобы получить свою личную ссылку для рекомендаций, можно здесь 👇 Ссылка на регистрацию партнера — https://get-shop-online.ru/y/75dde2d 🔗А посмотреть все варианты дизайна и выбрать те, что вы будете предлагать на созвонах уже завтра, можно тут 👇 Твоя ссылка на каталог — https://get-shop-online.ru/shop#education?smm&utm_source=dzen&utm_medium=post&utm_campaign=smm #СоветыОтГетшоп #ПартнёркаОтГетшоп
Больше, чем просто бонусы❤️ Привет, друзья! 👋 Наша главная миссия в проекте — «клиент навсегда». Мы радуемся каждому новому покупателю, как новому члену нашей большой семьи, и всегда смотрим на перспективу. Для нас важно не просто отдать готовый дизайн, а выстроить долгие, теплые отношения и дать такой сервис, чтобы вам хотелось возвращаться. Именно поэтому магазин Гетшоп — это не просто витрина с шаблонами. Это заботливая экосистема, в которой мы продумали прозрачную программу лояльности. И самый быстрый способ получить первый приятный бонус — это просто поделиться своими впечатлениями. Мы дарим 200 бонусных рублей на ваш счет за любой честный отзыв о нашей работе или купленном шаблоне! Правило максимально простое: 1 бонус = 1 рубль. Этими деньгами можно смело оплачивать свои следующие покупки. 📝 Если вы уже приобрели наши решения и готовы поделиться мнением, просто заполните форму обратной связи по этой ссылке (https://get-shop-online.ru/cms/system/contact). Ваше сообщение сразу попадет к нам в систему, мы увидим ваш профиль и с радостью начислим бонусы! Но на этом подарки не заканчиваются. Мы настроили систему так, чтобы постоянным клиентам было по-настоящему выгодно обновлять свои проекты из года в год. Чем дольше вы с нами, тем больше автоматические скидки: 🎁 На 3-ю покупку вас ждет первый приятный дисконт. 🎁 На 5-ю покупку скидка становится еще ощутимее. 🎁 А на 7-ю покупку вы получаете максимальную выгоду! Мы искренне ценим ваше доверие. Пусть каждое обновление дизайна приносит вашим школам красоту, а вашему бюджету — реальную экономию. Оставляйте свои отзывы по ссылке выше, забирайте заслуженные бонусы и переходите в каталог за новыми стильными решениями 👇 Твоя ссылка на каталог — https://get-shop-online.ru/shop#education?smm&utm_source=vk&utm_medium=post&utm_campaign=smm #НовостиГетшоп
