Каморка Геткурсовода 💻 | Канал Максима Елисеева
2.38K subscribers
194 photos
18 videos
10 files
106 links
Остались вопросы? Пишите — @Isagaya

Этот уютный канал посвещён фишкам и нестандартным решениям по дизайнам, интерфейсам и функционалам платформы от Куратора школы Магии Геткурса — Максима Елисеева.

Мой второй канал обо всём - https://t.me/closetmax ;)
Download Telegram
Сделал важный апдейт для тех, у кого есть "Чекаут. Страницы оплаты" в частности платежный модуль GC Pay. 📣

Обновление уже залито. Пожалуйста, обновите разметку и скрипты из соответствующего файла, а так же стили из соответствующего стилевого файла.
Please open Telegram to view this post
VIEW IN TELEGRAM
Как вы думаете, из какого блока был свёрстан этот блок на скриншоте №1? 🧐

На размышление 30 секунд 😂

Кто-то скажет что без 4х колоночного блока тут не обойтись. Но проблема в том, что 4х колоночного блока нет в Геткурсе. Как же сделать подобную конструкцию, чтобы картинка была слева, а описание товара или любое другое текстовое составляющее было справа от неё?

На самом деле здесь используется блок "Две колонки с произвольным контентом". Всё, что нужно сделать это поставить блок желаемой картинки и блок текста друг за другом (скриншот №2). А затем применить чуть-чуть магии называемой CSS 😎

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

.flex-container .flex-column {
align-items: center;
}

.part-image,
.part-text {
max-width: calc(50% - 20px);
}

.part-text {
padding-left: 30px;
}


Так мало стилей? Да! Мы всего лишь поменяли структуру ширины блоков изображения и текста, в следствии чего они встали в один ряд друг с другом, а так же зацентрировали их относительно друг-друга. Ну а дальнейшая стилизация уже зависит от вашей фантазии, дерзайте 😉

#полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Дорогие друзья, я поздравляю вас с наступающим Новым Годом! 🎄

Я искренне хочу поблагодарить всех вас за вашу поддержку, ведь благодаря ей у меня есть стимул делать крутые и полезные вещи для вас, а так же вести этот канал. На 2024 год у меня есть амбициозные идеи, которые я хочу воплотить. Заранее о них говорить не буду, но это будет как всегда мега-полезно и практично 🥳

Я бесконечно благодарен вам, что мы собрали здесь такое дружное и сплоченное комьюнити, и меня всегда вдохновляют ваши положительные реакции на те полезности, которые я для вас готовлю. Это безумно мощный стимул для меня, и понимание, что я всё делаю правильно. Каждый раз я стараюсь улучшать качество контента, и когда-нибудь я наверное достигну апогея 😅

Я желаю абсолютно всем вам в новом году стать еще лучше, еще более успешнее чем в уходящем. Конечно же крепчайшего здоровья вам и вашим близким людям. Берегите друг друга. Вместе у нас получится всё 😉
Please open Telegram to view this post
VIEW IN TELEGRAM
🧡 🧡🧡🧡🧡🧡 🧡🧡🧡🧡🧡 😍 🥳
Please open Telegram to view this post
VIEW IN TELEGRAM
Возвращаемся после праздников в работу 😉

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

На скриншоте я показываю как можно разнообразить блок с картинкой, придав ему декоративную рамку, из которой изображение как бы "вылетело", что придаёт некий шарм самому блоку 😊

Зачастую класс блока с картинкой называется part-image, от него и будем отталкиваться. Саму картинку мы оставим не тронутой, а вот заднюю рамку со смещением повесим на псевдоэлемент. Получится примерно следующее:

.part-image {
position: relative;
z-index: 5;
}

.part-image:before {
content: '';
position: absolute;
z-index: -1;
display: block;
width: 100%;
height: 100%;
border: 10px solid #FFCA42;
transform: scale(0.95) translate(30px, 40px);
}


Как итог, мы чуть-чуть поигрались со слоями, а рамку отправили позади самого элемента задав ему z-index: -1. Приукрасили стилями как надо и сместили и чуть сузили с помощью свойства transform. Пользуйтесь

#полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Прилипающий контент. Смотрится отлично, практичен и дружелюбен в плане UX. К тому же и делается достаточно просто.

Нужно прописать контейнеру буквально одно свойство:

position: sticky;


Но использовать его нужно грамотно и правильно. Потому что почти никто не понимает почему блок не прилипает и не ездит в след за прокруткой страницы.

Во-первых, обязательно должна присутствовать координата отступа, например top: 10px. Она будет означать что контент прилипнет при прокрутке сверху и будет отступать от края окна браузера 10px. Итого у плавающего контейнера свойства будут выглядеть примерно так:

position: sticky;
top: 10px;


И второй важный момент я покажу на скриншоте к посту. У блока родителя, который содержит контейнер со свойством position: sticky должно хватать высоты, по которой как раз будет ездить внутренний блок как лифт. Лучше всего чтобы это было автоматическое расстояние основанное на растянутости вашего контента. Ну или же до определённого момента — решать вам 😉

P.S. Скрин и гифка чуть ниже)

#лайфхак #полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Как выглядят мои обучающие посты для большинства подписчиков 😂
Please open Telegram to view this post
VIEW IN TELEGRAM
Мне многие пишут, особенно уже когда мой стрим прошел, что хотели бы приобрести запись. Стримы в моём клубе Train IT это эксклюзивный контент, который не продаётся в свободном доступе, и его можно приобрести только в течение 3-4 недель после анонса до дня старта.

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

СтримоБУМ 💥

Целую неделю можно приобрести эксклюзивный контент со скидками. С 22 по 26 января включительно!

💣 https://train-it.ru/stream-boom 💣

Описание всех сезонов вы найдете на странице распродажи 😉

P.S. Советую заранее залогиниться под вашим актуальным аккаунтом в клубе, чтобы точно знать какие сезоны у вас есть, чтобы понимать, какие хотели бы приобрести.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Сделал прототип подсказок для инпута на своём тестовом сервере. Решил поделиться с вами, и спросить, нужно ли подобное для ГК под полями?

Учтите что это не предлагаемое автозаполнение, а именно "подсказки" под полем.

В общем, огонёчки если надо такое для Геткурса. Заодно в комментариях можете написать где бы вы такое применили и для чего ☺️
Please open Telegram to view this post
VIEW IN TELEGRAM
Каморка Геткурсовода 💻 | Канал Максима Елисеева
Мне многие пишут, особенно уже когда мой стрим прошел, что хотели бы приобрести запись. Стримы в моём клубе Train IT это эксклюзивный контент, который не продаётся в свободном доступе, и его можно приобрести только в течение 3-4 недель после анонса до дня…
Совсем забыл осветить прошлое напоминание в канале. Поэтому напоминаю сейчас и один раз 😜

Осталось всего 7 часов до конца распродажи стримов!
Событие СтримоБУМ 💥 начинает подходить к концу. А вместе с ним перестанут продаваться и записи стримов.

Все неоплаченные заказы будут отменены сегодня в 23:59.

💣 https://train-it.ru/stream-boom 💣

Все самые сочные практики ждут вас ещё совсем немного, а потом отправятся отдыхать в закрытом режиме без возможности покупки 😊
Please open Telegram to view this post
VIEW IN TELEGRAM
Тема кнопок всегда будет актуальна, ведь как-то надо привлекать внимание пользователей, верно? 😌

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

Такой эффект достигается с помощью радиального градиента на самой кнопке. Вот пример CSS, который используется для кнопки на скриншоте к посту, и прочие стили, которые задают подобный формат кнопке:

.btn {
background: radial-gradient(53.6% 103.93% at 28.4% 50.81%, #d58ecf 0%, #bb4056 100%);
border-radius: 10px;
font-size: 20px;
letter-spacing: -0.02em;
text-transform: uppercase;
padding-left: 45px;
padding-right: 45px;
}


В то же время важно в настройках кнопки оставить поля цветов пустыми (скриншот №2), и применить настройки. Тогда данный CSS вполне хорошо ляжет на саму кнопку. Вы можете поиграться и поставить свои цвета, которые являются главными у вас в проекте 😊

#полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Разбавим субботний вечер подборкой самых ужасных UI для регулирования громкости.

P.S.: Когда сказали, что проект должен "выделяться" среди всех по дизайну 😆
Please open Telegram to view this post
VIEW IN TELEGRAM
Привет, друзья! И конечно же всех с наступившей пятницей и надвигающимися выходными.

Как многие заметили, в течение недели я не выкладывал ничего в канал, т.к. занят запуском достаточно крупного проекта (о котором я обязательно вам расскажу), а так же готовлюсь к конференции FARSH, о которой некоторые уже слышали, где я буду вещать хоть и не слишком высокотехнологичную тему, но зато одну из самых больных, которую я вижу чуть ли не во всех чатах с частой периодичностью 😦

Такой пост покаяния получился 😅

Всех с наступающими выходными, и отличного настроения! 😉
Please open Telegram to view this post
VIEW IN TELEGRAM
В этот четверг (15 февраля), как вы знаете, я участвую на самой "мясной" конференции FARSH. Почему "мясной"? Потому что там будут самые сочные, как идеально приготовленный стейк технологии, которые помогают техническим специалистам и продюсерам привнести в проект технический БУМ.

Как я писал ранее, моя тема не является чем-то прям грандиозным из мира "высоких технологий". Я буду рассказывать про то, как кастомизировать скучные чекбоксы и радиокнопки на Геткурсе, ведь у самого Геткурса нет такой возможности в принципе. Зато эту самую боль я вижу во многих чатах, особенно там, где верстальщику или спецу дали необычный дизайн формы, где вместо чекбоксов и радиокнопок используются какие-то по истине красивые элементы выбора 😉

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

А тут скидка от меня на конференцию FARSH -10% !
Please open Telegram to view this post
VIEW IN TELEGRAM
Зачастую мне хочется поделиться бОльшим, но в основную тематику данного канал это было бы не актуально 😉

Я уже обмолвился после конференции FARSH что создам второй канал, где я буду выкладывать сторонние посты об всём, включая Геткурс, но так же затрагивая остальные технологии и платформы, с которыми я работаю. И ещё там я буду делиться моментами своей повседневной жизни

В общем, приглашаю на мой второй канал — Чулан Макса Елисеева 😦
Please open Telegram to view this post
VIEW IN TELEGRAM
Существует такая проблема как "слишком много полей в форме регистрации". Да, я и сам с такой сталкивался, и зачастую превращали страницу, как я люблю называть, в рулон туалетной бумаги 😦

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

В CSS стили блока с формой ставим:

.form-content .builder {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.part-userField {
flex: 1 0 49%;
}

.part-header, .part-button {
flex-basis: 100%;
}


И вуаля, наши поля теперь расположены в 2 ряда. Если у вас нечётное количество полей, то может быть такое, что у вас останется лишнее некрасивое место. Чтобы решить эту проблему так же элегантно, то назовите поле вашим собственным классом, и добавьте ваш класс в последнее правило, где применяется свойство flex-basis: 100%;

Должно выглядеть так:

.part-header, .part-button, .вашкласс {
flex-basis: 100%;
}


#лайфхак #полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM