СТИЛИЗАЦИЯ БЛОКА «ПОСЛЕДОВАТЕЛЬНАЯ АНКЕТА»

Данное решение позволяет оформить блок "Последовательная анкета" с применением css-приемов (анимация подсветки кнопки вперед/назад, вариантов ответов пользователя, степени прогресса заполнения анкеты). Стили универсальные, подходят и для обычной анкеты.

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

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

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

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

#анкета #стилизация

СБРОС ВЫПОЛНЕННЫХ УРОКОВ В ТРЕЙ

Данный урок - это новый подход к компановке списка уроков для ученика. В большинстве макетов выполненные уроки всегда остаются в текущем списке рядом с уроками на проверке или не требующими принятия. Однако для некоторых форматов обучения намного нагляднее показывать прогресс прохождения тренинга, сортируя уроки на те, которые нужно пройти и на те, которые уже сданы.

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

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

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

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

🔥Что принесет проекту?
Идеальное решение, если вы хотите "освежить" внешний вид тренинга

#стилизация #уроки #тренинги

АККОРДЕОН В СПИСКЕ УРОКОВ

Если вы сторонник аккуратных списков вместо "простыней", то это клубное решение для вас.

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

Данное решение от @araviw может быть так же использовано и для создания FAQ (блок "вопрос-ответ/частые вопросы") на сайте, как альтернатива стандартному блоку от самого Геткурса.

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

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

🔥Что принесет проекту?
Вы сможете с легкостью стилизовать большой список текста (или уроков), разбив его на заголовок и внутреннюю область.

#стилизация #уроки #тренинги

🔴 «Можно ли купить доступ к одному уроку?» — часто спрашиваете вы.

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

Для получения доступа напишите Декану @gcwithmebot кодовую фразу «7 дней» и оплатите доступ.

ЗАПУСКАЕМ СОБЫТИЯ ПО КНОПКЕ «ОТПРАВИТЬ КОММЕНТАРИЙ»

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

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

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

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

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

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

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

#лендинг #геймификация

СТАТУС ТРЕНИНГА "ПРОЙДЕН"

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

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

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

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

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

#тренинги

ТЕСТИРОВАНИЕ С ВЫБОРОМ ОТ 1 ДО 10

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

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

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

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

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

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

#тестирование

ЗВЕЗДНЫЙ РЕЙТИНГ

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

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

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

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

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

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

#анкеты

ТОЧНОЕ КОЛИЧЕСТВО ДОСТУПНЫХ УРОКОВ В ТРЕНИНГЕ

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

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

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

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

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

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

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

#уроки #тренинги

СРЕДНИЙ БАЛЛ ЗА УРОКИ

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

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

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

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

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

#тренинги #прогрессбар

СТИЛИЗАЦИЯ РАДИО-ТОЧЕК И ЧЕКБОКСОВ

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

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

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

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

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

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

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

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

#анкеты #формы

GETCOURSE И СЕТКА Bootstrap 3

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

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

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

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

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

#верстка #лендинг

КАК ОГРАНИЧИТЬ ОПЛАТУ МИНИМАЛЬНОЙ СУММОЙ

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

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

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

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

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

#лендинг #форма

СОЗДАНИЕ ВСПЛЫВАЮЩИХ ПОДСКАЗОК

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

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

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

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

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

#лендинг

СЛАЙДЕР С КАСТОМНЫМИ СТРЕЛКАМИ И СЧЕТЧИКОМ

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

Этот же урок @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. Сможете передавать ответы в доп поля пользователя, что даст возможность использовать их через переменные. Например, показывать на страницах, отправлять в рассылке или использовать в процессах.

#анкета #форма #допполя