Показать всё, что скрыто 🙄
Довольно частый запрос со стороны дизайна о том, что нужно показывать картинку за пределами блока (скриншот №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() {
$('.my-cards .lt-tsr-block:nth-child(1) button').attr('disabled', true);
})
Во втором JS-блоке:$(function() {
$('.my-cards .lt-tsr-block:nth-child(2) button').attr('disabled', true);
})
В третьем JS-блоке:$(function() {
$('.my-cards .lt-tsr-block:nth-child(3) button').attr('disabled', true);
})
В итоге мы получаем то, что на всех трёх карточках мы заблочили возможность нажать кнопку для всех пользователей. Ну а теперь самое время внести чуток логики в наши блоки. А именно: мы будем скрывать нужный JS-блок от того сегмента, которому и должно быть доступно нажатие на эту кнопку.Вот и весь секрет лайфхака 😁
#лайфхак #полезная_фишка
СЕО в вебе. Как много смысла в этих буквах 👈
Почему-то многие считают, что Геткурс в плане СЕО не гибкая платформа, и ищут альтернативы. У меня к таким людям всегда есть вопрос: а действительно ли вы знаете что такое СЕО именно в вебе? 😁
Начнём с того, что 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