Каморка Геткурсовода 💻 | Канал Максима Елисеева
Open in Telegram
Остались вопросы? Пишите — @Isagaya Этот уютный канал посвещён фишкам и нестандартным решениям по дизайнам, интерфейсам и функционалам платформы от Куратора школы Магии Геткурса — Максима Елисеева. Мой второй канал обо всём - https://t.me/closetmax ;)
Show more2 368
Subscribers
No data24 hours
-27 days
-2230 days
Posts Archive
\n\n\nПосле этого не забудьте сохранить и опубликовать страницу. Далее, нам нужно присвоить классы нашим блокам, назовём их scroll-block-1, scroll-block-2 и scroll-block-3 соответственно (см. на скриншоте). Не обязательно так называть, но эти классы в дальнейшем нам понадобятся для перечисления в скрипте, вы так же можете поставить и свои. Ну и остаётся только поставить следующий скрипт в конец страницы в JS блок:\n\n$(document).ready(function() {\n // Здесь указать классы блоков, которые есть на странице\n var sections = $(\".scroll-block-1, .scroll-block-2, .scroll-block-3\");\n\n sections.wrap(\"\");\n $(\".section\").wrapAll(\"\");\n \n window.page = $('#fullpage').fullpage({\n css3: true,\n scrollBar: true,\n });\n});\n\nВ переменной sections указываем те самые классы блоков, которые мы разметили в редакторе. Именно они и будут листаться в полноэкранном поблочном режиме. Рекомендую на такой странице размечать все блоки, иначе прокрутка может повести себя неадекватно 🏃\n\nP.S. На последок: для более углублённого эффекта скроллинга страницы без правого скролл-бара, можете скрыть его поставив CSS блок на страницу и прописав там body { overflow: hidden !important; }\nP.S.S.: Учтите что это свойство нужно прописывать в самый последний момент на странице, когда вы всё сделаете, и пролистать редактор наверх, чтобы если что закомментровать его, т.к. он скроет скролл даже в редакторе 😂\n\n#полезная_фишка","datePublished":"2024-08-02T14:04:58Z","dateModified":"2024-08-02T14:04:58Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}},{"@type":"ListItem","position":4,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1551877032-closetgc/posts/416","url":"https://telemetr.io/en/channels/1551877032-closetgc/posts/416","mainEntityOfPage":"https://telemetr.io/en/channels/1551877032-closetgc/posts/416","headline":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","datePublished":"2024-08-02T14:04:54Z","dateModified":"2024-08-02T14:04:54Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1551877032-closetgc/posts/415","url":"https://telemetr.io/en/channels/1551877032-closetgc/posts/415","mainEntityOfPage":"https://telemetr.io/en/channels/1551877032-closetgc/posts/415","headline":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","datePublished":"2024-08-02T14:04:53Z","dateModified":"2024-08-02T14:04:53Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1551877032-closetgc/posts/414","url":"https://telemetr.io/en/channels/1551877032-closetgc/posts/414","mainEntityOfPage":"https://telemetr.io/en/channels/1551877032-closetgc/posts/414","headline":"📨 Каналы и чаты для тех специалистов онлайн школ. Интересное и полезное в одной папке 👉 добавить себе Посмотр…","articleBody":"📨 Каналы и чаты для тех специалистов онлайн школ. \n\nИнтересное и полезное в одной папке 👉 добавить себе\n\nПосмотреть все каналы и чаты\nhttps://t.me/addlist/oknXCN4XIWU1ZjAy","datePublished":"2024-07-09T13:02:18Z","dateModified":"2024-07-09T13:02:18Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1551877032-closetgc/posts/412","url":"https://telemetr.io/en/channels/1551877032-closetgc/posts/412","mainEntityOfPage":"https://telemetr.io/en/channels/1551877032-closetgc/posts/412","headline":"Наиболее частый запрос который я слышу: нужно скрыть из левого меню некоторые пункты. Чаще всего это \"Мои пок…","articleBody":"Наиболее частый запрос который я слышу: нужно скрыть из левого меню некоторые пункты. Чаще всего это \"Мои покупки\", потому что у клуба или у школы своя система оповещения о купленных продуктах или же иное информирование о приобретенных продуктах (полностью другая страница, отдельный телеграм бот и тд.) \n\nНемного разберу как до всего этого можно докопаться и по аналогии решить не только эту задачу но и другие подобные. Открыв нужное меню на сайте, мы можем перейти в панель разработчика (кнопка F12 по умолчанию) и инспектором элементов пройтись по списку. Получим подобную структуру как на скриншоте №2. Ну а далее дело за малым, навести на нужный div чтобы подсветился именно тот пункт, который нужно скрыть, и просто берем его класс из атрибута class.\n\nДалее нужно перейти в Настройки аккаунта, во вкладку Настройки, где промотав чуть ниже мы должны написать следующее в раздел \"Счетчики и прочие скрипты для BODY\":\n\n\n\nКонкретно сейчас мы решили задачу по скрытию пункта \"Мои покупки\" из раздела \"Продажи\". Ровно так же по аналогии решаются и другие задачи по скрытию пунктов, даже самых главных из левого меню 😉\n\n#лайфхак","datePublished":"2024-07-02T10:17:13Z","dateModified":"2024-07-02T10:17:13Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1551877032-closetgc/posts/410","url":"https://telemetr.io/en/channels/1551877032-closetgc/posts/410","mainEntityOfPage":"https://telemetr.io/en/channels/1551877032-closetgc/posts/410","headline":"Готовлю море активностей и контента, о котором некоторые уже мельком слышали, ну а многие ещё не знают. Обеща…","articleBody":"Готовлю море активностей и контента, о котором некоторые уже мельком слышали, ну а многие ещё не знают. Обещаю, скоро узнаете всё, именно поэтому я затихал на какое-то время после своего дня рождения и немного до 😁\n\nНо пора вернуться к делам контента, и у меня есть что вам рассказать и показать. Кто-то ещё пользуется модулем комментариев на ГК? Мне захотелось более явно переделать его внешний вид, и более явно выделить структуру каждого комментария. Использовав простенькие стили мне удалось преобразить его в более приятную модель (скриншот №2) и более структурированно-читаемую 🏃\n\nСледующие стили нужно вставить в \"Стили\" в Подробные настройки блока:\n\n.comment-form-wrapper {\n border-radius: 8px;\n}\n\n.comment-wrapper {\n border-radius: 8px;\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.44);\n}\n\n.user-image-wrapper img {\n border-radius: 50%;\n}\n\n.comment-level {\n margin-bottom: 8px;\n}\n\nРешил поделиться с вами, вдруг кому-то пригодится 😉\n\nА вообще у меня была идея более основательно переработать этот блок, и эти стили только начало ✨\n\n#полезная_фишка","datePublished":"2024-06-28T12:50:23Z","dateModified":"2024-06-28T12:50:23Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1551877032-closetgc/posts/409","url":"https://telemetr.io/en/channels/1551877032-closetgc/posts/409","mainEntityOfPage":"https://telemetr.io/en/channels/1551877032-closetgc/posts/409","headline":"Друзья, сегодня у меня день рождения! 🎁 Мне исполнилось 35 😅 Я очень счастлив что у нас собралось такое потря…","articleBody":"Друзья, сегодня у меня день рождения! 🎁 Мне исполнилось 35 😅\n\nЯ очень счастлив что у нас собралось такое потрясающее сообщество 🎈\n\nДальше будет только лучше! 🎉🍾\n\nНу а я пошел отмечать 👀","datePublished":"2024-06-14T09:20:58Z","dateModified":"2024-06-14T09:20:58Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1551877032-closetgc/posts/408","url":"https://telemetr.io/en/channels/1551877032-closetgc/posts/408","mainEntityOfPage":"https://telemetr.io/en/channels/1551877032-closetgc/posts/408","headline":"Лето, хочется отдохнуть, и я не исключение 😊 Надеюсь ваш день прошел хорошо, или кто-то уже отдыхает в отпуск…","articleBody":"Лето, хочется отдохнуть, и я не исключение 😊\nНадеюсь ваш день прошел хорошо, или кто-то уже отдыхает в отпуске ✨\n\nСкоро обязательно вернусь к вам с контентом, я не потерялся 😎","datePublished":"2024-06-06T15:20:15Z","dateModified":"2024-06-06T15:20:15Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1551877032-closetgc/posts/407","url":"https://telemetr.io/en/channels/1551877032-closetgc/posts/407","mainEntityOfPage":"https://telemetr.io/en/channels/1551877032-closetgc/posts/407","headline":"Всем отличного начала рабочей недели! 🏃 Запись стрима №7 \"Конструктор тренингов\" посвещенный старому редактор…","articleBody":"Всем отличного начала рабочей недели! 🏃\n\nЗапись стрима №7 \"Конструктор тренингов\" посвещенный старому редактору уже доступна для посмотра приобретавшим участие 😉\n\nПерейти к записи можно по этой ссылке 😊","datePublished":"2024-05-20T11:35:47Z","dateModified":"2024-05-20T11:35:47Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1551877032-closetgc/posts/406","url":"https://telemetr.io/en/channels/1551877032-closetgc/posts/406","mainEntityOfPage":"https://telemetr.io/en/channels/1551877032-closetgc/posts/406","headline":"Друзья, стрим мастер-класс на тему \"Конструктор тренингов\" (старый конструктор) скоро начнётся! Старт в 16:00…","articleBody":"Друзья, стрим мастер-класс на тему \"Конструктор тренингов\" (старый конструктор) скоро начнётся! Старт в 16:00.\n\nЯ уже включил трансляцию, параллельно всё настраиваю и проверяю. Для тех, кто приобретал участие ссылка будет внизу этой страницы (пожалуйста, не забудьте авторизоваться, если разлогинились)\n\nТак же ссылки придут на указанную вами почту при регистрации, и в бота-енота 😉\n\nP.S. Страница вебинарной комнаты по независящим от меня причинам может грузиться достаточно долго. Геткурс решил пошалить) если страница долго не грузится, обновите ещё раз, и дождитесь пока загрузится ☺️","datePublished":"2024-05-15T12:41:29Z","dateModified":"2024-05-15T12:41:29Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1551877032-closetgc/posts/405","url":"https://telemetr.io/en/channels/1551877032-closetgc/posts/405","mainEntityOfPage":"https://telemetr.io/en/channels/1551877032-closetgc/posts/405","headline":"Друзья, я к вам с последним напоминанием 😮 Осталось всего 6 часов до окончания действия льготной цены участия…","articleBody":"Друзья, я к вам с последним напоминанием 😮\n\nОсталось всего 6 часов до окончания действия льготной цены участия на стриме \"Конструктор тренингов\"!\n\n➡️ Принять участие и посмотреть программу стрима\n\nСтрим состоится 15 мая в 16:00 по МСК.\n🗣Даже если у вас не получится посетить стрим, то приобретая участие запись останется у вас навсегда в личном кабинете клуба Train IT.\n\nУвидимся с вами в прямом эфире или в записи, если не сможете присутствовать на стриме. Ссылка на вебинарную комнату появится на странице регистрации 15 мая ориентировочно в 15:30. Так же ссылки будут высланы в боте-еноте и на вашу электронную почту 😉","datePublished":"2024-05-13T15:02:02Z","dateModified":"2024-05-13T15:02:02Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1551877032-closetgc/posts/404","url":"https://telemetr.io/en/channels/1551877032-closetgc/posts/404","mainEntityOfPage":"https://telemetr.io/en/channels/1551877032-closetgc/posts/404","headline":"Друзья, напоминаю что до окончания действия льготной цены участия на стриме \"Конструктор тренингов\" осталось…","articleBody":"Друзья, напоминаю что до окончания действия льготной цены участия на стриме \"Конструктор тренингов\" осталось всего 7 дней!\n\n➡️ Принять участие и посмотреть программу стрима\n\nА уже 14 мая цена поднимется и станет 3390р. для всех. Все неоплаченные заказы будут отменены.\n\nСтрим состоится 15 мая в 16:00 по МСК.\n🗣Даже если у вас не получится посетить стрим, то приобретая участие запись останется у вас навсегда в личном кабинете клуба Train IT.\n\n➡️ Принять участие и посмотреть программу стрима\n\nБудем с вами безжалостно докапываться до самых тёмных секретов, который хранит старый редактор на Геткурсе 😱 Укротим и полностью подчиним его своей воле настолько, что вы сможете сами творить красоту на системных страницах, страницах оплаты заказа, и многих других где используется этот редактор ✨\n\nИ, конечно же, лампово и весело проведем этот стрим мастер-класс 🏃 Буду вас ждать ☺️","datePublished":"2024-05-07T09:44:01Z","dateModified":"2024-05-07T09:44:01Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1551877032-closetgc/posts/403","url":"https://telemetr.io/en/channels/1551877032-closetgc/posts/403","mainEntityOfPage":"https://telemetr.io/en/channels/1551877032-closetgc/posts/403","headline":"Когда-то давно я создал мини-курс, который навсегда разорвал представление о скучном дизайне страниц оплат на…","articleBody":"Когда-то давно я создал мини-курс, который навсегда разорвал представление о скучном дизайне страниц оплат на Геткурсе. На странице оплаты используется \"старый редактор\" в котором я и собирал эти дизайны. \n\nНовичка, или человека, который даже в средней степени разбирается в вёрстке, может смутить топорность и чрезмерная перенагруженность редактора, его непонятность и сложность в обращении. На своём стриме мастер-классе на тему \"Конструктор тренингов\" который состоится 15 мая в 16:00 в моём клубе Train IT, я научу вас укрощению этого редактора, покажу вам крутые фишки и приёмы, которые помогут делать вам такие дизайны, которые вы сами захотите, и наконец-то перестанете его бояться и сможете творить красоту и там!\n\n➡️ Принять участие и посмотреть программу стрима\n\nКак и всегда, в данный момент действуют льготные цены до 13 мая 23:59:\nДля счастливых обладателей GTFcard — 2290р.\nОбычная льготная цена — 2690р.\n\nА уже 14 мая цена изменится и станет 3390р. для всех.\n🗣Даже если у вас не получится посетить стрим, то приобретая участие запись останется у вас навсегда в личном кабинете клуба Train IT.\n\nКак я уже писал ранее, \"старый редактор\" используется не только на страницах оплаты, но и в большинстве других системных страниц. С моим подходом к этому редактору вы станете на 130% всемогущи, так как сможете верстать не только на лендингах, но и в принципе переделать системные страницы под нужды онлайн-проектов.\n\nПокорив старый редактор вы с уверенностью можете заявить, что знаете о вёрстке на платформе на 100% 😎\n\n➡️ Принять участие и посмотреть программу стрима\n\nНачало стрима 15 мая в 16:00","datePublished":"2024-04-26T09:23:01Z","dateModified":"2024-04-26T09:23:01Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1551877032-closetgc/posts/400","url":"https://telemetr.io/en/channels/1551877032-closetgc/posts/400","mainEntityOfPage":"https://telemetr.io/en/channels/1551877032-closetgc/posts/400","headline":"Давно ли вы пользовались блоком \"Плитки картинок\"? 🤔 Это достаточно устаревший блок с хорошим превьювером кар…","articleBody":"Давно ли вы пользовались блоком \"Плитки картинок\"? 🤔\n\nЭто достаточно устаревший блок с хорошим превьювером картинок, но выглядит он совершенно несовременно, и редко его используют на лендингах для презентации своих проектов. Его большой недостаток в том, что он не сохраняет свою колоночность, а переносит картинку за картинкой на следующую строчку. Так же если рассматривать этот блок при сжатии дальше, он достаточно странно принимает форму двух колонок с огромными отступами слева и справа, и очень рано приобретает свой одноколоночный вид аж на 640 и ниже пикселей.\n\nЯ пошаманил с этим блоком, и придал ему новую жизнь (скриншот №2, №3). Так же я добавил поверх немного своих стилизаций, но самое главное я сделал ему вменяемый колоночный вид без переносов картинок. То есть до 768 пикселей мы имеем стабильно 3 колонки, до 480 пикселей — 2, и ниже — 1.\n\nСтили в CSS-блоке следующие:\n\n.thumbnails-list {\n columns: 3;\n column-gap: 20px;\n}\n\n.thumbnails-list a {\n margin-right: 0;\n width: inherit;\n break-inside: avoid;\n}\n\n.thumbnails-list a img {\n max-width: 100%;\n border-radius: 15px;\n}\n\n@media (max-width: 768px) {\n .thumbnails-list {\n columns: 2;\n }\n}\n\n@media (max-width: 480px) {\n .thumbnails-list {\n columns: 1;\n }\n}\n\nТакой редизайн вполне гармонично и теперь уже деликатнее будет смотреться при верстке современных лендингов. Пользуйтесь ✨\n\nP.S.: предварительно блок у меня растянут в настройках на 12 колонок в ширину.","datePublished":"2024-04-23T08:25:22Z","dateModified":"2024-04-23T08:25:22Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1551877032-closetgc/posts/398","url":"https://telemetr.io/en/channels/1551877032-closetgc/posts/398","mainEntityOfPage":"https://telemetr.io/en/channels/1551877032-closetgc/posts/398","headline":"Весна, середина сезона, а значит самое время и для моего сезонного стрима мастер-класса \"Прожарки макетов\" на…","articleBody":"Весна, середина сезона, а значит самое время и для моего сезонного стрима мастер-класса \"Прожарки макетов\" на тему \"Конструктор тренингов\" который состоится 15 мая в 16:00 в моём клубе Train IT.\n\n➡️ Принять участие и посмотреть программу стрима\n\nКак и всегда, в данный момент действуют льготные цены до 13 мая 23:59:\nДля счастливых обладателей GTFcard — 2290р.\nОбычная льготная цена — 2690р.\n\nА уже 14 мая цена изменится и станет 3390р. для всех.\n🗣Даже если у вас не получится посетить стрим, то приобретая участие запись останется у вас навсегда в личном кабинете клуба Train IT.\n\nМне кажется нет такого человека, у кого бы старый конструктор тренингов не вызывал ужас и боль. Непонятные настройки, странные блоки, ужасные классы и вложенности которые выносят мозг. А так хочется сделать что-нибудь красивое и стоящее... Знакомо?\n\nНа стриме мастер-классе мы укротим этот редактор так, что вы навсегда перестанете его бояться, и будете делать свои собственные блоки со своим дизайном и наводить красоту. Конструктор тренингов, иначе говоря \"старый редактор\" используется не только в тренингах, но ещё и на страницах Оплаты заказа, Регистрации/Логина в школе, странице обратной связи, странице успешной оплаты и это далеко не весь список!\n\nЧто конкретно будет на стриме? Рассказываю:\n— Сделаем полнейший разбор \"старого редактора\" Геткурса\n— Расскажу вам неочевидные моменты и лайфхаки работы с сеткой и блоками так, что вы с легкостью сможете построить даже самую сложную структуру страницы\n— Поделюсь с вами секретными приёмами лёгкой стилизации таких структур\n— Поверстаем красоту\n— Отвечу на все интересующие вас вопросы\n— Как и всегда пообщаемся с вами в неформальной и весёлой обстановке\n\n➡️ Принять участие и посмотреть программу стрима\n\nВажные моменты:\n❕ Если вы владелец GTFcard, но на странице вы видите цену, не соответствующую владельцу карты, сперва авторизуйтесь в проекте под вашим аккаунтом, имеющим GTFcard.\n❕ Если вы авторизованы, являетесь владельцем GTFcard и всё равно видите несоответствующую цену, то убедитесь, что у вас подключён клуб Train IT в вашем аккаунте Клуба Магии, чтобы получить соответствующие преимущества.\n❕ Если у вас уже был аккаунт в клубе Train IT, пожалуйста, так же авторизуйтесь с него или восстановите пароль, чтобы корректно совершить покупку. Слияние двух аккаунтов чревато потерей доступов ко всему, что у вас было ранее.","datePublished":"2024-04-11T13:30:27Z","dateModified":"2024-04-11T13:30:27Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1551877032-closetgc/posts/396","url":"https://telemetr.io/en/channels/1551877032-closetgc/posts/396","mainEntityOfPage":"https://telemetr.io/en/channels/1551877032-closetgc/posts/396","headline":"Может кто-то уже знал, но для меня стало новостью, что Геткурс втихую уже перешел от использования FontAwesom…","articleBody":"Может кто-то уже знал, но для меня стало новостью, что Геткурс втихую уже перешел от использования FontAwesome 4.7 на 6.0 версию ✨\n\nЭто значит что можно использовать более продвинутую библиотеку иконок при верстке. Гораздо больше выбор, быстрее отклик, в общем стало мега удобно 🤩","datePublished":"2024-04-05T12:18:27Z","dateModified":"2024-04-05T12:18:27Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1551877032-closetgc/posts/395","url":"https://telemetr.io/en/channels/1551877032-closetgc/posts/395","mainEntityOfPage":"https://telemetr.io/en/channels/1551877032-closetgc/posts/395","headline":"/*** Стили закрытой корзины ***/ .lt-basket.basket-collapsed { border-radius: 10px; background: #fff; color:…","articleBody":"/*** Стили закрытой корзины ***/\n\n.lt-basket.basket-collapsed {\n border-radius: 10px;\n background: #fff;\n color: #000;\n box-shadow: 0 3px 5px 1px lightgrey;\n}\n\n.lt-basket .total-cost-str {\n font-size: 1.3em;\n font-weight: bold;\n}\n\n.lt-basket .old-total-cost-str {\n color: #bbb;\n}\n\n/*** Общий стиль кнопок ***/\n\n.lt-basket .buttons button, \n.lt-basket .total-view button {\n border: none;\n background: #fff;\n color: #777;\n box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.1), \n 0 5px 10px rgba(0, 0, 0, 0.1), \n 0 10px 15px rgba(0, 0, 0, 0.1);\n -webkit-box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.1), \n 0 5px 10px rgba(0, 0, 0, 0.1), \n 0 10px 15px rgba(0, 0, 0, 0.1);\n border-radius: 10px;\n}\n\n.lt-basket .total-view button {\n position: absolute;\n left: 50%;\n transform: translate(-50%, 50%);\n margin-left: 0 !important;\n}\n\n.lt-basket .buttons button:focus, \n.lt-basket .total-view button:focus {\n outline: none;\n}\n\n.lt-basket .buttons button:active:focus,\n.lt-basket .total-view button:active:focus {\n box-shadow: inset 0 -7px 5px rgba(0, 0, 0, 0.0025),\n inset 0 5px 10px rgba(0, 0, 0, 0.15);\n -webkit-box-shadow: inset 0 -7px 5px rgba(0, 0, 0, 0.0025),\n inset 0 5px 10px rgba(0, 0, 0, 0.15);\n background-color: #fff;\n color: #777;\n outline: none;\n}\n\n/*****************************************************/\n\n/*** Стили раскрытой корзины ***/\n\n.lt-basket {\n border-radius: 10px;\n background: #fff;\n color: #000;\n box-shadow: 0 3px 5px 1px lightgrey;\n}\n\n.lt-basket .positions-table {\n color: #777;\n}\n\n.lt-basket .positions-table .form-control {\n height: 37px !important;\n width: 37px !important;\n border-radius: 50%;\n}\n\n.lt-basket .positions-table .old-total-price {\n color: #bbb;\n}\n\n.lt-basket .positions-table .total-price, \n.lt-basket .positions-table .total-row .offer-title {\n font-weight: bold;\n font-size: 1.3em;\n color: #000;\n}\n\n@media (max-width: 430px) {\n .lt-basket .positions-table .total-price, \n .lt-basket .positions-table .total-row .offer-title,\n .lt-basket .total-cost-str {\n font-size: 1em;\n }\n}","datePublished":"2024-03-15T13:40:55Z","dateModified":"2024-03-15T13:40:55Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1551877032-closetgc/posts/393","url":"https://telemetr.io/en/channels/1551877032-closetgc/posts/393","mainEntityOfPage":"https://telemetr.io/en/channels/1551877032-closetgc/posts/393","headline":"Сегодня решил поделиться с вами сочным дизайном корзины на ГК, чтобы как-то разнообразить её скучный вид 😉 Ес…","articleBody":"Сегодня решил поделиться с вами сочным дизайном корзины на ГК, чтобы как-то разнообразить её скучный вид 😉\n\nЕсть несколько состояний корзины: закрытая и раскрытая.\n\nДля владеющих CSS людей я отделил комментариями в стилях части стилей, которые отвечают за разные состояния, можете попробовать подредактировать некоторые моменты под ваш проект 😏\n\nСтили необходимо поставить на ту страницу, где находится ваша корзина, в самый верх страницы в отдельный CSS-блок.\n\nСами стили будут ниже этого поста. Так как они не вмещаются в него 😆\n\n#полезная_фишка","datePublished":"2024-03-15T13:40:43Z","dateModified":"2024-03-15T13:40:43Z","author":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"publisher":{"@type":"Organization","name":"Каморка Геткурсовода 💻 | Канал Максима Елисеева","url":"https://telemetr.io/en/channels/1551877032-closetgc","image":"https://img.tlmtr.io/c/1H1w6I/5386834019884316310?ty=x"},"commentCount":0}}]}




+1
+1
Приветствую вас, друзья! Давно сюда ничего не постил 😉 Надеюсь вы используете канал как библиотеку полезных фишек, которые я сюда выкладывал, в этом так же была моя основная задумка. Вскоре появятся новые фишки, которые я обязательно выложу в канал, а пока я хотел бы сделать анонс самой крупной народной премии техспециалистов в области 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
+1
Наиболее частый запрос который я слышу: нужно скрыть из левого меню некоторые пункты. Чаще всего это "Мои покупки", потому что у клуба или у школы своя система оповещения о купленных продуктах или же иное информирование о приобретенных продуктах (полностью другая страница, отдельный телеграм бот и тд.)
Немного разберу как до всего этого можно докопаться и по аналогии решить не только эту задачу но и другие подобные. Открыв нужное меню на сайте, мы можем перейти в панель разработчика (кнопка F12 по умолчанию) и инспектором элементов пройтись по списку. Получим подобную структуру как на скриншоте №2. Ну а далее дело за малым, навести на нужный div чтобы подсветился именно тот пункт, который нужно скрыть, и просто берем его класс из атрибута class.
Далее нужно перейти в Настройки аккаунта, во вкладку Настройки, где промотав чуть ниже мы должны написать следующее в раздел "Счетчики и прочие скрипты для BODY":
<style>
.menu-item-my_deals {
display: none;
}
</style>
Конкретно сейчас мы решили задачу по скрытию пункта "Мои покупки" из раздела "Продажи". Ровно так же по аналогии решаются и другие задачи по скрытию пунктов, даже самых главных из левого меню 😉
#лайфхак+1
Готовлю море активностей и контента, о котором некоторые уже мельком слышали, ну а многие ещё не знают. Обещаю, скоро узнаете всё, именно поэтому я затихал на какое-то время после своего дня рождения и немного до 😁
Но пора вернуться к делам контента, и у меня есть что вам рассказать и показать. Кто-то ещё пользуется модулем комментариев на ГК? Мне захотелось более явно переделать его внешний вид, и более явно выделить структуру каждого комментария. Использовав простенькие стили мне удалось преобразить его в более приятную модель (скриншот №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. Страница вебинарной комнаты по независящим от меня причинам может грузиться достаточно долго. Геткурс решил пошалить) если страница долго не грузится, обновите ещё раз, и дождитесь пока загрузится ☺️
Друзья, я к вам с последним напоминанием 😮
Осталось всего 6 часов до окончания действия льготной цены участия на стриме "Конструктор тренингов"!
➡️ Принять участие и посмотреть программу стрима
Стрим состоится 15 мая в 16:00 по МСК.
🗣Даже если у вас не получится посетить стрим, то приобретая участие запись останется у вас навсегда в личном кабинете клуба Train IT.
Увидимся с вами в прямом эфире или в записи, если не сможете присутствовать на стриме. Ссылка на вебинарную комнату появится на странице регистрации 15 мая ориентировочно в 15:30. Так же ссылки будут высланы в боте-еноте и на вашу электронную почту 😉
Друзья, напоминаю что до окончания действия льготной цены участия на стриме "Конструктор тренингов" осталось всего 7 дней!
➡️ Принять участие и посмотреть программу стрима
А уже 14 мая цена поднимется и станет 3390р. для всех. Все неоплаченные заказы будут отменены.
Стрим состоится 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
+2
Давно ли вы пользовались блоком "Плитки картинок"? 🤔
Это достаточно устаревший блок с хорошим превьювером картинок, но выглядит он совершенно несовременно, и редко его используют на лендингах для презентации своих проектов. Его большой недостаток в том, что он не сохраняет свою колоночность, а переносит картинку за картинкой на следующую строчку. Так же если рассматривать этот блок при сжатии дальше, он достаточно странно принимает форму двух колонок с огромными отступами слева и справа, и очень рано приобретает свой одноколоночный вид аж на 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 колонок в ширину.Весна, середина сезона, а значит самое время и для моего сезонного стрима мастер-класса "Прожарки макетов" на тему "Конструктор тренингов" который состоится 15 мая в 16:00 в моём клубе Train IT.
➡️ Принять участие и посмотреть программу стрима
Как и всегда, в данный момент действуют льготные цены до 13 мая 23:59:
Для счастливых обладателей GTFcard — 2290р.
Обычная льготная цена — 2690р.
А уже 14 мая цена изменится и станет 3390р. для всех.
🗣Даже если у вас не получится посетить стрим, то приобретая участие запись останется у вас навсегда в личном кабинете клуба Train IT.
Мне кажется нет такого человека, у кого бы старый конструктор тренингов не вызывал ужас и боль. Непонятные настройки, странные блоки, ужасные классы и вложенности которые выносят мозг. А так хочется сделать что-нибудь красивое и стоящее... Знакомо?
На стриме мастер-классе мы укротим этот редактор так, что вы навсегда перестанете его бояться, и будете делать свои собственные блоки со своим дизайном и наводить красоту. Конструктор тренингов, иначе говоря "старый редактор" используется не только в тренингах, но ещё и на страницах Оплаты заказа, Регистрации/Логина в школе, странице обратной связи, странице успешной оплаты и это далеко не весь список!
Что конкретно будет на стриме? Рассказываю:
— Сделаем полнейший разбор "старого редактора" Геткурса
— Расскажу вам неочевидные моменты и лайфхаки работы с сеткой и блоками так, что вы с легкостью сможете построить даже самую сложную структуру страницы
— Поделюсь с вами секретными приёмами лёгкой стилизации таких структур
— Поверстаем красоту
— Отвечу на все интересующие вас вопросы
— Как и всегда пообщаемся с вами в неформальной и весёлой обстановке
➡️ Принять участие и посмотреть программу стрима
Важные моменты:
❕ Если вы владелец GTFcard, но на странице вы видите цену, не соответствующую владельцу карты, сперва авторизуйтесь в проекте под вашим аккаунтом, имеющим GTFcard.
❕ Если вы авторизованы, являетесь владельцем GTFcard и всё равно видите несоответствующую цену, то убедитесь, что у вас подключён клуб Train IT в вашем аккаунте Клуба Магии, чтобы получить соответствующие преимущества.
❕ Если у вас уже был аккаунт в клубе Train IT, пожалуйста, так же авторизуйтесь с него или восстановите пароль, чтобы корректно совершить покупку. Слияние двух аккаунтов чревато потерей доступов ко всему, что у вас было ранее.
Может кто-то уже знал, но для меня стало новостью, что Геткурс втихую уже перешел от использования FontAwesome 4.7 на 6.0 версию ✨
Это значит что можно использовать более продвинутую библиотеку иконок при верстке. Гораздо больше выбор, быстрее отклик, в общем стало мега удобно 🤩
/*** Стили закрытой корзины ***/
.lt-basket.basket-collapsed {
border-radius: 10px;
background: #fff;
color: #000;
box-shadow: 0 3px 5px 1px lightgrey;
}
.lt-basket .total-cost-str {
font-size: 1.3em;
font-weight: bold;
}
.lt-basket .old-total-cost-str {
color: #bbb;
}
/*** Общий стиль кнопок ***/
.lt-basket .buttons button,
.lt-basket .total-view button {
border: none;
background: #fff;
color: #777;
box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.1),
0 5px 10px rgba(0, 0, 0, 0.1),
0 10px 15px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.1),
0 5px 10px rgba(0, 0, 0, 0.1),
0 10px 15px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.lt-basket .total-view button {
position: absolute;
left: 50%;
transform: translate(-50%, 50%);
margin-left: 0 !important;
}
.lt-basket .buttons button:focus,
.lt-basket .total-view button:focus {
outline: none;
}
.lt-basket .buttons button:active:focus,
.lt-basket .total-view button:active:focus {
box-shadow: inset 0 -7px 5px rgba(0, 0, 0, 0.0025),
inset 0 5px 10px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0 -7px 5px rgba(0, 0, 0, 0.0025),
inset 0 5px 10px rgba(0, 0, 0, 0.15);
background-color: #fff;
color: #777;
outline: none;
}
/*****************************************************/
/*** Стили раскрытой корзины ***/
.lt-basket {
border-radius: 10px;
background: #fff;
color: #000;
box-shadow: 0 3px 5px 1px lightgrey;
}
.lt-basket .positions-table {
color: #777;
}
.lt-basket .positions-table .form-control {
height: 37px !important;
width: 37px !important;
border-radius: 50%;
}
.lt-basket .positions-table .old-total-price {
color: #bbb;
}
.lt-basket .positions-table .total-price,
.lt-basket .positions-table .total-row .offer-title {
font-weight: bold;
font-size: 1.3em;
color: #000;
}
@media (max-width: 430px) {
.lt-basket .positions-table .total-price,
.lt-basket .positions-table .total-row .offer-title,
.lt-basket .total-cost-str {
font-size: 1em;
}
}Сегодня решил поделиться с вами сочным дизайном корзины на ГК, чтобы как-то разнообразить её скучный вид 😉
Есть несколько состояний корзины: закрытая и раскрытая.
Для владеющих CSS людей я отделил комментариями в стилях части стилей, которые отвечают за разные состояния, можете попробовать подредактировать некоторые моменты под ваш проект 😏
Стили необходимо поставить на ту страницу, где находится ваша корзина, в самый верх страницы в отдельный CSS-блок.
Сами стили будут ниже этого поста. Так как они не вмещаются в него 😆
#полезная_фишка
