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

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

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

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

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

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

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

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

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

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

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

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

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

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

👉 https://gcwithme.ru/summersale2022

СТИЛИЗАЦИЯ БЛОКА "АКТУАЛЬНЫЕ СОБЫТИЯ"

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

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

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

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

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

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

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

БЛОКИРОВАНИЕ КНОПОК КАРТОЧЕК ОТ/ДЛЯ СЕГМЕНТОВ

Представьте ситуацию - колонки с контентом. И для одного из сегментов нужно кнопки убрать, а все остальное оставить.

Что приходит на ум? Сделать копию блока и по сегменту в копии блока стилями скрывать кнопку.

Но у вас есть мы :)) И конкретно решение @Isagaya, которое за пару минут решит эту задачу "без лишних телодвижений".

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

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

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

🔥Что принесет проекту?
Облегчение работы техспеца по управлению контентом на ленде

#карточки #кнопки

СУММИРОВАНИЕ ПОЛЕЙ В ФОРМЕ (КАЛЬКУЛЯТОР УСПЕХА)

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

Например из этого урока @araviw вы узнаете как можно пользователю представить возможность обновлять свои данные путем сложения и вычитания.

Например, у пользователя есть какое-то максимальное значение для банка. Но в течение курса он вносит доход или потерю средств. Этот урок позволит реализовать подобную задачу (именно ее вторую часть по изменению текущего банка).

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

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

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

А пока мы готовимся к марафону по Геткурсу, Максим Елисеев @isagaya покоряет платформу Prodamus XL (ранее известную как AXL). Посмотрите, какую красоту он сотворил со страницей авторизации!

Есть тут спецы, работающие на XL?

Было

Стало 😎