Часто ли вы используете подпись к картинкам? 🧐
А что, если я скажу вам, что подпись воспринимает ещё и манипулирования над собой? Круто, правда?
Она имеет класс:
#полезная_фишка
А что, если я скажу вам, что подпись воспринимает ещё и манипулирования над собой? Круто, правда?
Она имеет класс:
lt-image-caption
Благодаря такой полезной функции, опять же, можно делать поистине классные вещи с блоком, содержащим картинку, без использования псевдоэлементов :before и :after ;)#полезная_фишка
Люблю издеваться над блоком с карточками 😅
Речь пойдет о наболевшей проблеме правильной стилизации отступов между ними при наличии бекграунда. Ведь чтобы настроить верные отступы и расстояния, да ещё так, чтобы не поломалась адаптация, нужно помудрить с flex-правилами.
Если просто закрасить наши карточки, которые имеют класс
Я давно пользуюсь одним трюком и всё делаю на уровне класса
#лайфхак
Речь пойдет о наболевшей проблеме правильной стилизации отступов между ними при наличии бекграунда. Ведь чтобы настроить верные отступы и расстояния, да ещё так, чтобы не поломалась адаптация, нужно помудрить с flex-правилами.
Если просто закрасить наши карточки, которые имеют класс
lt-tsr-block, то мы увидим, что расстояний на самом деле между ними нет. Как быть?Я давно пользуюсь одним трюком и всё делаю на уровне класса
lt-tsr-content. Настроив небольшие паддинги в самом классе и применив к нему бекграунд, мы без лишних действий получим вполне нормальные отступы между элементами :)#лайфхак
❗️ У Apple своё видение вёрстки ❗️
Адаптация страниц никогда не бывает лёгкой. И многие уже в этом убедились :) Но есть более глобальная проблема адаптации — это устройства Apple, которые зачастую кривят своим видом страницы на горизонтальных и вертикальных видах. Появляются какие-то полосы между блоками, а адаптированный блок, который нормально смотрится на остальных устройствах и при сжатии браузера, вдруг начинает странно себя вести на iPad...
Как это исправить так, чтобы ваша драгоценная адаптация не слетела на остальных клиентах?
Ответ: прописать стили только для устройств Apple!
И такое возможно благодаря некоторым директивам в @media правилах. Если мы пропишем
Таким образом, можно локализовать проблему в стилях на определенных разрешениях. Представим, что наша проблема со стилями наблюдается только на iPad'ах в горизонтальном и вертикальном виде. Можно локализовать обращение таким образом:
#полезная_фишка
Адаптация страниц никогда не бывает лёгкой. И многие уже в этом убедились :) Но есть более глобальная проблема адаптации — это устройства Apple, которые зачастую кривят своим видом страницы на горизонтальных и вертикальных видах. Появляются какие-то полосы между блоками, а адаптированный блок, который нормально смотрится на остальных устройствах и при сжатии браузера, вдруг начинает странно себя вести на iPad...
Как это исправить так, чтобы ваша драгоценная адаптация не слетела на остальных клиентах?
Ответ: прописать стили только для устройств Apple!
И такое возможно благодаря некоторым директивам в @media правилах. Если мы пропишем
@media only screen and (max-device-width: 1024px), то такое правило будет означать, что оно применимо "только к устройствам Apple" на разрешении устройства ниже 1024 пикселя. С помощью такой фишки можно не бояться за адаптацию на всех остальных устройствах.Таким образом, можно локализовать проблему в стилях на определенных разрешениях. Представим, что наша проблема со стилями наблюдается только на iPad'ах в горизонтальном и вертикальном виде. Можно локализовать обращение таким образом:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
класс {
ваши стили...
}
}
Если не поставить директиву only перед screen, то все стили, которые вы примените внутри этого медиаправила, будут распространяться на все устройства и браузеры, включая Apple. В свою очередь, сама директива screen как раз означает, что эти правила будут действовать для устройств Apple.#полезная_фишка
Всплыл? Или нет? 😳
Все знают как работают всплывающие блоки в Геткурсе. Кто не знает, прошу сюда.
Ну а для тех, кто в курсе, продолжим :) Это очень крутая возможность, чтобы не перегружать лендинг, да и любую страницу сайта излишней информацией, которую можно поместить во всплывающий блок. Но иногда нам требуются нетривиальные решения, среди которых данная инструкция от Геткурса перестаёт работать.
Что если заказчик хочет, чтобы при клике на какую-либо ссылку в тексте появился всплывающий блок? Или же у вас есть блок с тарифами, и вам надо выводить разные формы по клику на кнопку в тарифах?
Есть решение!
Маленький и полезный JS-код, который поможет вам вызвать нужный всплывающий блок:
Все знают как работают всплывающие блоки в Геткурсе. Кто не знает, прошу сюда.
Ну а для тех, кто в курсе, продолжим :) Это очень крутая возможность, чтобы не перегружать лендинг, да и любую страницу сайта излишней информацией, которую можно поместить во всплывающий блок. Но иногда нам требуются нетривиальные решения, среди которых данная инструкция от Геткурса перестаёт работать.
Что если заказчик хочет, чтобы при клике на какую-либо ссылку в тексте появился всплывающий блок? Или же у вас есть блок с тарифами, и вам надо выводить разные формы по клику на кнопку в тарифах?
Есть решение!
Маленький и полезный JS-код, который поможет вам вызвать нужный всплывающий блок:
ltShowModalBlock('номер_блока');
Этот кусочек кода можно вставлять в "Вызов JavaScript", если блок предусматривает такую возможность. А для вставки в собственную ссылку в тексте, следует прописывать в таком виде:<a onclick="ltShowModalBlock('номер_блока');">Ссылка</a>Друзья, коллеги, всем хороших выходных! 😉
Канал потихоньку растёт, и вместе с ним появляются вопросы мне в личку о том, "Как я всему этому научился", "Как понимать коды", "Как самому научиться их писать".
Как я уже говорил в первых постах, я готовлю один интересный обучающий проект. Не простое банальное пересказывание материала, а именно по моей собственной методике и разработанной концепции ;)
Сейчас я доделываю основные моменты в своём проекте и в ближайшее время вы узнаете о том, что я готовил для вас всё это время 😊
Канал потихоньку растёт, и вместе с ним появляются вопросы мне в личку о том, "Как я всему этому научился", "Как понимать коды", "Как самому научиться их писать".
Как я уже говорил в первых постах, я готовлю один интересный обучающий проект. Не простое банальное пересказывание материала, а именно по моей собственной методике и разработанной концепции ;)
Сейчас я доделываю основные моменты в своём проекте и в ближайшее время вы узнаете о том, что я готовил для вас всё это время 😊
День начинается с опросов 😉
Друзья, ни для кого не секрет, что многие заказчики совмещают Тильду с Геткурсом. Тильда имеет множество уже задизайненых блоков и настроенных под нужды современных лендингов, поэтому заказчики зачастую отдают своё предпочтение красивому дизайну на Тильде, не зная, что уже довольно многие умеют делать ровно то же самое на Геткурсе, и не распыляться на два сервиса.
❓Я бы хотел узнать, есть ли среди подписчиков моего канала такие люди, которые работают и с Геткурсом и с Тильдой.
(опрос создам ниже поста)
Друзья, ни для кого не секрет, что многие заказчики совмещают Тильду с Геткурсом. Тильда имеет множество уже задизайненых блоков и настроенных под нужды современных лендингов, поэтому заказчики зачастую отдают своё предпочтение красивому дизайну на Тильде, не зная, что уже довольно многие умеют делать ровно то же самое на Геткурсе, и не распыляться на два сервиса.
❓Я бы хотел узнать, есть ли среди подписчиков моего канала такие люди, которые работают и с Геткурсом и с Тильдой.
(опрос создам ниже поста)
Совмещаете ли вы Геткурс с Тильдой?
Anonymous Poll
72%
Да, совмещаю Тильду и Геткурс
26%
Нет, делаю всё только на Геткурсе
2%
Работаю только с Тильдой... Что такое Геткурс?
Табличный ад 😈
Многие рано или поздно прибегали к стандартному инструменту разработки таблиц от Геткурса. Но не многие знают, как делать сложные таблицы. Например, совмещать несколько ячеек в одну, или же несколько строк в одну ячейку.
И действительно, табличная вёрстка вызывает дичайшую боль даже у бывалых верстальщиков и front-end разработчиков :)
Я поделюсь неочевидными атрибутами для табличных ячеек, с помощью которых можно совмещать ячейки в ряду или же в несколько строк.
(Все примеры смотрите на скриншотах)
#полезная_фишка
Многие рано или поздно прибегали к стандартному инструменту разработки таблиц от Геткурса. Но не многие знают, как делать сложные таблицы. Например, совмещать несколько ячеек в одну, или же несколько строк в одну ячейку.
И действительно, табличная вёрстка вызывает дичайшую боль даже у бывалых верстальщиков и front-end разработчиков :)
Я поделюсь неочевидными атрибутами для табличных ячеек, с помощью которых можно совмещать ячейки в ряду или же в несколько строк.
(Все примеры смотрите на скриншотах)
colspan — проще говоря, этот атрибут "склеивает" ячейки в одном ряду. К примеру, если мы пропишем colspan="2", это будет означать, что эта ячейка добавит себе справа ещё одну такую же и будет занимать ширину в 2 ячейки.rowspan — аналогия colspan, только действует уже на нижнюю строку, добавляя себе вторую такую же, становясь с ней единым целым.#полезная_фишка
This media is not supported in your browser
VIEW IN TELEGRAM
Да, это Геткурс 😳😱
Заранее отвечаю на зреющий у вас вопрос 😁
И нет, это не простая модификация левой панели, а полностью разработанная с нуля для своего собственного проекта :)
Хотел, чтобы вы оценили масштаб разработки, а главное понимали, что на Геткурсе возможно всё!
В данный момент всё ещё работаю над конечной версией такой панели ;)
#наработки
Заранее отвечаю на зреющий у вас вопрос 😁
И нет, это не простая модификация левой панели, а полностью разработанная с нуля для своего собственного проекта :)
Хотел, чтобы вы оценили масштаб разработки, а главное понимали, что на Геткурсе возможно всё!
В данный момент всё ещё работаю над конечной версией такой панели ;)
#наработки
Свои страницы на Геткурсе вместо системных 🧐
Не секрет, что на Геткурсе можно кастомизировать если не абсолютно, то почти всё. И системные страницы не являются исключением.
Вы можете сильно преобразить исходную страницу, а можете поступить более хитрым способом: создать свою собственную.
Например, свою собственную страницу "Спасибо" после успешной оплаты заказа, отказавшись от старой. Для этого достаточно поставить блок с редиректом, где будет указан адрес вашей новой страницы.
И таким образом можно заменить хоть все системные страницы на свои. Для некоторых, правда, понадобятся знания работы с объектами данных, выводимыми Геткурсом на каждую страницу проекта :)
Кто-то подчеркнет из этого поста полезный лайфхак в виде редиректов и собственных решений по страницам, а кого-то натолкнёт на размышления о чём-то более глобальном 😉
#лайфхак
Не секрет, что на Геткурсе можно кастомизировать если не абсолютно, то почти всё. И системные страницы не являются исключением.
Вы можете сильно преобразить исходную страницу, а можете поступить более хитрым способом: создать свою собственную.
Например, свою собственную страницу "Спасибо" после успешной оплаты заказа, отказавшись от старой. Для этого достаточно поставить блок с редиректом, где будет указан адрес вашей новой страницы.
И таким образом можно заменить хоть все системные страницы на свои. Для некоторых, правда, понадобятся знания работы с объектами данных, выводимыми Геткурсом на каждую страницу проекта :)
Кто-то подчеркнет из этого поста полезный лайфхак в виде редиректов и собственных решений по страницам, а кого-то натолкнёт на размышления о чём-то более глобальном 😉
#лайфхак
Бросайте якорь! 😳
Практически все лендинги или страницы, как таковые, имеют якоря для удобной навигации по ним. И чаще всего, если блоки имеют бекграунд, появляется такая проблема с пустым местом (смотрите скриншот).
Встаёт вопрос, что делать в таком случае?
Есть пара вариантов решения. Но для начала хочу поделиться с вами классом якоря. Он имеет класс
#лайфхак
Практически все лендинги или страницы, как таковые, имеют якоря для удобной навигации по ним. И чаще всего, если блоки имеют бекграунд, появляется такая проблема с пустым местом (смотрите скриншот).
Встаёт вопрос, что делать в таком случае?
Есть пара вариантов решения. Но для начала хочу поделиться с вами классом якоря. Он имеет класс
lt-anchor. Первый вариант - мы можем уменьшить его высоту до 0px, ведь по умолчанию он имеет высоту в 1px. Второй вариант заключается в том, чтобы покрасить наш якорь в цвет блоков :) Для этого просто примените свойство background нужного цвета.#лайфхак
Больше блоков в виджете 👍
Насколько многие знают, виджеты полезны тем, что могут встраиваться в другие лендинги или страницы, сделанные на других ресурсах, и собирать нужные нам данные. Проблема виджетов на Геткурсе лишь одна — доступно всего 3 блока в конструкторе...
А что, если вы хотите поставить сторонний JS или же просто написать объяснительный текст?
Всё очень просто! Вы можете добавить любой блок в виджет путём обычного импорта/экспорта блоков из редактора страниц в Геткурсе. И наконец-то ваши виджеты приобретут вашу собственную индивидуальность :)
#лайфхак
Насколько многие знают, виджеты полезны тем, что могут встраиваться в другие лендинги или страницы, сделанные на других ресурсах, и собирать нужные нам данные. Проблема виджетов на Геткурсе лишь одна — доступно всего 3 блока в конструкторе...
А что, если вы хотите поставить сторонний JS или же просто написать объяснительный текст?
Всё очень просто! Вы можете добавить любой блок в виджет путём обычного импорта/экспорта блоков из редактора страниц в Геткурсе. И наконец-то ваши виджеты приобретут вашу собственную индивидуальность :)
#лайфхак
This media is not supported in your browser
VIEW IN TELEGRAM
Форматировать или редактировать❓
Многим знакома эта проблема, показанная в гифке... Вы уже застилизовали текст нужным вам образом и хотите поправить ошибку, как вдруг... всё форматирование слетает!
Чтобы такого не произошло, держите лайфхак — забудьте про кнопку Backspace и Del напрочь! Следует выделить участок текста, который вы хотите отредактировать, и просто начать дописывать нужные исправления :)
#лайфхак
Многим знакома эта проблема, показанная в гифке... Вы уже застилизовали текст нужным вам образом и хотите поправить ошибку, как вдруг... всё форматирование слетает!
Чтобы такого не произошло, держите лайфхак — забудьте про кнопку Backspace и Del напрочь! Следует выделить участок текста, который вы хотите отредактировать, и просто начать дописывать нужные исправления :)
#лайфхак