Каморка Геткурсовода 💻 | Канал Максима Елисеева

Приветствую вас, друзья! Давно сюда ничего не постил 😉 Надеюсь вы используете канал как библиотеку полезных фишек, которые я сюда выкладывал, в этом так же была моя основная задумка. Вскоре появятся новые фишки, которые я обязательно выложу в канал, а пока я хотел бы сделать анонс самой крупной народной премии техспециалистов в области EdTech это GetTechAward! Сам я не номинировался ни на какую премию, т.к. считаю что мне никому ничего доказывать не нужно 😂 Но хочу отметить моих талантливых коллег, которые попали в номинации, поддержите их, они этого заслуживают 😎 🏆 ПРОГОЛОСОВАТЬ ТУТ

Друзья, хочу напомнить что вы можете использовать этот канал как библиотеку полезных фишек, решений и лайфхаков для Геткурса 😉 Постов в канале уже великое множество, и возможно кто-то ищет какое-то решение и ждёт подходящего поста. Каждый свой пост я подписываю хештегами: #полезная_фишка — это разработка/решение для улучшения функциональности и визуального стиля Геткурса #лайфхак — это упрощения, которые помогают сделать жизнь на платформе гораздо легче, или помогают более быстрому и понятному взаимодействию Не стесняйтесь делать поиск по этим хештегам просто кликнув на них. Возможно то решение или улучшение которое вы ищите, уже публиковалось в канале. А может вы найдете для себя что-то интересненькое и примените у себя на проекте 😊

Поблочный скролл страницы Модный эффект применяемый на современных страницах чтобы порционно показывать информацию пользователю дабы избежать каши. Я тоже люблю такую подачу информации, и решил поделиться с вами, как можно сделать поблочный скролл на Геткурсе 😏 Сперва давайте разместим наши блоки на странице, заверстаем их как надо с вашим дизайном, и потом применим этот эффект. Кстати, вы можете не растягивать ваши блоки на 100vh высоты экрана, скрипт сделает это за вас. Но чтобы избежать эффекта начального "масштабирования" при загрузке контента на сайте, всё же можно сделать блокам высоту 100vh (делается это с помощью обложки в блоке, если там не предусматривается обложка то можно её и не ставить вовсе). Для начала нам нужно подгрузить несколько скриптов и стилей для плагина, который будет манипулировать страницей при скролле. Данные теги нужно поставить в Настройки страницы, перейти в Расширенные настройки -> Показать дополнительные настройки и вставить в "Теги в разделе HEAD": <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/vendors/jquery.easings.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js"></script> После этого не забудьте сохранить и опубликовать страницу. Далее, нам нужно присвоить классы нашим блокам, назовём их scroll-block-1, scroll-block-2 и scroll-block-3 соответственно (см. на скриншоте). Не обязательно так называть, но эти классы в дальнейшем нам понадобятся для перечисления в скрипте, вы так же можете поставить и свои. Ну и остаётся только поставить следующий скрипт в конец страницы в JS блок: $(document).ready(function() { // Здесь указать классы блоков, которые есть на странице var sections = $(".scroll-block-1, .scroll-block-2, .scroll-block-3"); sections.wrap("<div class='section'></div>"); $(".section").wrapAll("<div id='fullpage'></div>"); window.page = $('#fullpage').fullpage({ css3: true, scrollBar: true, }); }); В переменной sections указываем те самые классы блоков, которые мы разметили в редакторе. Именно они и будут листаться в полноэкранном поблочном режиме. Рекомендую на такой странице размечать все блоки, иначе прокрутка может повести себя неадекватно 🏃 P.S. На последок: для более углублённого эффекта скроллинга страницы без правого скролл-бара, можете скрыть его поставив CSS блок на страницу и прописав там body { overflow: hidden !important; } P.S.S.: Учтите что это свойство нужно прописывать в самый последний момент на странице, когда вы всё сделаете, и пролистать редактор наверх, чтобы если что закомментровать его, т.к. он скроет скролл даже в редакторе 😂 #полезная_фишка

📨 Каналы и чаты для тех специалистов онлайн школ. Интересное и полезное в одной папке 👉 добавить себе Посмотреть все каналы и чаты https://t.me/addlist/oknXCN4XIWU1ZjAy

Наиболее частый запрос который я слышу: нужно скрыть из левого меню некоторые пункты. Чаще всего это "Мои покупки", потому что у клуба или у школы своя система оповещения о купленных продуктах или же иное информирование о приобретенных продуктах (полностью другая страница, отдельный телеграм бот и тд.) Немного разберу как до всего этого можно докопаться и по аналогии решить не только эту задачу но и другие подобные. Открыв нужное меню на сайте, мы можем перейти в панель разработчика (кнопка F12 по умолчанию) и инспектором элементов пройтись по списку. Получим подобную структуру как на скриншоте №2. Ну а далее дело за малым, навести на нужный div (или в данном случае li) чтобы подсветился именно тот пункт, который нужно скрыть, и просто берем его класс из атрибута class. Далее нужно перейти в Настройки аккаунта, во вкладку Настройки, где промотав чуть ниже мы должны написать следующее в раздел "Счетчики и прочие скрипты для BODY": <style> .menu-item-my_deals { display: none; } </style> Конкретно сейчас мы решили задачу по скрытию пункта "Мои покупки" из раздела "Продажи". Ровно так же по аналогии решаются и другие задачи по скрытию пунктов, даже самых главных из левого меню 😉 P.S.: стили могут сработать не сразу, нужно подождать рекомендуемое время (10 минут) как написано в описании поля. #лайфхак

Готовлю море активностей и контента, о котором некоторые уже мельком слышали, ну а многие ещё не знают. Обещаю, скоро узнаете всё, именно поэтому я затихал на какое-то время после своего дня рождения и немного до 😁 Но пора вернуться к делам контента, и у меня есть что вам рассказать и показать. Кто-то ещё пользуется модулем комментариев на ГК? Мне захотелось более явно переделать его внешний вид, и более явно выделить структуру каждого комментария. Использовав простенькие стили мне удалось преобразить его в более приятную модель (скриншот №2) и более структурированно-читаемую 🏃 Следующие стили нужно вставить в "Стили" в Подробные настройки блока: .comment-form-wrapper { border-radius: 8px; } .comment-wrapper { border-radius: 8px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.44); } .user-image-wrapper img { border-radius: 50%; } .comment-level { margin-bottom: 8px; } Решил поделиться с вами, вдруг кому-то пригодится 😉 А вообще у меня была идея более основательно переработать этот блок, и эти стили только начало ✨ #полезная_фишка

Друзья, сегодня у меня день рождения! 🎁 Мне исполнилось 35 😅 Я очень счастлив что у нас собралось такое потрясающее сообщество 🎈 Дальше будет только лучше! 🎉🍾 Ну а я пошел отмечать 👀

Лето, хочется отдохнуть, и я не исключение 😊 Надеюсь ваш день прошел хорошо, или кто-то уже отдыхает в отпуске ✨ Скоро обязательно вернусь к вам с контентом, я не потерялся 😎

Всем отличного начала рабочей недели! 🏃 Запись стрима №7 "Конструктор тренингов", посвященный старому редактору уже доступна для просмотра приобретавшим участие 😉 Перейти к записи можно по этой ссылке 😊

Друзья, стрим мастер-класс на тему "Конструктор тренингов" (старый конструктор) скоро начнётся! Старт в 16:00. Я уже включил трансляцию, параллельно всё настраиваю и проверяю. Для тех, кто приобретал участие ссылка будет внизу этой страницы (пожалуйста, не забудьте авторизоваться, если разлогинились) Так же ссылки придут на указанную вами почту при регистрации, и в бота-енота 😉 P.S. Страница вебинарной комнаты по независящим от меня причинам может грузиться достаточно долго. Геткурс решил пошалить) если страница долго не грузится, обновите ещё раз, и дождитесь пока загрузится ☺️

