Вот и первое сентября — день знаний.
Значит, пора и нам набираться новых знаний!
Полосы прокрутки: неизбежность или красота? 🧐
Скорее всего большинство из вас, у кого на лендинге есть прокручивающийся контент, будь то окна информации или даже всё окно страницы, задавались вопросом: "А можно ли как-то стилизовать область прокрутки?"
Ответ прост: можно! Существуют псевдоклассы, с помощью которых мы можем влиять на полосу прокрутки (скроллбар), и стилизовать её как нам хочется. Таких псевдокласса три:
В качестве примера на скриншотах к посту маленькая демонстрация со своими собственными приукрашиваниями 😊 Я применил прокрутку к "полотну" текста и стилизовал:
#полезная_фишка
Значит, пора и нам набираться новых знаний!
Полосы прокрутки: неизбежность или красота? 🧐
Скорее всего большинство из вас, у кого на лендинге есть прокручивающийся контент, будь то окна информации или даже всё окно страницы, задавались вопросом: "А можно ли как-то стилизовать область прокрутки?"
Ответ прост: можно! Существуют псевдоклассы, с помощью которых мы можем влиять на полосу прокрутки (скроллбар), и стилизовать её как нам хочется. Таких псевдокласса три:
::-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) мы создаем простой текст, который оборачиваем ссылкой, и в ссылке в атрибуте
Вуаля! Теперь если мы кликнем по нашей ссылке, нас автоматически перебросит в наш сформированный заказ. И таким образом можно придумать разнообразнейшие механики для ваших проектов, просто применив чуть больше фантазии.
P.S.: Если у вас будет 2 и более подобных ссылок, соответственно, вам нужно сделать столько же скрытых форм с предложениями и с разными классами.
P.P.S. Опять же, развивая фантазию, можно применить в собственных механиках на JS, т.к. заказ скриптами создать довольно проблематично 😜
#лайфхак #полезная_фишка
Все уже давно привыкли пользоваться формами в Геткурсе. Они являются неотъемлемой частью идентификации пользователя при создании заказа или регистрации. Но мало кто знает, что можно отправить форму не из самой формы 😋
И отсюда рождается много крутых механик, которые можно реализовать по нашим собственным правилам. Например, пользователь кликает на ссылку "Заказать в один клик!" и его сразу же перекидывает на страницу оплаты заказа без заполнения формы.
❗️Учтите: такой подход можно применять к тем, кто уже зарегистрирован в вашем проекте. В противном случае форма, конечно же, не отправится.
В моём примере (скриншот №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) и в самом низу присваиваем полю класс
Ровно так же поступаем и с остальными полями, добавляя по смыслу классы полям. У меня три поля, соответственно я обозначил их как
Вы без труда сможете найти там свою иконку, если захотите поменять или добавить, и так же поставить Юникодом в правило content (где найти Юникод смотрите скриншот №3). Номер Юникода обязательно должен идти после
#лёгкая_кастомизация #полезная_фишка
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). Номер Юникода обязательно должен идти после
\
обратного слэша, как это сделано у меня.#лёгкая_кастомизация #полезная_фишка
Каморка Геткурсовода 💻 | Канал Максима Елисеева
Поделюсь с вами лёгкой кастомизацией, которую вы сможете без проблем повторить и приукрасить стандартную форму Геткурса. А именно добавлением значков полям форм 😉 P.S. Телега немного перепутала порядок скриншотов, но я думаю вы поймете 😁 UPD: Поправил в…
This media is not supported in your browser
VIEW IN TELEGRAM
Немного пошаманил и показываю, как можно добавить некоторые возможности при стилизации и разнообразить некоторыми эффектами предыдущую лёгкую кастомизацию.
Сперва следует применить все наработки из этого поста, затем будем творить магию😮
Для начала отключим у Геткурсовских инпутов их выделение при фокусе (делается это на основе псевдокласса
Добавляем вот такой CSS:
😉
#лёгкая_кастомизация #полезная_фишка
Сперва следует применить все наработки из этого поста, затем будем творить магию
Для начала отключим у Геткурсовских инпутов их выделение при фокусе (делается это на основе псевдокласса
:focus-visible
) и допишем в имеющийся CSS такое правило:.field-content input:focus-visible {
border: none;
outline: none;
}
И теперь мы можем во всей красе использовать ещё один мало известный псевдокласс :focus-within
, который позволяет стилизовать элемент, если внутри него произошел фокус или же сам элемент был взят в фокус. Звучит сложно, да, но на деле отталкиваясь от этого мы можем присвоить стили всему, что лежит внутри этого родительского элемента, например нашему псевдоэлементу :after
, а так же стилизовать при этом input
.Добавляем вот такой CSS:
.field-content:focus-within input {
border: 1px solid red;
box-shadow: 0 0 5px red;
}
.field-content:focus-within::after {
color: red;
}
И получаем красивый, а так же стильный эффект на наших полях для ввода! #лёгкая_кастомизация #полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Предыдущая лёгкая кастомизация с полями формы вам определённо понравилась, поэтому я продолжу эту рубрику на канале ☺️
В этот раз я поделюсь с вами кастомизацией эффекта при наведении на мой любимый блок карточек (да-да, видели бы вы, сколько я издевался над ними в своих уроках в Магии Геткурса). Конкретно этот блок называется "Картинка - подзаголовок - заголовок - текст". При наведении на карточки получился интересный эффект преобразования формы картинки. В стили блока был прописан следующий CSS:
😉
P.S. для тех, кто в теме: обнаружил забавный факт, что если убрать галочку из Стилей "Гибкая вёрстка", то на😆
#лёгкая_кастомизация #полезная_фишка
В этот раз я поделюсь с вами кастомизацией эффекта при наведении на мой любимый блок карточек (да-да, видели бы вы, сколько я издевался над ними в своих уроках в Магии Геткурса). Конкретно этот блок называется "Картинка - подзаголовок - заголовок - текст". При наведении на карточки получился интересный эффект преобразования формы картинки. В стили блока был прописан следующий CSS:
.lt-tsr-content .image-wrapper {Благодаря этому мы получим вполне крутой эффект, который превосходно смотрится даже на стандартном блоке без всякой дополнительной кастомизации, который уже не стыдно показать
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.lt-tsr-content .image {
transition: 0.5s;
}
.lt-tsr-content:hover .image {
border-radius: 50%;
width: 200px;
height: 200px;
}
P.S. для тех, кто в теме: обнаружил забавный факт, что если убрать галочку из Стилей "Гибкая вёрстка", то на
image-wrapper
появятся флексы, а с image-card
уберутся ненужные абсолютные позиционирования с паддингом в размере 75%, что меня всегда сильно смущал. То есть flex ставится боксу с картинкой при отключении "Гибкой вёрстки". Л — логика #лёгкая_кастомизация #полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Без JS в современной web-разработке никуда 🙂
Поделюсь с вами очень простым, но безумно функциональным методом плавного открытия блока по кнопке. Буду использовать не нативный JS, а библиотеку JQuery, которую поддерживает Геткурс.
Для начала я создал блок, в котором разместил кнопку, и блок обычного текста. Самому тексту я присвоил класс
В появившемся окне ниже я вставляю следующий код, который взаимодействует с классом text-block и применяю метод
😎
#лёгкая_кастомизация #полезная_фишка
Поделюсь с вами очень простым, но безумно функциональным методом плавного открытия блока по кнопке. Буду использовать не нативный JS, а библиотеку JQuery, которую поддерживает Геткурс.
Для начала я создал блок, в котором разместил кнопку, и блок обычного текста. Самому тексту я присвоил класс
text-block
, а в кнопке поставил действие "Вызов JavaScript", которым, я уверен, мало кто пользуется.В появившемся окне ниже я вставляю следующий код, который взаимодействует с классом text-block и применяю метод
.slideToggle()
, который помогает плавно открывать и закрывать блок:$('.text-block').slideToggle();
А чтобы наш текстовый блок изначально не показывался на странице, зайдем в Стили блока и в "Подробных настройках" вставим следующий CSS:.text-block {
display: none;
}
Благодаря таким простым действиям мы получили плавную "раскрывашку" текста по клику на кнопку и достаточно быстро нестандартно и интересно кастомизировали страницу. А если добавить нужные по вашему дизайну стили, будет ещё круче #лёгкая_кастомизация #полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Делать разработку сложнее — не мой вариант. Если это утверждение подходит и для вас, то я думаю вам понравится то, что я нашел на просторах великого и могучего интернета.
Речь пойдет о сервисе enjoycss.com который может генерировать целые, уже застилизованные шаблоны. У сервиса есть встроенный мощный редактор, который тоже приятно радует своими возможностями. Сервис поможет застилизовать блоки, инпуты, кнопки, сгенерировать текст, бекграунд, тени и многое другое. После того, как всё сделали, можно запросить выдачу кода и по смыслу подставить в Геткурс к своим блокам к нужным классам.
Надеюсь, будет полезно тем, кто пока боится писать код самостоятельно, а красоту наводить хочется😎
P.S. Пригодится знание английского!
P.P.S. Или же воспользоваться автопереводом страницы😁
#полезная_фишка
Речь пойдет о сервисе enjoycss.com который может генерировать целые, уже застилизованные шаблоны. У сервиса есть встроенный мощный редактор, который тоже приятно радует своими возможностями. Сервис поможет застилизовать блоки, инпуты, кнопки, сгенерировать текст, бекграунд, тени и многое другое. После того, как всё сделали, можно запросить выдачу кода и по смыслу подставить в Геткурс к своим блокам к нужным классам.
Надеюсь, будет полезно тем, кто пока боится писать код самостоятельно, а красоту наводить хочется
P.S. Пригодится знание английского!
P.P.S. Или же воспользоваться автопереводом страницы
#полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Сделал интересную декоративную фишку для кнопки формы, и хочу поделиться ею с вами.
Бывает такая ситуация, что наш интернет барахлит, либо происходит слишком долгое ожидание от сервера самого ГК, и когда пользователь кликает на кнопку Оплатить/Записаться и т.д., то возможно длительное ожидание, в ходе которого пользователь не до конца понимает, формируется его заказ или нет. Да, Геткурс с недавних пор сделал значок загрузки на самой кнопке, но я предлагаю ещё больше разнообразить и показать пользователю, что его заказ формируется, и ему следует немного подождать, чтобы не было соблазна тыкнуть на кнопку формы ещё раз(и убить все процессы или задвоить заказ) .
Мой простенький скрипт позволяет добавить надпись на кнопке при нажатии что заказ формируется, а так же меняет цвет самой кнопки. Вы можете изменить этот цвет и текст под себя, как вам нравится.
Порядок установки:
1. Поставьте вашему блоку с формой любой класс. У меня этот класс
😎
Пользуйтесь😊
#полезная_фишка
Бывает такая ситуация, что наш интернет барахлит, либо происходит слишком долгое ожидание от сервера самого ГК, и когда пользователь кликает на кнопку Оплатить/Записаться и т.д., то возможно длительное ожидание, в ходе которого пользователь не до конца понимает, формируется его заказ или нет. Да, Геткурс с недавних пор сделал значок загрузки на самой кнопке, но я предлагаю ещё больше разнообразить и показать пользователю, что его заказ формируется, и ему следует немного подождать, чтобы не было соблазна тыкнуть на кнопку формы ещё раз
Мой простенький скрипт позволяет добавить надпись на кнопке при нажатии что заказ формируется, а так же меняет цвет самой кнопки. Вы можете изменить этот цвет и текст под себя, как вам нравится.
Порядок установки:
1. Поставьте вашему блоку с формой любой класс. У меня этот класс
my-form
2. Поставьте скрипт в блок JavaScript под вашу форму:$(function() {
let myForm = document.querySelector('.my-form'); // Здесь поменять класс на класс вашего блока
let formBtn = myForm.querySelector('.btn');
formBtn.addEventListener('click', function() {
this.innerHTML = ' Формируем заказ...';
this.style.backgroundColor = '#a0cfa0';
});
})
Обратите внимание, что если ваш класс у формы будет другим, то в вам в скрипте нужно поставить свой класс вместо .my-form
Пользуйтесь
#полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Проводите марафоны? Есть открытые уроки для всех зарегистрировавшихся? 😏
Тогда наверняка у вас есть красный значок уведомлений, который появляется каждый день, и там скапливается от 100 до 1000 а то и больше. И всё из-за открытых марафонов/уроков/вебинаров, где люди оставляют свою отметку, особенно если потом вам нужно всё это проверить и долго, нудно, утомительно протыкивать кнопку "Принять".
Поделюсь с вами небольшим лайфхаком, как сэкономить себе кучу времени, чтобы почистить ленту ответов. Всё благодаря кнопочке "Принять всё", которую я для вас подготовил. Она принимает все ответы, которые есть на текущей страницу ответов. Т.е. если у вас 8 страниц ответов, то по одному нажатию кнопки, вся текущая страница будет принята. Итого останется нажать её ещё 7 раз, т.к. ГК автоматически подтянет следующую страницу.
Устанавливать кнопку следует в Настройки аккаунта, в раздел "Счётчики и скрипты для BODY":
#лайфхак #полезная_фишка
Тогда наверняка у вас есть красный значок уведомлений, который появляется каждый день, и там скапливается от 100 до 1000 а то и больше. И всё из-за открытых марафонов/уроков/вебинаров, где люди оставляют свою отметку, особенно если потом вам нужно всё это проверить и долго, нудно, утомительно протыкивать кнопку "Принять".
Поделюсь с вами небольшим лайфхаком, как сэкономить себе кучу времени, чтобы почистить ленту ответов. Всё благодаря кнопочке "Принять всё", которую я для вас подготовил. Она принимает все ответы, которые есть на текущей страницу ответов. Т.е. если у вас 8 страниц ответов, то по одному нажатию кнопки, вся текущая страница будет принята. Итого останется нажать её ещё 7 раз, т.к. ГК автоматически подтянет следующую страницу.
Устанавливать кнопку следует в Настройки аккаунта, в раздел "Счётчики и скрипты для BODY":
<script>Кнопочка появится в вашей Ленте ответов справа сверху, примерно через 10 минут (зависит от загруженности сервера ГК, на котором располагается ваш проект) ✔️
$(function() {
if(window.location.href.indexOf('/teach/control/answers/unanswered') > -1) {
$('.container').append(`
<button class="btn btn-success accept-all" style="position: fixed; top: 20px; right: 20px;">Принять всё</button>
`);
$(function() {
var acceptBtns = document.querySelectorAll('.btn[value="accepted"]');
$('.accept-all').on('click', function() {
acceptBtns.forEach(e => e.click());
});
});
}
})
</script>
#лайфхак #полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM