БАННЕР КАК У ГК

Если вам прилетела такая задача, то данный урок от @araviw идеально подойдет для ее решения!

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

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

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


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

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

🔥Что принесет проекту?
Сможете повышать конверсию продаж и мероприятий

#баннеры #стилизация #продажи

КНОПКИ В УРОКАХ «СЛЕДУЮЩИЙ» и «ПРЕДЫДУЩИЙ»

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

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

Копируйте код и вставляйте в настройки аккаунта как есть.

<style>
.lesson-navigation td .hidden-xs {
display:none;
}

.lesson-navigation td a {
background:#3192d6;
color:white;
padding:5px 10px;
border-radius:20px;
transition:all 0.3s;
}

.lesson-navigation td:first-child a:before {
content:"←"
}

.lesson-navigation td:last-child a:after {
content:"→"
}

.lesson-navigation td a {
text-decoration:none;
}

@media (max-width:400px) {
.lesson-navigation td a {
font-size:12px;
}
}

.lesson-navigation td a:hover {
box-shadow:0 0 4px #3192d6;
}

.text-center.hidden-xs span {
display:none;
}
</style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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