Если вас, как и меня, раздражает стандартное поведение предложений в форме Геткурса на мобильных разрешениях, то этот пост посвящается вам 😎

По умолчанию предложения на форме выглядят так, как будто их забыли застилизовать (скриншот №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), и уже не вызывают столько вопросов, сколько вызывали в своём изначальном стандартном виде. Ловите фикс 🥹

#лайфхак

Скудный функционал виджетов?
— Да

Что с этим можно сделать?
— Много чего!

В частности, не многие знают, что в виджет можно поставить какие угодно блоки, а не только те, что предоставляет нам редактор виджета. Можно даже запускать стороннюю обработку виджета скриптами. А делается всё это очень просто:

1) Переходим на редактор лендинга
2) Ставим блок, который хотим использовать в виджете
3) Экспортируем этот блок и импортируем в виджет
4) Наслаждаемся результатом (скриншот №2)

Вот такой простой лайфхак вы можете использовать, чтобы преобразить ваши виджеты в более функциональные. Так же вы можете экспортировать CSS/JS/HTML блоки 😎

#лайфхак

Маленький, но всё же полезный лайфхак

Наверняка в Геткурсе где-нибудь вы видели подобные кнопки, в которых используются две строки, и мало того, эти две строки ещё и по разному стилизованы. Наступает долгое "Эээ...", мозг потихоньку взрывается и пытается понять "Как?" 🙄

А вот сейчас и разберём. И действительно, на самом деле тут нет ничего сложного. В настройках редактирования кнопки вы можете использовать теги! Прямого намёка на то, что здесь можно использовать теги нет и не было. Пытливый разум сам постигает такие тайны 😆

Мало того, вы не просто можете отделить тегами разные строки (тег <br>) но и обернуть в какие-нибудь другие теги и даже назначить им отдельные классы, с помощью которых как раз и можно будет стилизовать так, как вашей душе угодно 😊

#лайфхак

Уже все нагляделись на эти не привлекающие квадратичные картинки сбоку вашего блока, которые выглядят скучно (скриншот №1) 😑

Я решил дать любым картинкам новую жизнь с помощью магии кода. Сегодняшний лайфхак поможет без труда нацепить "маску изображения" на угрюмую картинку, и с ней блок даже с картинкой по дефолту будет выглядеть куда интереснее, чем был до этого (скриншот №2).

Делается это в HTML-блоке. Ставим HTML-блок и пишем туда следующую разметку:

<div class="container">
<div class="wow-image"></div>
</div>

Затем, нам понадобятся две картинки, которые будут у нас дополнять друг друга. Нам будут нужны их ссылки. Если вы уже загрузили в файловое хранилище фотографию до этого, то просто узнайте её прямую ссылку по кнопке, как показано на скриншоте №3.

Картинку кляксы я взял из интернета, ищется достаточно легко. Я вам советую чтобы то пространство, в котором вы хотите чтобы было видно вашу исходную фотографию оставить черным, а весь остальной фон вокруг под фон вашего лендинга (В комментариях к посту я прикреплю тот самый сплеш, картинку которого я использовал как "маску", там под это уже всё готово и вам ничего не нужно делать самостоятельно с картинкой).

После того как все ссылки нам станут известны (в этом примере я приложу свои, но второй линк поставьте сами), ставим такой CSS-стиль в Подробные настройки блока:

.part-html > div {
min-height: 360px;
height: 100%;
}

.part-html .container {
padding: 0;
height: 100%;
}

.wow-image {
position: relative;
width: 100%;
height: 100%;
background: url(https://fs.getcourse.ru/fileservice/file/download/a/2739/sc/309/h/45c3dfe43f8b97c47664ae7e17c7e7aa.png),
url(ваш_линк_картинки);
background-size: cover;
background-position: center;
background-blend-mode: screen;
}

Всё что вам нужно это обратить внимание на свойство background в классе wow-image. Именно там последовательно идут два линка: первый линк это "маска изображения" (мой сплеш), и второй линк ваша картинка. Вот и всё 🕺

#лайфхак

Ох уж эти письма... 🙄

Наверняка вы думаете то же самое, когда садитесь верстать очередное письмо, которое ко всему прочему должно быть хорошо адаптивно, а ещё должно прилично выглядеть по дизайну и вообще иметь 2 или 3 колонки. Но, когда мы открываем рассылки и выбираем текстовый редактор, то руки опускаются сами собой, потому что мы видим перед собой "Здравствуйте, {first_name}". И из этого надо сверстать что-то красивое.

❗️ Сразу важный момент: в письмах используется табличная вёрстка. Многие сразу схватятся за голову, потому что писать все эти td tr th table tbody к тому же на чёрном фоне редактора рассылок, можно сойти с ума.

Лайфхак, которым я всегда пользуюсь, это обычные лендинги на Геткурсе. Именно в них я порой и верстаю красивые письма для рассылок. Как? Всё очень просто:

— Мы можем создать текстовый блок на лендинге, убрать оттуда весь текст и воспользоваться визуальной табличной вёрсткой (скриншот №1 и №2)
— Так же мы можем поставить нужные нам картинки в теге img в нужную ячейку (всё же придётся ради картинок лезть в HTML, но куда без этого?)
— Ну и конечно же все стили пишутся внутри атрибута style к нужной ячейке, с которой нужно провести какие-либо манипуляции (скриншот №3)

И вот, Геткурс за вас уже сгенерировал табличную вёрстку, которую вы просто дополняете нужными стилями и картинками. Затем берем, копируем всю вёрстку что мы сделали, и переносим это уже в редактор рассылок 😉

#лайфхак

Наиболее частый запрос который я слышу: нужно скрыть из левого меню некоторые пункты. Чаще всего это "Мои покупки", потому что у клуба или у школы своя система оповещения о купленных продуктах или же иное информирование о приобретенных продуктах (полностью другая страница, отдельный телеграм бот и тд.)

Немного разберу как до всего этого можно докопаться и по аналогии решить не только эту задачу но и другие подобные. Открыв нужное меню на сайте, мы можем перейти в панель разработчика (кнопка F12 по умолчанию) и инспектором элементов пройтись по списку. Получим подобную структуру как на скриншоте №2. Ну а далее дело за малым, навести на нужный div (или в данном случае li) чтобы подсветился именно тот пункт, который нужно скрыть, и просто берем его класс из атрибута class.

Далее нужно перейти в Настройки аккаунта, во вкладку Настройки, где промотав чуть ниже мы должны написать следующее в раздел "Счетчики и прочие скрипты для BODY":

<style>
    .menu-item-my_deals {
        display: none;
    } 
</style>

Конкретно сейчас мы решили задачу по скрытию пункта "Мои покупки" из раздела "Продажи". Ровно так же по аналогии решаются и другие задачи по скрытию пунктов, даже самых главных из левого меню 😉

P.S.: стили могут сработать не сразу, нужно подождать рекомендуемое время (10 минут) как написано в описании поля.

#лайфхак