Вот и первое сентября — день знаний.
Значит, пора и нам набираться новых знаний!

Полосы прокрутки: неизбежность или красота? 🧐

Скорее всего большинство из вас, у кого на лендинге есть прокручивающийся контент, будь то окна информации или даже всё окно страницы, задавались вопросом: "А можно ли как-то стилизовать область прокрутки?"

Ответ прост: можно! Существуют псевдоклассы, с помощью которых мы можем влиять на полосу прокрутки (скроллбар), и стилизовать её как нам хочется. Таких псевдокласса три:

::-webkit-scrollbar — Отвечает за целиковый скроллбар (как контейнер для скролл-трека и передвижного тумблера)

::-webkit-scrollbar-track — Путь нашего скролл-бара (сюда применяются стили формы трека, например, скругления или бекграунд)

::-webkit-scrollbar-thumb — Передвижной тумблер прокрутки (так же воспринимает цвет, формы, скругления)

В качестве примера на скриншотах к посту маленькая демонстрация со своими собственными приукрашиваниями 😊 Я применил прокрутку к "полотну" текста и стилизовал:

.part-text::-webkit-scrollbar {
    width: 10px;
    border-radius: 5px;
}

.part-text::-webkit-scrollbar-track {
    background: lavender;
    border-radius: 5px;
}

.part-text::-webkit-scrollbar-thumb {
    background: violet;
    border-radius: 5px;
}

.part-text {
    height: 250px;
    border: 1px solid violet;
    border-radius: 5px;
    padding: 15px;
    overflow-y: scroll;
}

Если вы делаете крутой дизайн, то стандартные браузерные скроллбары уж точно никак не впишутся в ваш собственный стиль сайта. Таким образом вы можете подстроить под себя даже такую деталь браузера как скроллбар 😉

#полезная_фишка

Механики всплывающих блоков ✔️

Большинство из нас пользуются всплывающими блоками методами Геткурса, где можно настроить "Показ всплывающего блока", и соответственно вставить в окошко номер этого всплывающего блока, который обычно имеет номер формата b-27f1 (для примера).

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

Например, мы можем использовать эту функцию в тексте в любом месте, обернув её в тег ссылки <a></a> и использовав атрибут onclick чтобы вызвать данную функцию. Внутри скобок пишется номер блока в кавычках, который мы хотим вызвать. Пример использования в любом месте в тексте:

<a onclick="ltShowModalBlock('b-27f1')">Запишись здесь!</a>

А чтобы применить в вашем собственном JS-коде, вы можете просто поставить вызов функции ltShowModalBlock('b-27f1') с номером вашего блока 👍

#лайфхак #полезная_фишка

Отправляем форму без формы! 😁

Все уже давно привыкли пользоваться формами в Геткурсе. Они являются неотъемлемой частью идентификации пользователя при создании заказа или регистрации. Но мало кто знает, что можно отправить форму не из самой формы 😋

И отсюда рождается много крутых механик, которые можно реализовать по нашим собственным правилам. Например, пользователь кликает на ссылку "Заказать в один клик!" и его сразу же перекидывает на страницу оплаты заказа без заполнения формы.

❗️Учтите: такой подход можно применять к тем, кто уже зарегистрирован в вашем проекте. В противном случае форма, конечно же, не отправится.

В моём примере (скриншот №1) мы создаем простой текст, который оборачиваем ссылкой, и в ссылке в атрибуте onclick пишем такой код:
$('.reg-form form').submit();

Целиковая конструкция выглядит так:

<a onclick="$('.reg-form form').submit();">Заказать в один клик!</a>

Далее, нам нужно поставить класс reg-form нашей форме, а так же скрыть её со страницы, как показано на скриншоте №2. Не забудьте также поставить туда предложение, которое будет "Выделено по умолчанию" в нашей форме, именно оно и будет передаваться в сформированный заказ.

Вуаля! Теперь если мы кликнем по нашей ссылке, нас автоматически перебросит в наш сформированный заказ. И таким образом можно придумать разнообразнейшие механики для ваших проектов, просто применив чуть больше фантазии.

P.S.: Если у вас будет 2 и более подобных ссылок, соответственно, вам нужно сделать столько же скрытых форм с предложениями и с разными классами.

P.P.S. Опять же, развивая фантазию, можно применить в собственных механиках на JS, т.к. заказ скриптами создать довольно проблематично 😜

#лайфхак #полезная_фишка

Поделюсь с вами лёгкой кастомизацией, которую вы сможете без проблем повторить и приукрасить стандартную форму Геткурса. А именно добавлением значков полям форм 😉

P.S. Телега немного перепутала порядок скриншотов, но я думаю вы поймете 😁

UPD: Поправил в тексте нумерацию скриншотов

Для начала нам нужен сам блок формы (куда же без него), и сделать пару небольших манипуляций с каждым полем. Я буду делать это на стандартных трёх полях, но вы можете сделать по такой же аналогии и с другими полями. Заходим в настройку первого поля, кликнув по шестерёнке (скриншот №1) и в самом низу присваиваем полю класс field-email, поскольку первое поле в форме просит нас заполнить email (скриншот №4) 😎

Ровно так же поступаем и с остальными полями, добавляя по смыслу классы полям. У меня три поля, соответственно я обозначил их как field-email, field-name, field-phone. После этого в Стилях блока данной формы в "Подробных настройках" вставляем следующий CSS:

.field-content {
position: relative;
}

.field-content:after {
content: '';
font-family: fontAwesome;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}

.field-email .field-content:after {
content: '\f0e0';
}

.field-name .field-content:after {
content: '\f007';
}

.field-phone .field-content:after {
content: '\f095';
}

В последних 3-х селекторах, где идут только правила content я вставлял иконки Юникодом с сайта fontawesome v.4.7, так как эта версия интегрирована в Геткурс 😉
Вы без труда сможете найти там свою иконку, если захотите поменять или добавить, и так же поставить Юникодом в правило content (где найти Юникод смотрите скриншот №3). Номер Юникода обязательно должен идти после \ обратного слэша, как это сделано у меня.

#лёгкая_кастомизация #полезная_фишка