Весна, середина сезона, а значит самое время и для моего сезонного стрима мастер-класса "Прожарки макетов" на тему "Конструктор тренингов" который состоится 15 мая в 16:00 в моём клубе Train IT. ➡️ Принять участие и посмотреть программу стрима Как и всегда…

Когда-то давно я создал мини-курс, который навсегда разорвал представление о скучном дизайне страниц оплат на Геткурсе. На странице оплаты используется "старый редактор" в котором я и собирал эти дизайны. Новичка, или человека, который даже в средней степени…

Когда-то давно я создал мини-курс, который навсегда разорвал представление о скучном дизайне страниц оплат на Геткурсе. На странице оплаты используется "старый редактор" в котором я и собирал эти дизайны. Новичка, или человека, который даже в средней степени разбирается в вёрстке, может смутить топорность и чрезмерная перенагруженность редактора, его непонятность и сложность в обращении. На своём стриме мастер-классе на тему "Конструктор тренингов" который состоится 15 мая в 16:00 в моём клубе Train IT, я научу вас укрощению этого редактора, покажу вам крутые фишки и приёмы, которые помогут делать вам такие дизайны, которые вы сами захотите, и наконец-то перестанете его бояться и сможете творить красоту и там! ➡️ Принять участие и посмотреть программу стрима Как и всегда, в данный момент действуют льготные цены до 13 мая 23:59: Для счастливых обладателей GTFcard — 2290р. Обычная льготная цена — 2690р. А уже 14 мая цена изменится и станет 3390р. для всех. 🗣Даже если у вас не получится посетить стрим, то приобретая участие запись останется у вас навсегда в личном кабинете клуба Train IT. Как я уже писал ранее, "старый редактор" используется не только на страницах оплаты, но и в большинстве других системных страниц. С моим подходом к этому редактору вы станете на 130% всемогущи, так как сможете верстать не только на лендингах, но и в принципе переделать системные страницы под нужды онлайн-проектов. Покорив старый редактор вы с уверенностью можете заявить, что знаете о вёрстке на платформе на 100% 😎 ➡️ Принять участие и посмотреть программу стрима Начало стрима 15 мая в 16:00

Давно ли вы пользовались блоком "Плитки картинок"? 🤔 Это достаточно устаревший блок с хорошим превьювером картинок, но выглядит он совершенно несовременно, и редко его используют на лендингах для презентации своих проектов. Его большой недостаток в том, что он не сохраняет свою колоночность, а переносит картинку за картинкой на следующую строчку. Так же если рассматривать этот блок при сжатии дальше, он достаточно странно принимает форму двух колонок с огромными отступами слева и справа, и очень рано приобретает свой одноколоночный вид аж на 640 и ниже пикселей. Я пошаманил с этим блоком, и придал ему новую жизнь (скриншот №2, №3). Так же я добавил поверх немного своих стилизаций, но самое главное я сделал ему вменяемый колоночный вид без переносов картинок. То есть до 768 пикселей мы имеем стабильно 3 колонки, до 480 пикселей — 2, и ниже — 1. Стили в CSS-блоке следующие: .thumbnails-list { columns: 3; column-gap: 20px; } .thumbnails-list a { margin-right: 0; width: inherit; break-inside: avoid; } .thumbnails-list a img { max-width: 100%; border-radius: 15px; } @media (max-width: 768px) { .thumbnails-list { columns: 2; } } @media (max-width: 480px) { .thumbnails-list { columns: 1; } } Такой редизайн вполне гармонично и теперь уже деликатнее будет смотреться при верстке современных лендингов. Пользуйтесь ✨ P.S.: предварительно блок у меня растянут в настройках на 12 колонок в ширину.