Показать всё, что скрыто 🙄
Довольно частый запрос со стороны дизайна о том, что нужно показывать картинку за пределами блока (скриншот №1). И чаще всего этот блок является блоком "Карточек", а конкретно "Картинка - подзаголовок - заголовок - текст".
Но, скруглив картинку, поместив её по центру и передвинув по координатам вверх, мы можем обнаружить, что наша картинка будет урезанной (скриншот №2).
Это происходит, потому что есть ограничение свойства
1. Сам класс
2. Контейнер контента
#лайфхак
Довольно частый запрос со стороны дизайна о том, что нужно показывать картинку за пределами блока (скриншот №1). И чаще всего этот блок является блоком "Карточек", а конкретно "Картинка - подзаголовок - заголовок - текст".
Но, скруглив картинку, поместив её по центру и передвинув по координатам вверх, мы можем обнаружить, что наша картинка будет урезанной (скриншот №2).
Это происходит, потому что есть ограничение свойства
overflow
. И его нужно перевести в состояние visible
сразу в нескольких местах. И сейчас я расскажу в каких:1. Сам класс
.image-wrapper
, в котором находится наша картинка с классом .image
, мешает нам добиться нужного результата. Ставим в классе .image-wrapper
свойство overflow: visible;
В итоге мы отключим первое урезание (скриншот №3).2. Контейнер контента
.lt-tsr-content
тоже урезает нам выпадение контента за пределы себя, поэтому тут тоже прописываем overflow: visible;
И теперь выпадению картинки за пределы блока ничто не будет мешать ;)#лайфхак
Двигаем недвижимое 😜
В Геткурсе все элементы довольно гибко настраивают своё местоположение в блоке. Но существуют такие блоки, где поменять элементы местами не предоставляется возможным. Один из таких блоков – это блок "Картинка - подзаголовок - заголовок - текст", иначе говоря "Карточки".
Поделюсь с вами полезным лайфхаком, если вам по дизайну нужно изменить порядок элементов в них:
1) Для начала включим флексбокс у контента и приведём в исходный вид элементы:
Всего в контенте этой карточки несколько классов:
На скриншоте к посту я выдвинул заголовок выше картинки, вместе с подзаголовком. Сделано это так:
#лайфхак
В Геткурсе все элементы довольно гибко настраивают своё местоположение в блоке. Но существуют такие блоки, где поменять элементы местами не предоставляется возможным. Один из таких блоков – это блок "Картинка - подзаголовок - заголовок - текст", иначе говоря "Карточки".
Поделюсь с вами полезным лайфхаком, если вам по дизайну нужно изменить порядок элементов в них:
1) Для начала включим флексбокс у контента и приведём в исходный вид элементы:
.lt-tsr-content {
display: flex;
flex-direction: column;
}
2) Теперь мы можем выстраивать порядок элементов как нам нужно с помощью свойства order
. Чем меньше значение свойства order
, тем главнее элемент. Проще всего это сравнить с последовательностью чисел: 1 — первый, 2 — второй, 3 — третий и т.д.Всего в контенте этой карточки несколько классов:
image-card
, subheader
, header
, description
и button
(если был выбран такой же блок, но с кнопкой).На скриншоте к посту я выдвинул заголовок выше картинки, вместе с подзаголовком. Сделано это так:
.header {
order: 1;
}
.image-card {
order: 2;
}
.description {
order: 3;
}
То есть я просто выстроил элементы в таком порядке, как мне нужно. Сабхедер встал выше заголовка, потому что если не назначать order
, он будет считаться в приоритете по порядку.#лайфхак
Нажать, или не нажать? 🧐
Существует такая проблема, и "хотелка" многих, у кого на лендингах есть карточки с кнопками, чтобы кнопки были доступны для нажатия лишь определенному сегменту и то не на всех карточках.
Кажется, что это очередной взрыв мозга с кучей кода 😵💫
Но на самом деле всё не совсем так, и такую схему можно легко провернуть, обойдясь несколькими строчками кода, и задействовав немного логики показа блоков 😉
Разберём пример:
1) Для начала поставим стандартные блоки с карточками и кнопками (см. скриншот №1). Я присвою всему блоку класс
2) Для каждой карточки с кнопкой, соответственно, нам нужно поставить столько же JS-блоков, которые будут блочить нажатие кнопки каждый для своей карточки (см. скриншот №2)
3) В каждом таком JS-блоке пишем код, который блочит кнопку в определённой карточке. В моём примере код в блоках выглядит так:
В первом JS-блоке:
Вот и весь секрет лайфхака 😁
#лайфхак #полезная_фишка
Существует такая проблема, и "хотелка" многих, у кого на лендингах есть карточки с кнопками, чтобы кнопки были доступны для нажатия лишь определенному сегменту и то не на всех карточках.
Кажется, что это очередной взрыв мозга с кучей кода 😵💫
Но на самом деле всё не совсем так, и такую схему можно легко провернуть, обойдясь несколькими строчками кода, и задействовав немного логики показа блоков 😉
Разберём пример:
1) Для начала поставим стандартные блоки с карточками и кнопками (см. скриншот №1). Я присвою всему блоку класс
my-cards
в Стилях блока.2) Для каждой карточки с кнопкой, соответственно, нам нужно поставить столько же JS-блоков, которые будут блочить нажатие кнопки каждый для своей карточки (см. скриншот №2)
3) В каждом таком JS-блоке пишем код, который блочит кнопку в определённой карточке. В моём примере код в блоках выглядит так:
В первом JS-блоке:
$(function() {Во втором JS-блоке:
$('.my-cards .lt-tsr-block:nth-child(1) button').attr('disabled', true);
})
$(function() {В третьем JS-блоке:
$('.my-cards .lt-tsr-block:nth-child(2) button').attr('disabled', true);
})
$(function() {В итоге мы получаем то, что на всех трёх карточках мы заблочили возможность нажать кнопку для всех пользователей. Ну а теперь самое время внести чуток логики в наши блоки. А именно: мы будем скрывать нужный JS-блок от того сегмента, которому и должно быть доступно нажатие на эту кнопку.
$('.my-cards .lt-tsr-block:nth-child(3) button').attr('disabled', true);
})
Вот и весь секрет лайфхака 😁
#лайфхак #полезная_фишка
СЕО в вебе. Как много смысла в этих буквах 👈
Почему-то многие считают, что Геткурс в плане СЕО не гибкая платформа, и ищут альтернативы. У меня к таким людям всегда есть вопрос: а действительно ли вы знаете что такое СЕО именно в вебе? 😁
Начнём с того, что SEO (англ. Search Engine Optimization) – это комплекс мер по улучшению сайта для его ранжирования в поисковых системах. НЕ АНАЛИТИКА! Аналитика лишь позволяет выявить те самые необходимые меры, которые нужно сделать для оптимизации поисковой выдачи роботами.
Управлять этой оптимизацией довольно просто, гибко, и всегда на ваше усмотрение. По-мимо того, что Геткурс предлагает заполнить OG информацию о странице, есть ещё и раздел "Теги в разделе HEAD", где с помощью тегов
К примеру, в моём случае (см. скриншот), у меня стоит вспомогательный мета-тег, который отвечает за ключевые слова, чтобы мою страницу быстрее нашли роботы поисковых систем. Таким образом я повышаю свои шансы найти свой проект и страницу в поисковике.
И таких
#лайфхак
Почему-то многие считают, что Геткурс в плане СЕО не гибкая платформа, и ищут альтернативы. У меня к таким людям всегда есть вопрос: а действительно ли вы знаете что такое СЕО именно в вебе? 😁
Начнём с того, что SEO (англ. Search Engine Optimization) – это комплекс мер по улучшению сайта для его ранжирования в поисковых системах. НЕ АНАЛИТИКА! Аналитика лишь позволяет выявить те самые необходимые меры, которые нужно сделать для оптимизации поисковой выдачи роботами.
Управлять этой оптимизацией довольно просто, гибко, и всегда на ваше усмотрение. По-мимо того, что Геткурс предлагает заполнить OG информацию о странице, есть ещё и раздел "Теги в разделе HEAD", где с помощью тегов
<meta>
можно настроить поисковую оптимизацию гибче некуда 🥳К примеру, в моём случае (см. скриншот), у меня стоит вспомогательный мета-тег, который отвечает за ключевые слова, чтобы мою страницу быстрее нашли роботы поисковых систем. Таким образом я повышаю свои шансы найти свой проект и страницу в поисковике.
И таких
<meta>
тегов со специальными значениями достаточно много, и настроить СЕО можно очень гибко и быстро, помимо основного функционала Геткурса 😉#лайфхак
Сезам, откройся 🧙♂️
Если вас вдруг по каким-то причинам не устраивает как ведёт себя поле ввода имейла, особенно для зарегистрированных пользователей, подставляя туда данные без возможности их редактирования, то ловите лайфхак, как можно это обойти 😉
Дело в том, что в поле имейла подставляется атрибут
Если вас вдруг по каким-то причинам не устраивает как ведёт себя поле ввода имейла, особенно для зарегистрированных пользователей, подставляя туда данные без возможности их редактирования, то ловите лайфхак, как можно это обойти 😉
Дело в том, что в поле имейла подставляется атрибут
readonly
с таким же значением readonly
, что не позволяет полю редактироваться пользователем. Но с помощью JS мы можем снять это ограничение, убрав этот атрибут. Под форму следует поместить JS-блок с таким содержимым:$(function() {
document.querySelector('.f-input[name="formParams[email]"]').removeAttribute("readonly");
})
Если у вас на странице несколько форм, и вам нужно применить такое действие лишь к конкретной, то лучше поставить класс блоку этой формы, и пользоваться обращением через него. К примеру:$(function() {
document.querySelector('.my-class .f-input[name="formParams[email]"]').removeAttribute("readonly");
})
#лайфхакВаша боковая панель в Профиле без багов 😎
Я полагаю, уже большинство из вас в онлайн-школах и проектах модифицировали боковую панель, будь то своими силами, или силами мини-курса по боковой панели в Магии Геткурса.
Если вы делали боковую панель используя наши уроки из Магии, то напомню, что существует один неприятный баг своей кастомной панели. Если мы заходим в Профиль, переключаемся на "Уведомления", а затем возвращаемся во вкладку "Общие", мы видим уже не нашу стилизованную панель, а стандартную панель Геткурса. Так происходит потому, что страница Профиля сделана по особому, и существенно отличается от других системных страниц.
Но я обошел этот баг одним очень хитрым способом, которым хочу с вами поделиться 😉
❗️Чтобы правильно им воспользоваться, сначала вы должны сделать подмену страницы Профиля, как показано в Магии Геткурса, а затем приступать к моему методу обхода.
Метод обхода:
Вам нужно войти в Настройки аккаунта -> Настройки, и в поле тегов для HEAD вставить следующий тег со скриптом внутри:
#полезная_фишка #лайфхак
Я полагаю, уже большинство из вас в онлайн-школах и проектах модифицировали боковую панель, будь то своими силами, или силами мини-курса по боковой панели в Магии Геткурса.
Если вы делали боковую панель используя наши уроки из Магии, то напомню, что существует один неприятный баг своей кастомной панели. Если мы заходим в Профиль, переключаемся на "Уведомления", а затем возвращаемся во вкладку "Общие", мы видим уже не нашу стилизованную панель, а стандартную панель Геткурса. Так происходит потому, что страница Профиля сделана по особому, и существенно отличается от других системных страниц.
Но я обошел этот баг одним очень хитрым способом, которым хочу с вами поделиться 😉
❗️Чтобы правильно им воспользоваться, сначала вы должны сделать подмену страницы Профиля, как показано в Магии Геткурса, а затем приступать к моему методу обхода.
Метод обхода:
Вам нужно войти в Настройки аккаунта -> Настройки, и в поле тегов для HEAD вставить следующий тег со скриптом внутри:
<script>Не забудьте подождать 10 минут, как рекомендует Геткурс после сохранения. И проблема с дефолтной боковой панелью в Профиле при переключении вкладок исчезнет 🥳
$(() => {
if(window.location.href.includes('/pl/notifications/settings/my')) {
let linkProfile = document.querySelector('.standard-page-menu li:nth-child(1) a');
linkProfile.setAttribute('href', '/profile');
}
})
</script>
#полезная_фишка #лайфхак
Свои красивые границы блоков 🥳
С каждым разом обычные границы блоков перестают удивлять заказчиков своим видом, и всегда хочется большего. Ровно так же и для собственных дизайнов. Освежить дизайн вам точно поможет генератор границ блоков на SVG — Get Waves
Пользоваться им достаточно просто:
1) Выбираете настройки
2) Генерируете волнообразные/прямоугольные границы блоков кубиком справа
3) Получаете SVG разметку нажав на облачко со стрелкой 😉
В самом Геткурсе вставляете в отдельный HTML-блок там, где вы хотите видеть эту границу. Удаляете внутри HTML всё, что вам предлагает Геткурс, и просто вставляете скопированный SVG внутрь. Вы так же можете задать нужный вам цвет под цвет вашего проекта найдя внутри тега
С таким маленьким и очень полезным инструментом можно делать абсолютно разнообразные и не скучные границы блоков 😎
#лайфхак
С каждым разом обычные границы блоков перестают удивлять заказчиков своим видом, и всегда хочется большего. Ровно так же и для собственных дизайнов. Освежить дизайн вам точно поможет генератор границ блоков на SVG — Get Waves
Пользоваться им достаточно просто:
1) Выбираете настройки
2) Генерируете волнообразные/прямоугольные границы блоков кубиком справа
3) Получаете SVG разметку нажав на облачко со стрелкой 😉
В самом Геткурсе вставляете в отдельный HTML-блок там, где вы хотите видеть эту границу. Удаляете внутри HTML всё, что вам предлагает Геткурс, и просто вставляете скопированный SVG внутрь. Вы так же можете задать нужный вам цвет под цвет вашего проекта найдя внутри тега
<path>
атрибут fill
и задав свой цвет каким-нибудь хеш-номером 😊С таким маленьким и очень полезным инструментом можно делать абсолютно разнообразные и не скучные границы блоков 😎
#лайфхак
Механики всплывающих блоков ✔️
Большинство из нас пользуются всплывающими блоками методами Геткурса, где можно настроить "Показ всплывающего блока", и соответственно вставить в окошко номер этого всплывающего блока, который обычно имеет номер формата
Но не многие знают, что за это отвечает один из уже встроенных в Геткурс функций
Например, мы можем использовать эту функцию в тексте в любом месте, обернув её в тег ссылки
#лайфхак #полезная_фишка
Большинство из нас пользуются всплывающими блоками методами Геткурса, где можно настроить "Показ всплывающего блока", и соответственно вставить в окошко номер этого всплывающего блока, который обычно имеет номер формата
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, т.к. заказ скриптами создать довольно проблематично 😜
#лайфхак #полезная_фишка
Как часто вы пользуетесь HTML-блоками в Геткурсе? 🤨
К HTML-блоку приходят тогда, когда нужно сделать что-то из ряда вон выходящее, что практически невозможно сотворить путём модификации какого-либо блока. Так же возникает и проблема с адаптацией такой вёрстки, ведь её нужно делать практически с нуля и из-за этого к решению сделать всё на HTML-блоке приходят в самую последнюю очередь, а зря.
Если знать некоторые особенности Геткурса и Bootstrap (в частности 3.3.5 версии), на котором сделан сам Геткурс, можно эту адаптацию частично привить к вашим самописным блокам. Если поставить HTML-блок на лендинг, то зайдя в него мы увидим, что там уже стоит
К примеру, если мы делаем какие-то свои роскошные карточки в HTML-блоке, то можно всем карточкам задать класс
Всё это пища для размышления над тем, что изучив классы Геткурса и Bootstrap достаточно хорошо (инспектируя элементы на странице), можно не отодвигать HTML-блок на последний план, а превратить его в мощный инструмент для реализации ваших задумок☺️
#размышления_пост #лайфхак
К HTML-блоку приходят тогда, когда нужно сделать что-то из ряда вон выходящее, что практически невозможно сотворить путём модификации какого-либо блока. Так же возникает и проблема с адаптацией такой вёрстки, ведь её нужно делать практически с нуля и из-за этого к решению сделать всё на HTML-блоке приходят в самую последнюю очередь, а зря.
Если знать некоторые особенности Геткурса и Bootstrap (в частности 3.3.5 версии), на котором сделан сам Геткурс, можно эту адаптацию частично привить к вашим самописным блокам. Если поставить HTML-блок на лендинг, то зайдя в него мы увидим, что там уже стоит
<div class="container text-center"></div>
. Исходя из названий классов мы уже можем понять, что этот див вполне себе можно использовать как обёртку для наших блоков, которые мы будем делать внутри. Класс container
ограничит нам ширину контейнера, подгоняя его под формат многих блоков ГК, ведь эти контейнеры так же есть внутри них. Класс text-center
даст нам центрированный текст внутри этого контейнера.К примеру, если мы делаем какие-то свои роскошные карточки в HTML-блоке, то можно всем карточкам задать класс
lt-tsr-block
, что в свою очередь задаст минимальный размер данным блокам (min-width: 250px
). Даже если вы поставите больше, при сужении экрана ваши блоки будут сжиматься до ширины 250px, не ниже. Так же этот класс даст относительное позиционирование (position: relative
) для расположения своих псевдоэлементов внутри блока. Всё это пища для размышления над тем, что изучив классы Геткурса и Bootstrap достаточно хорошо (инспектируя элементы на странице), можно не отодвигать HTML-блок на последний план, а превратить его в мощный инструмент для реализации ваших задумок
#размышления_пост #лайфхак
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Какой же лендинг без кнопок?
На любом лендинге так или иначе есть кнопка, ведущая куда-нибудь дальше. И зачастую их надо красиво выделять, чтобы на них хотелось нажать. Настроить стиль кнопки мы с вами можем из настроек. Проблема начинается тогда, когда мы хотим в названии кнопки поставить какую-либо картинку. У многих наступает паника, что это очень много непонятного CSS + "найди класс кнопки и поставь куда надо"🤨
Но не все знают, или по крайней мере не догадываются, что кнопка может принимать дополнительную разметку внутри себя. Каким образом? Прямо в названии кнопки можно вполне себе поставить
В нашем случае это прекрасная возможность без лишнего CSS поставить иконку внутрь с помощью FontAwesome 4.7, которая уже интегрирована в Геткурс. Нам остаётся найти нужную иконку, зайти внутрь и скопировать тег, отвечающий за её отображение, например:
P.S. Бонусом прикладываю стилизацию и эффект, которые есть на гифке😎
#лайфхак #лёгкая_кастомизация
На любом лендинге так или иначе есть кнопка, ведущая куда-нибудь дальше. И зачастую их надо красиво выделять, чтобы на них хотелось нажать. Настроить стиль кнопки мы с вами можем из настроек. Проблема начинается тогда, когда мы хотим в названии кнопки поставить какую-либо картинку. У многих наступает паника, что это очень много непонятного CSS + "найди класс кнопки и поставь куда надо"
Но не все знают, или по крайней мере не догадываются, что кнопка может принимать дополнительную разметку внутри себя. Каким образом? Прямо в названии кнопки можно вполне себе поставить
div
или span
, а может и дополнительную большую вёрстку.В нашем случае это прекрасная возможность без лишнего CSS поставить иконку внутрь с помощью FontAwesome 4.7, которая уже интегрирована в Геткурс. Нам остаётся найти нужную иконку, зайти внутрь и скопировать тег, отвечающий за её отображение, например:
<i class="fa fa-envelope-open" aria-hidden="true"></i>
Этот тег можно поставить прямо рядом с названием вашей кнопки и мы получим иконку рядом с текстом.P.S. Бонусом прикладываю стилизацию и эффект, которые есть на гифке
.btn {P.P.S. Вставлять в "Стили" блока в "Подробные настройки"
background: transparent !important;
color: #000 !important;
border: 2px solid #000;
border-radius: 20px;
transition: 0.3s;
}
.btn:hover {
font-size: 1.2em;
}
#лайфхак #лёгкая_кастомизация
Please open Telegram to view this post
VIEW IN TELEGRAM
Если вас, как и меня, раздражает стандартное поведение предложений в форме Геткурса на мобильных разрешениях, то этот пост посвящается вам 😎
По умолчанию предложения на форме выглядят так, как будто их забыли застилизовать (скриншот №1), и такой визуал может оттолкнуть пользователей.
Я поделюсь с вами небольшим стилистическим лайфхаком обхода данной проблемы, чтобы привести стандартный вид предложений в тот, который по идее должен быть в форме изначально. В стилях блока в "подробных настройках" следует поставить вот такой CSS:
🥹
#лайфхак
По умолчанию предложения на форме выглядят так, как будто их забыли застилизовать (скриншот №1), и такой визуал может оттолкнуть пользователей.
Я поделюсь с вами небольшим стилистическим лайфхаком обхода данной проблемы, чтобы привести стандартный вид предложений в тот, который по идее должен быть в форме изначально. В стилях блока в "подробных настройках" следует поставить вот такой CSS:
.form-position {
display: grid;
grid-template-columns: 30px auto;
grid-template-rows: repeat(2, auto);
}
.form-position-checker,
.form-position-title {
grid-area: 1;
}
После такой нехитрой манипуляции мы увидим, что наши предложения стали выглядеть «по-человечески» (скриншот №2), и уже не вызывают столько вопросов, сколько вызывали в своём изначальном стандартном виде. Ловите фикс #лайфхак
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Каморка Геткурсовода 💻 | Канал Максима Елисеева
Если вас, как и меня, раздражает стандартное поведение предложений в форме Геткурса на мобильных разрешениях, то этот пост посвящается вам 😎 По умолчанию предложения на форме выглядят так, как будто их забыли застилизовать (скриншот №1), и такой визуал может…
Продолжая тему разбора форм Геткурса, перейдем к разносу разбору стандартной формы в старом редакторе.
Если на десктопной версии всё более-менее хорошо, то на мобильных устройствах цена предложения явно вклинивается в личное пространство названия предложения и нелепо соседствует с ним. Пришло время исправить и это поведение.
В отличие от формы на лендинге, форма в старом редакторе имеет совершенно другие классы для взаимодействия. Я вам представлю свою версию фикса проблемы с отображением предложения. В "Настроить вид" в окошке для CSS-стилей вставляем следующие стили:
#лайфхак
Если на десктопной версии всё более-менее хорошо, то на мобильных устройствах цена предложения явно вклинивается в личное пространство названия предложения и нелепо соседствует с ним. Пришло время исправить и это поведение.
В отличие от формы на лендинге, форма в старом редакторе имеет совершенно другие классы для взаимодействия. Я вам представлю свою версию фикса проблемы с отображением предложения. В "Настроить вид" в окошке для CSS-стилей вставляем следующие стили:
.xdget-offerSelector .xdget-offer label {
display: grid;
grid-template-columns: 15px auto;
grid-template-rows: repeat(2, auto);
padding-left: 0;
text-indent: 0;
}
.xdget-offerSelector .xdget-offer label .offer-select-input {
grid-area: 1 / 1;
margin-top: 0;
}
.xdget-offerSelector .xdget-offer label .price-block {
grid-area: 2 / 2;
}
.xdget-offerSelector .xdget-offer label .offer-title {
grid-area: 1 / 2;
padding-left: 15px;
}
Результат можно посмотреть на скриншоте №2, где у предложений достигнут вполне себе вменяемый вид. Пользуйтесь, если вас раздражает ситуация, как на скриншоте №1.#лайфхак
Проводите марафоны? Есть открытые уроки для всех зарегистрировавшихся? 😏
Тогда наверняка у вас есть красный значок уведомлений, который появляется каждый день, и там скапливается от 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