Существует такая проблема как "слишком много полей в форме регистрации". Да, я и сам с такой сталкивался, и зачастую превращали страницу, как я люблю называть, в рулон туалетной бумаги 😦
Подготовил для вас небольшой лайфхак с тем, как я решал эту проблему. Достаточно простенько, но элегантно😉
В CSS стили блока с формой ставим:
И вуаля, наши поля теперь расположены в 2 ряда. Если у вас нечётное количество полей, то может быть такое, что у вас останется лишнее некрасивое место. Чтобы решить эту проблему так же элегантно, то назовите поле вашим собственным классом, и добавьте ваш класс в последнее правило, где применяется свойство
Должно выглядеть так:
#лайфхак #полезная_фишка
Подготовил для вас небольшой лайфхак с тем, как я решал эту проблему. Достаточно простенько, но элегантно
В CSS стили блока с формой ставим:
.form-content .builder {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.part-userField {
flex: 1 0 49%;
}
.part-header, .part-button {
flex-basis: 100%;
}И вуаля, наши поля теперь расположены в 2 ряда. Если у вас нечётное количество полей, то может быть такое, что у вас останется лишнее некрасивое место. Чтобы решить эту проблему так же элегантно, то назовите поле вашим собственным классом, и добавьте ваш класс в последнее правило, где применяется свойство
flex-basis: 100%;Должно выглядеть так:
.part-header, .part-button, .вашкласс {
flex-basis: 100%;
}#лайфхак #полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Привет, друзья!
Быть может кто-то ещё не знает, но я сделал страницу с бесплатным уроком оформления личного кабинета Геткурса к празднику 8-го марта✨
Эту страницу буду периодически пополнять новым материалом, так что следите😊
➡️ Посмотреть урок тут ⬅️
Быть может кто-то ещё не знает, но я сделал страницу с бесплатным уроком оформления личного кабинета Геткурса к празднику 8-го марта
Эту страницу буду периодически пополнять новым материалом, так что следите
Please open Telegram to view this post
VIEW IN TELEGRAM
Наши милые девушки! Я поздравляю вас с Международным женским днём 8 марта! И желаю чтобы каждая из вас была такая же красивая, обоятельная, чтобы доход вырос троекратно, и конечно же всегда были счастливы. Ну а мы, мужчины, сделаем всё, чтобы создать для вас счастье 😌 🌸 🌸 💐
Please open Telegram to view this post
VIEW IN TELEGRAM
Кстати, если вы хотите прокачать свой скилл владением Геткурса, в частности овладеть красивыми эффектами на кнопках, поставить им анимации при наведении, сделать их необычной формы и заставить выполнять виртуозные трюки, то в Клубе Магии с понедельника (11 марта) стартует бесплатный марафон «Нажми на кнопку», который будет длиться 5 дней!
А это значит, что за 5 дней вы посмотрите 5 потрясающих практических уроков и виртуозно овладеете магией кода для преображения кнопок!
▶️ Регистрация на бесплатный марафон ◀️
А теперь всё вместе:
⏺ Подойдёт для начинающих, особенно тем, кто желает овладеть красивым оформлением
⏺ Один из уроков марафона представлен лично мной ✨
⏺ Старт марафона 11 марта (понедельник)
⏺ Зарегистрироваться можно здесь 😉
А это значит, что за 5 дней вы посмотрите 5 потрясающих практических уроков и виртуозно овладеете магией кода для преображения кнопок!
А теперь всё вместе:
Please open Telegram to view this post
VIEW IN TELEGRAM
Сегодня решил поделиться с вами сочным дизайном корзины на ГК, чтобы как-то разнообразить её скучный вид 😉
Есть несколько состояний корзины: закрытая и раскрытая.
Для владеющих CSS людей я отделил комментариями в стилях части стилей, которые отвечают за разные состояния, можете попробовать подредактировать некоторые моменты под ваш проект😏
Стили необходимо поставить на ту страницу, где находится ваша корзина, в самый верх страницы в отдельный CSS-блок.
Сами стили будут ниже этого поста. Так как они не вмещаются в него😆
#полезная_фишка
Есть несколько состояний корзины: закрытая и раскрытая.
Для владеющих CSS людей я отделил комментариями в стилях части стилей, которые отвечают за разные состояния, можете попробовать подредактировать некоторые моменты под ваш проект
Стили необходимо поставить на ту страницу, где находится ваша корзина, в самый верх страницы в отдельный CSS-блок.
Сами стили будут ниже этого поста. Так как они не вмещаются в него
#полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
/*** Стили закрытой корзины ***/
.lt-basket.basket-collapsed {
border-radius: 10px;
background: #fff;
color: #000;
box-shadow: 0 3px 5px 1px lightgrey;
}
.lt-basket .total-cost-str {
font-size: 1.3em;
font-weight: bold;
}
.lt-basket .old-total-cost-str {
color: #bbb;
}
/*** Общий стиль кнопок ***/
.lt-basket .buttons button,
.lt-basket .total-view button {
border: none;
background: #fff;
color: #777;
box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.1),
0 5px 10px rgba(0, 0, 0, 0.1),
0 10px 15px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.1),
0 5px 10px rgba(0, 0, 0, 0.1),
0 10px 15px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.lt-basket .total-view button {
position: absolute;
left: 50%;
transform: translate(-50%, 50%);
margin-left: 0 !important;
}
.lt-basket .buttons button:focus,
.lt-basket .total-view button:focus {
outline: none;
}
.lt-basket .buttons button:active:focus,
.lt-basket .total-view button:active:focus {
box-shadow: inset 0 -7px 5px rgba(0, 0, 0, 0.0025),
inset 0 5px 10px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0 -7px 5px rgba(0, 0, 0, 0.0025),
inset 0 5px 10px rgba(0, 0, 0, 0.15);
background-color: #fff;
color: #777;
outline: none;
}
/*****************************************************/
/*** Стили раскрытой корзины ***/
.lt-basket {
border-radius: 10px;
background: #fff;
color: #000;
box-shadow: 0 3px 5px 1px lightgrey;
}
.lt-basket .positions-table {
color: #777;
}
.lt-basket .positions-table .form-control {
height: 37px !important;
width: 37px !important;
border-radius: 50%;
}
.lt-basket .positions-table .old-total-price {
color: #bbb;
}
.lt-basket .positions-table .total-price,
.lt-basket .positions-table .total-row .offer-title {
font-weight: bold;
font-size: 1.3em;
color: #000;
}
@media (max-width: 430px) {
.lt-basket .positions-table .total-price,
.lt-basket .positions-table .total-row .offer-title,
.lt-basket .total-cost-str {
font-size: 1em;
}
}
Может кто-то уже знал, но для меня стало новостью, что Геткурс втихую уже перешел от использования FontAwesome 4.7 на 6.0 версию ✨
Это значит что можно использовать более продвинутую библиотеку иконок при верстке. Гораздо больше выбор, быстрее отклик, в общем стало мега удобно🤩
Это значит что можно использовать более продвинутую библиотеку иконок при верстке. Гораздо больше выбор, быстрее отклик, в общем стало мега удобно
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Весна, середина сезона, а значит самое время и для моего сезонного стрима мастер-класса "Прожарки макетов" на тему "Конструктор тренингов" который состоится 15 мая в 16:00 в моём клубе Train IT.
➡️ Принять участие и посмотреть программу стрима
Как и всегда, в данный момент действуют льготные цены до 13 мая 23:59:
Для счастливых обладателей GTFcard — 2290р.
Обычная льготная цена — 2690р.
А уже 14 мая цена изменится и станет 3390р. для всех.
🗣 Даже если у вас не получится посетить стрим, то приобретая участие запись останется у вас навсегда в личном кабинете клуба Train IT.
Мне кажется нет такого человека, у кого бы старый конструктор тренингов не вызывал ужас и боль. Непонятные настройки, странные блоки, ужасные классы и вложенности которые выносят мозг. А так хочется сделать что-нибудь красивое и стоящее... Знакомо?
На стриме мастер-классе мы укротим этот редактор так, что вы навсегда перестанете его бояться, и будете делать свои собственные блоки со своим дизайном и наводить красоту. Конструктор тренингов, иначе говоря "старый редактор" используется не только в тренингах, но ещё и на страницах Оплаты заказа, Регистрации/Логина в школе, странице обратной связи, странице успешной оплаты и это далеко не весь список!
Что конкретно будет на стриме? Рассказываю:
— Сделаем полнейший разбор "старого редактора" Геткурса
— Расскажу вам неочевидные моменты и лайфхаки работы с сеткой и блоками так, что вы с легкостью сможете построить даже самую сложную структуру страницы
— Поделюсь с вами секретными приёмами лёгкой стилизации таких структур
— Поверстаем красоту
— Отвечу на все интересующие вас вопросы
— Как и всегда пообщаемся с вами в неформальной и весёлой обстановке
➡️ Принять участие и посмотреть программу стрима
Важные моменты:
❕ Если вы владелец GTFcard, но на странице вы видите цену, не соответствующую владельцу карты, сперва авторизуйтесь в проекте под вашим аккаунтом, имеющим GTFcard.
❕ Если вы авторизованы, являетесь владельцем GTFcard и всё равно видите несоответствующую цену, то убедитесь, что у вас подключён клуб Train IT в вашем аккаунте Клуба Магии, чтобы получить соответствующие преимущества.
❕ Если у вас уже был аккаунт в клубе Train IT, пожалуйста, так же авторизуйтесь с него или восстановите пароль, чтобы корректно совершить покупку. Слияние двух аккаунтов чревато потерей доступов ко всему, что у вас было ранее.
Как и всегда, в данный момент действуют льготные цены до 13 мая 23:59:
Для счастливых обладателей GTFcard — 2290р.
Обычная льготная цена — 2690р.
А уже 14 мая цена изменится и станет 3390р. для всех.
Мне кажется нет такого человека, у кого бы старый конструктор тренингов не вызывал ужас и боль. Непонятные настройки, странные блоки, ужасные классы и вложенности которые выносят мозг. А так хочется сделать что-нибудь красивое и стоящее... Знакомо?
На стриме мастер-классе мы укротим этот редактор так, что вы навсегда перестанете его бояться, и будете делать свои собственные блоки со своим дизайном и наводить красоту. Конструктор тренингов, иначе говоря "старый редактор" используется не только в тренингах, но ещё и на страницах Оплаты заказа, Регистрации/Логина в школе, странице обратной связи, странице успешной оплаты и это далеко не весь список!
Что конкретно будет на стриме? Рассказываю:
— Сделаем полнейший разбор "старого редактора" Геткурса
— Расскажу вам неочевидные моменты и лайфхаки работы с сеткой и блоками так, что вы с легкостью сможете построить даже самую сложную структуру страницы
— Поделюсь с вами секретными приёмами лёгкой стилизации таких структур
— Поверстаем красоту
— Отвечу на все интересующие вас вопросы
— Как и всегда пообщаемся с вами в неформальной и весёлой обстановке
Важные моменты:
Please open Telegram to view this post
VIEW IN TELEGRAM
Давно ли вы пользовались блоком "Плитки картинок"? 🤔
Это достаточно устаревший блок с хорошим превьювером картинок, но выглядит он совершенно несовременно, и редко его используют на лендингах для презентации своих проектов. Его большой недостаток в том, что он не сохраняет свою колоночность, а переносит картинку за картинкой на следующую строчку. Так же если рассматривать этот блок при сжатии дальше, он достаточно странно принимает форму двух колонок с огромными отступами слева и справа, и очень рано приобретает свой одноколоночный вид аж на 640 и ниже пикселей.
Я пошаманил с этим блоком, и придал ему новую жизнь (скриншот №2, №3). Так же я добавил поверх немного своих стилизаций, но самое главное я сделал ему вменяемый колоночный вид без переносов картинок. То есть до 768 пикселей мы имеем стабильно 3 колонки, до 480 пикселей — 2, и ниже — 1.
Стили в CSS-блоке следующие:
Такой редизайн вполне гармонично и теперь уже деликатнее будет смотреться при верстке современных лендингов. Пользуйтесь✨
P.S.: предварительно блок у меня растянут в настройках на 12 колонок в ширину.
Это достаточно устаревший блок с хорошим превьювером картинок, но выглядит он совершенно несовременно, и редко его используют на лендингах для презентации своих проектов. Его большой недостаток в том, что он не сохраняет свою колоночность, а переносит картинку за картинкой на следующую строчку. Так же если рассматривать этот блок при сжатии дальше, он достаточно странно принимает форму двух колонок с огромными отступами слева и справа, и очень рано приобретает свой одноколоночный вид аж на 640 и ниже пикселей.
Я пошаманил с этим блоком, и придал ему новую жизнь (скриншот №2, №3). Так же я добавил поверх немного своих стилизаций, но самое главное я сделал ему вменяемый колоночный вид без переносов картинок. То есть до 768 пикселей мы имеем стабильно 3 колонки, до 480 пикселей — 2, и ниже — 1.
Стили в CSS-блоке следующие:
.thumbnails-list {
columns: 3;
column-gap: 20px;
}
.thumbnails-list a {
margin-right: 0;
width: inherit;
break-inside: avoid;
}
.thumbnails-list a img {
max-width: 100%;
border-radius: 15px;
}
@media (max-width: 768px) {
.thumbnails-list {
columns: 2;
}
}
@media (max-width: 480px) {
.thumbnails-list {
columns: 1;
}
}Такой редизайн вполне гармонично и теперь уже деликатнее будет смотреться при верстке современных лендингов. Пользуйтесь
P.S.: предварительно блок у меня растянут в настройках на 12 колонок в ширину.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Когда-то давно я создал мини-курс, который навсегда разорвал представление о скучном дизайне страниц оплат на Геткурсе. На странице оплаты используется "старый редактор" в котором я и собирал эти дизайны.
Новичка, или человека, который даже в средней степени разбирается в вёрстке, может смутить топорность и чрезмерная перенагруженность редактора, его непонятность и сложность в обращении. На своём стриме мастер-классе на тему "Конструктор тренингов" который состоится 15 мая в 16:00 в моём клубе Train IT, я научу вас укрощению этого редактора, покажу вам крутые фишки и приёмы, которые помогут делать вам такие дизайны, которые вы сами захотите, и наконец-то перестанете его бояться и сможете творить красоту и там!
➡️ Принять участие и посмотреть программу стрима
Как и всегда, в данный момент действуют льготные цены до 13 мая 23:59:
Для счастливых обладателей GTFcard — 2290р.
Обычная льготная цена — 2690р.
А уже 14 мая цена изменится и станет 3390р. для всех.
🗣 Даже если у вас не получится посетить стрим, то приобретая участие запись останется у вас навсегда в личном кабинете клуба Train IT.
Как я уже писал ранее, "старый редактор" используется не только на страницах оплаты, но и в большинстве других системных страниц. С моим подходом к этому редактору вы станете на 130% всемогущи, так как сможете верстать не только на лендингах, но и в принципе переделать системные страницы под нужды онлайн-проектов.
Покорив старый редактор вы с уверенностью можете заявить, что знаете о вёрстке на платформе на 100%😎
➡️ Принять участие и посмотреть программу стрима
Начало стрима 15 мая в 16:00
Новичка, или человека, который даже в средней степени разбирается в вёрстке, может смутить топорность и чрезмерная перенагруженность редактора, его непонятность и сложность в обращении. На своём стриме мастер-классе на тему "Конструктор тренингов" который состоится 15 мая в 16:00 в моём клубе Train IT, я научу вас укрощению этого редактора, покажу вам крутые фишки и приёмы, которые помогут делать вам такие дизайны, которые вы сами захотите, и наконец-то перестанете его бояться и сможете творить красоту и там!
Как и всегда, в данный момент действуют льготные цены до 13 мая 23:59:
Для счастливых обладателей GTFcard — 2290р.
Обычная льготная цена — 2690р.
А уже 14 мая цена изменится и станет 3390р. для всех.
Как я уже писал ранее, "старый редактор" используется не только на страницах оплаты, но и в большинстве других системных страниц. С моим подходом к этому редактору вы станете на 130% всемогущи, так как сможете верстать не только на лендингах, но и в принципе переделать системные страницы под нужды онлайн-проектов.
Покорив старый редактор вы с уверенностью можете заявить, что знаете о вёрстке на платформе на 100%
Начало стрима 15 мая в 16:00
Please open Telegram to view this post
VIEW IN TELEGRAM
Каморка Геткурсовода 💻 | Канал Максима Елисеева
Когда-то давно я создал мини-курс, который навсегда разорвал представление о скучном дизайне страниц оплат на Геткурсе. На странице оплаты используется "старый редактор" в котором я и собирал эти дизайны. Новичка, или человека, который даже в средней степени…
Друзья, напоминаю что до окончания действия льготной цены участия на стриме "Конструктор тренингов" осталось всего 7 дней!
➡️ Принять участие и посмотреть программу стрима
А уже 14 мая цена поднимется и станет 3390р. для всех. Все неоплаченные заказы будут отменены.
Стрим состоится 15 мая в 16:00 по МСК.
🗣 Даже если у вас не получится посетить стрим, то приобретая участие запись останется у вас навсегда в личном кабинете клуба Train IT.
➡️ Принять участие и посмотреть программу стрима
Будем с вами безжалостно докапываться до самых тёмных секретов, который хранит старый редактор на Геткурсе😱 Укротим и полностью подчиним его своей воле настолько, что вы сможете сами творить красоту на системных страницах, страницах оплаты заказа, и многих других где используется этот редактор ✨
И, конечно же, лампово и весело проведем этот стрим мастер-класс🏃 Буду вас ждать ☺️
А уже 14 мая цена поднимется и станет 3390р. для всех. Все неоплаченные заказы будут отменены.
Стрим состоится 15 мая в 16:00 по МСК.
Будем с вами безжалостно докапываться до самых тёмных секретов, который хранит старый редактор на Геткурсе
И, конечно же, лампово и весело проведем этот стрим мастер-класс
Please open Telegram to view this post
VIEW IN TELEGRAM
Каморка Геткурсовода 💻 | Канал Максима Елисеева
Весна, середина сезона, а значит самое время и для моего сезонного стрима мастер-класса "Прожарки макетов" на тему "Конструктор тренингов" который состоится 15 мая в 16:00 в моём клубе Train IT. ➡️ Принять участие и посмотреть программу стрима Как и всегда…
Друзья, я к вам с последним напоминанием 😮
Осталось всего 6 часов до окончания действия льготной цены участия на стриме "Конструктор тренингов"!
➡️ Принять участие и посмотреть программу стрима
Стрим состоится 15 мая в 16:00 по МСК.
🗣 Даже если у вас не получится посетить стрим, то приобретая участие запись останется у вас навсегда в личном кабинете клуба Train IT.
Увидимся с вами в прямом эфире или в записи, если не сможете присутствовать на стриме. Ссылка на вебинарную комнату появится на странице регистрации 15 мая ориентировочно в 15:30. Так же ссылки будут высланы в боте-еноте и на вашу электронную почту😉
Осталось всего 6 часов до окончания действия льготной цены участия на стриме "Конструктор тренингов"!
Стрим состоится 15 мая в 16:00 по МСК.
Увидимся с вами в прямом эфире или в записи, если не сможете присутствовать на стриме. Ссылка на вебинарную комнату появится на странице регистрации 15 мая ориентировочно в 15:30. Так же ссылки будут высланы в боте-еноте и на вашу электронную почту
Please open Telegram to view this post
VIEW IN TELEGRAM
Друзья, стрим мастер-класс на тему "Конструктор тренингов" (старый конструктор) скоро начнётся! Старт в 16:00.
Я уже включил трансляцию, параллельно всё настраиваю и проверяю. Для тех, кто приобретал участие ссылка будет внизу этой страницы (пожалуйста, не забудьте авторизоваться, если разлогинились)
Так же ссылки придут на указанную вами почту при регистрации, и в бота-енота 😉
P.S. Страница вебинарной комнаты по независящим от меня причинам может грузиться достаточно долго. Геткурс решил пошалить) если страница долго не грузится, обновите ещё раз, и дождитесь пока загрузится☺️
Я уже включил трансляцию, параллельно всё настраиваю и проверяю. Для тех, кто приобретал участие ссылка будет внизу этой страницы (пожалуйста, не забудьте авторизоваться, если разлогинились)
Так же ссылки придут на указанную вами почту при регистрации, и в бота-енота 😉
P.S. Страница вебинарной комнаты по независящим от меня причинам может грузиться достаточно долго. Геткурс решил пошалить) если страница долго не грузится, обновите ещё раз, и дождитесь пока загрузится
Please open Telegram to view this post
VIEW IN TELEGRAM
Всем отличного начала рабочей недели! 🏃
Запись стрима №7 "Конструктор тренингов", посвященный старому редактору уже доступна для просмотра приобретавшим участие 😉
Перейти к записи можно по этой ссылке😊
Запись стрима №7 "Конструктор тренингов", посвященный старому редактору уже доступна для просмотра приобретавшим участие 😉
Перейти к записи можно по этой ссылке
Please open Telegram to view this post
VIEW IN TELEGRAM
Лето, хочется отдохнуть, и я не исключение 😊
Надеюсь ваш день прошел хорошо, или кто-то уже отдыхает в отпуске✨
Скоро обязательно вернусь к вам с контентом, я не потерялся😎
Надеюсь ваш день прошел хорошо, или кто-то уже отдыхает в отпуске
Скоро обязательно вернусь к вам с контентом, я не потерялся
Please open Telegram to view this post
VIEW IN TELEGRAM
Друзья, сегодня у меня день рождения! 🎁 Мне исполнилось 35 😅
Я очень счастлив что у нас собралось такое потрясающее сообщество🎈
Дальше будет только лучше! 🎉🍾
Ну а я пошел отмечать👀
Я очень счастлив что у нас собралось такое потрясающее сообщество
Дальше будет только лучше! 🎉
Ну а я пошел отмечать
Please open Telegram to view this post
VIEW IN TELEGRAM