Магия CSS/HTML/JS на GetCourse, Prodamus.XL и вообще
1.06K subscribers
23 photos
5 videos
1 file
8 links
Канал клуба Магии CSS/HTML/JS. Подписка по ссылке https://gcwithme.ru/getmagic. Промокод спрашивайте в @getmagic_chat
Download Telegram
ЗАПУСКАЕМ СОБЫТИЯ ПО КНОПКЕ «ОТПРАВИТЬ КОММЕНТАРИЙ»

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

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

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

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

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

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

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

#лендинг #геймификация
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 минут

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

#слайдер #лендинг
СЛАЙДЕР С МОДИФИЦИРОВАННЫМИ ТОЧКАМИ (ПОЛОСКАМИ)

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

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

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

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

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

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

#слайдер #лендинг