Магия CSS/HTML/JS на GetCourse, Prodamus.XL и вообще
1.38K subscribers
24 photos
5 videos
1 file
13 links
Канал клуба Магии CSS/HTML/JS. Подписка по ссылке https://gcwithme.ru/getmagic. Промокод спрашивайте в @getmagic_chat
Download Telegram
🔴 «Можно ли купить доступ к одному уроку?» — часто спрашиваете вы.

Нет, но можно взять полный доступ ко всем урокам на 7 дней. Стоимость: 1500 руб.

Для получения доступа напишите Декану @gcwithmebot кодовую фразу «7 дней» и оплатите доступ.
ЗАПУСКАЕМ СОБЫТИЯ ПО КНОПКЕ «ОТПРАВИТЬ КОММЕНТАРИЙ»

Простой скрипт от @DmitrySpace, позволяющий запускать обработчик формы с любыми действиями для авторизованных пользователей, отправляющих комментарий через блок «Лента комментариев».

Как можно использовать это решение? Приведу пару примеров.

1. Автоматизация сбора отзывов на лендинге и выдача мгновенного вознаграждения (запуск процесса, отправка рассылки).

2. Геймификация на марафонах. Если использовать «ленту комментариев» вместо формы ответа на задание, можно начислять бонусы и/или отправлять рассылку в Телеграм со ссылкой на следующее (или бонусное) видео.

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
10 минут (если механика придумана заранее)

🔥Что принесет проекту?
Новые механики позволят увеличить вовлеченность пользователей. Больше вовлеченнности → больше покупок → больше денег в кассе

#лендинг #геймификация
Магия CSS/HTML/JS на GetCourse, Prodamus.XL и вообще pinned «🔴 «Можно ли купить доступ к одному уроку?» — часто спрашиваете вы. Нет, но можно взять полный доступ ко всем урокам на 7 дней. Стоимость: 1500 руб. Для получения доступа напишите Декану @gcwithmebot кодовую фразу «7 дней» и оплатите доступ.»
СТАТУС ТРЕНИНГА "ПРОЙДЕН"

В Клубе теперь 2 версии скрипта, которые позволяют ставить тренингам класс, который будет индикатором их "пройденности".

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

Версия номер два
1. Ставит статус "Пройден" только, когда выполнены все задания во всех уроках и во всех подтренингах в тренинге.
2. Работает на основе парсинга страниц, что, конечно, немного медленнее, чем в первом варианте, но этот код имеет другие преимущества:
— Может работать в чатиуме, если галочка «Не приводить список к нативному виду» Включена в настройках тренингов.
— Проходит по всему дереву подтренингов.

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
5 минут

#тренинги
ТЕСТИРОВАНИЕ С ВЫБОРОМ ОТ 1 ДО 10

Набор стилей от Dmitry Space, который переворачивает варианты ответов в тестировании горизонтально, что идеально подходит для тестов, в которых предлагается оценить что-то по шкале, например, от 1 до 10.

Это решение подойдёт как для урока, так и для обычной страницы.

Ограничения:
1. Во всех вопросах должны быть одинаковые варианты ответа.
2. Не поддерживается выбор нескольких вариантов ответа.

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
5 минут (если само тестирование уже создано)

🔥Что принесет проекту?
Создаст у пользователей приятное впечатление при прохождении тестирования.

#тестирование
This media is not supported in your browser
VIEW IN TELEGRAM
ЗВЕЗДНЫЙ РЕЙТИНГ

Изначально этот урок появился в одной из Недель Магии как элемент геймификации. Затем @araviw обновила его для того, чтобы в одной анкете собирать сразу все оценки уроков тренинга. Согласитесь, удобно - есть анкета из 30 вопросов (один вопрос - это один урок), а в самом уроке виден только один вопрос, который относится к этому уроку, а остальные 29 не видны. Видимость делается автоматически, никакого ручного труда!

Затем оно стало поддерживать оценку нескольких вопросов в большой анкете (звездочки+поле для ввода текста), потом добавили и цели.

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

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
20 минут

🔥Что принесет проекту?
Вы сможете заменить туговатый и страшноватый блок от самого ГК (раздел "Качество тренинга") или просто застилизовать анкету

#анкеты
ТОЧНОЕ КОЛИЧЕСТВО ДОСТУПНЫХ УРОКОВ В ТРЕНИНГЕ

Один из самых популярных багов у Геткурса в подсчете уроков решен @Isagaya.

Что было раньше? Геткурс выводит под название тренинга количество уроков, которые вообще есть внутри этого тренинга, при этом считая также и скрытые от пользователя. Поэтому обязательно найдется на курсе пользователь, который сосчитает сам и будет спрашивать о том, почему же ему выдали уроков меньше, чем заявлено.

Поэтому приходилось или скрывать эту строчку или не допускать скрытые уроки. Или отвечать :)

А с уроком Максима вы сможете сделать пересчет и вывести правильное количество уроков! Долой ужасные баги платформы!

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
20 минут

🔥Что принесет проекту?
Уберете давний баг, сохраните нервы свои и пользователя.

#уроки #тренинги
СРЕДНИЙ БАЛЛ ЗА УРОКИ

Новый урок от Dmitry Space, в котором разбирается, как сделать такой прогресс-бар, который наглядно показывает успеваемость ученика.

Будет полезно в том случае, если работы учеников проверяются учителем, который вручную ставит оценку (балл) за выполненное задание. Идеально для школьных программ.

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
10 минут

🔥Что принесет проекту?
Позволит ученикам видеть свою успеваемость и добавит элемент игры. Т.к. каждое выполненное задание влияет на средний балл, то у учеников будет дополнительный стимул выполнять все домашки качественно.

#тренинги #прогрессбар
СТИЛИЗАЦИЯ РАДИО-ТОЧЕК И ЧЕКБОКСОВ

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

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

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

Поэтому чаще всего - как создалось, так и оставилось.

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

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
30 минут

🔥Что принесет проекту?
Научитесь стилизовать сложные системные элементы в согласии с дизайном

#анкеты #формы
This media is not supported in your browser
VIEW IN TELEGRAM
GETCOURSE И СЕТКА Bootstrap 3

Сам Геткурс собран на технологии Bootstrap, а это значит, что часть компонентов доступна "из коробки", если уметь обращаться к их классам. Решение из мастер-класса @araviw показывает то, как правильно установить разметку для переключающихся табов, которая позволяет создавать вкладки на лендинге и их стилизовать.

зы Есть в магии секретный EXTRA раздел, где собрано множество решений, которых нет в Практической части, но это не делает их менее ценными :) Заглядывайте туда для расширения своего кругозора :)

🔎 Где искать урок?
Тренинги → EXTRA → Мастер-классы

🕘 Сколько требуется времени на установку?
15 минут

🔥Что принесет проекту?
Сможете делать переключающиеся табы на ленде без применения хитрых скриптов. Отличный вариант представления информации на лендинге, когда надо "ужать" информацию.

#верстка #лендинг
КАК ОГРАНИЧИТЬ ОПЛАТУ МИНИМАЛЬНОЙ СУММОЙ

Небольшой скрипт от Dmitry Space, который ограничивает оплату минимальной суммой в предложениях с произвольной ценой.

Если пользователь введёт сумму меньше минимальной, то скрипт автоматически исправит её на минимально допустимое значение.

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
2 минуты

🔥Что принесет проекту?
— Исключит ошибки платёжных систем, которые связаны с тем, что сумма заказа слишком маленькая.
— Позволит делать "оплату донатами", с разумной начальной ценой.

#лендинг #форма
This media is not supported in your browser
VIEW IN TELEGRAM
СОЗДАНИЕ ВСПЛЫВАЮЩИХ ПОДСКАЗОК

Иногда, когда нам нужно что-то пояснить в тексте на лендинге, нам приходится ставить звездочки и делать внизу пояснительные тексты. Но есть более элегантное решение — tooltips.

Тултипы — это всплывающие окошки, появляющиеся рядом с текстом при наведении на него курсора. @DmitrySpace адаптировал это популярное решение под Геткурс и научил превращать всплывающие блоки в аккуратные подсказки.

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
5 минут

🔥Что принесет проекту?
Удобный формат предоставления дополнительной информации пользователю, приятный для глаза и легко встраиваемый в любой дизайн.

#лендинг
This media is not supported in your browser
VIEW IN TELEGRAM
СЛАЙДЕР С КАСТОМНЫМИ СТРЕЛКАМИ И СЧЕТЧИКОМ

Про слайдеры мы рассказывали не однократно в уроках, но их вариации бесконечны :)

Этот же урок @araviw решает сразу три задачи по кастомизации слайдера - вывод собственных стрелок (что позволяет не мучиться с пересозданием системных) и вывод счётчика слайда, который показывает номер текущего слайда и число слайдов в галерее. А третье - нестандартный показ контента внутри слайдера.

Данный урок может быть использован как в решении с стандартными плитками, так и модифицированными. Если второе, то плитки примут вид двухколоночного блока, где слева картинка, а справа сам контент. По желанию вы можете использовать блок, где есть кнопка в контенте. Или же переставить стрелки в область слайда.


🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
20 минут

🔥Что принесет проекту?
Научитесь создавать нестандартные адаптивные слайдеры на базе блоков Геткурса.

#слайдер #лендинг
JS: ВСПЛЫВАЮЩИЕ БЛОКИ (7 СЦЕНАРИЕВ)

Урок, который был записан одним из первых в Клубе для облегчения решения технических задач с окнами «pop up»: мощь сокрыта в данных видео! Потому что @DmitrySpace разобрал для вас следующие сценарии:

1 и 2. Когда всплывание происходит по клику на элемент или ссылку
3. При наведении курсора на элемент
4. При открытии страницы (или спустя время от этого события)
5. При уводе курсора мыши из зоны просмотра сайта
Сценарий, который позволит отловить пользователя, который только планирует уйти со страницы
6. Или при нажатии на кнопку закрытия вкладки
Помните задачу, когда клиент просит сделать всплывающее окошко на клик по крестику в браузере? Вот решение.
7. После прокрутки страницы до конкретного элемента.

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
5 минут

🔥Что принесет проекту?
Повысите конверсию страниц засчет тригеров для пользователя. Сможете расширить функционал Геткурса в недостающих местах.
СЕРВИС GRID GENERATOR. СОЗДАНИЕ СЛОЖНЫХ СЕТОК

В разделе Теория мы публикуем не только "общепозновательный" материал по основам html и css, но и разбор новых технологий для верстки или решения, познакомившись с которыми, вы сможете решать нестандартные задачи легким путем.

Один из таких обзоров посвящен гридам. Это модульная система верстки, которая помогает в тех случаях, когда обычный флекс уже становится бессилен.
Основное отличие в более гибкой настройке сетки и "выцепление" ячеек для размещения контента.

Как пользоваться, какие есть сервисы и как быстро все это "утянуть" на ГК - вы узнаете из урока @Isagaya

🔎 Где искать урок?
Тренинги → Теория

🕘 Сколько требуется времени на установку?
10 минут

🔥Что принесет проекту?
Сможете верстать макеты с более сложными расположением элементов, чем привыкли ранее
СЛАЙДЕР С МОДИФИЦИРОВАННЫМИ ТОЧКАМИ (ПОЛОСКАМИ)

Модификация еще одна из рода Болейн слайдеров, которую можно гибко настроить.

Слайдеры в ГК весьма ограничены по своему представлению - сами слайды, стрелки по бокам, да и точки внизу. Все. А что, если мы скажем вам, что любой из этих элементов можно застилизовать? 😏

В прошлом обзоре мы показали модификацию слайда и стрелок (помните, что их можно легко подменить?). Сейчас же @araviw покажет модифицированные точки, которые стали полосками. Комбо из этих двух уроков поможет вам легко переставить элементы, вплоть до того, что перетянуть навигацию слайдера в боковую часть, изменив привычное горизонтальное расположение на вертикальное.

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
15 минут

🔥Что принесет проекту?
Научитесь создавать нестандартные адаптивные слайдеры на базе блоков Геткурса. Будете верстать слайдеры как они есть в макете без страдания по тому, что "так сделать нельзя"

#слайдер #лендинг
ПОСЛЕДОВАТЕЛЬНАЯ ФОРМА

Вы наверняка видели блок "Последовательная анкета" в геткурсе, который позволяет показывать по одному полю анкеты за раз.

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

С помощью небольшого скрипта от @DmitrySpace можно передавать ответы на ответу в скрытые поля формы.

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
10 минут

🔥Что принесет проекту?

1. Короткие формы увеличивают конверсию. Когда пользователи видят сразу, что нужно заполнить условно 10 полей, то они сделают это менее охотно, чем в том случае, если показывать им поля по одному.

2. Сможете передавать ответы в доп поля пользователя, что даст возможность использовать их через переменные. Например, показывать на страницах, отправлять в рассылке или использовать в процессах.

#анкета #форма #допполя
☀️ Летняя распродажа Школы Магии Геткурса открыта!
https://gcwithme.ru/summersale2022

Для тех, кто ждет наши распродажи для покупки клубных абонементов, сезон покупок открыт. Скидки на другие продукты нужно еще подождать.

🚩Для тех, кто быстро принимает решение, мы приготовили подарки — записи наших самых крутых марафонов при оплате 4 и 5 июля.

Также прошу обратить внимание на 2 предложения, которые мы выставляем впервые — годовые абонементы на все продукты школы.

Но и это еще не все.

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

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

👉 https://gcwithme.ru/summersale2022
КАК ДОБАВИТЬ ПЛИТКИ В ВИДЕО
а потом сделать из них слайдер)

В последнее время таких запросов становится всё больше. Поэтому @DmitrySpace разработал для вас элегантное решение, которое позволяет очень легко добавлять в плитки видео вместо картинок.

А если к этому добавить скрипт из одного из прошлых уроков, получим полноценный слайдер с видео.

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
10 минут

🔥Что принесет проекту?
Нестандартные блоки для лендинга :)
СТИЛИЗАЦИЯ БЛОКА "АКТУАЛЬНЫЕ СОБЫТИЯ"

Есть два основных метода работы с событиями на Геткурсе в плане их представления пользователю - визуализация через системный блок актуальных событий и календарь.
Календарь есть в клубе как полноценное решение, но иногда оно избыточно. Поэтому, если вам хочется просто немного "освежить" вид блока от самого ГК - смотрите урок от @araviw.

С помощью этого решения вы сможете понять основу стилизации блока или полностью повторить макетный вариант.

Так же из урока вы узнаете как переименовать заголовок блока или вырезать лишние текстовые элементы из описаний событий.

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
10 минут

🔥Что принесет проекту?
Сможете сделать быструю стилизацию важного блока

#расписание #уроки