Максим Постников | Дизайн, Тильда и модификации
1.17K subscribers
48 photos
29 videos
55 links
Авторский блог продуктового дизайнера и разработчика. Рассказываю о своем профессиональном пути и делюсь полезными модификациями для Тильды.

Модификации: https://postnikovmd.com/mods
Download Telegram
💎 Личный кабинет в Zero-блоке

Добро пожаловать в один из самых продвинутых модулей библиотеки! Теперь личный кабинет — это ещё один функциональный компонент в Zero, с которым можно делать намного больше, чем в стандартных страницах Тильды.

Новый модуль отлично подойдёт для интернет-магазинов, проектов с курсами и закрытым контентом ⚡️

Рассказываю, что внутри:

➕ Страница авторизации в Zero‑блоке
Позволяет собрать свою страницу входа, регистрации и сброса пароля в личном кабинете.

Модификация отлично работает как на отдельной странице, так и во всплывающем окне. И при создании аккаунта теперь можно сразу указывать нужный пароль — без отправки на почту временного. Больше деталей показал в превью)

Модификация: Страница авторизации в Zero-блоке

➕ Настройки профиля в Zero‑блоке
Мод, с которым стандартную страничку профиля можно аккуратно кастомизировать под стиль проекта, если того пожелает заказчик)

Поддерживает все стандартные настройки: имя, email, телефон, язык, позволяет подгружать свою аватарку и изменять текущий пароль.

Модификация: Настройки профиля в Zero-блоке

➕ Страница курсов в Zero‑блоке
Или же главная страница, куда может попасть пользователь после авторизации)
Одна из самых интересных по настройке модификаций: в редакторе Zero создаётся один ряд карточек, после чего мод автоматически клонирует их под доступное количество курсов и выстраивает сетку внутри блока.

Модификация: Страница курсов в Zero-блоке

➕ История заказов/покупок в Zero‑блоке
Не так давно Тильда выпустила личный кабинет интернет-магазина (ЛКИМ) с красивым интерфейсом и возможностью просмотра истории заказов и покупок. Модификация переносит этот функционал в Zero, чтобы вы могли оформить всё в едином стиле)

Модификация: История заказов/покупок в Zero-блоке

➕ Своя кнопка выхода из личного кабинета
Небольшая, но полезная модификация, которая позволяет задать кастомную ссылку выхода из ЛК и использовать её в кнопках в Zero.

Модификация: Своя кнопка выхода из личного кабинета

➕ Скрытие стандартной иконки профиля
Ещё одна модификация, которая скрывает стандартную иконку вызова меню в личном кабинете — тот самый фиксированный кружок, который появляется после авторизации. Пригодится при кастомизации ЛК)

Модификация: Скрытие стандартной иконки профиля

Новые модификации уже доступны в библиотеке в разделе «Личный кабинет». И, конечно, к ним есть подробные видеоинструкции, чтобы было проще во всём разобраться.

Завершаю по классике — приятной работы) Сделано с душой и вдохновением 🤍

Максим Постников | Дизайн, Тильда и модификации
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
6🔥92❤29😍22👏8👍6
✈️🟩 Новый раздел: Поддержка модификаций

Двигаемся дальше)
По мере роста библиотеки всё больше человек начинает использовать её в работе. А значит, чаще возникает один и тот же вопрос – что делать, если что-то не работает?

И конечно я, как автор продукта, уже не всегда могу помогать всем точечно. Не мог бы, если бы не знал, что можно по-другому)

В компании, где я работаю, есть такой замечательный подход – self-service. Мы внедряем в крупный бизнес системы, где пользователи могут самостоятельно решать проблемы и быстро находить ответы на свои вопросы. Понимая, что со временем нагрузка вырастет, я решил идти по такому же пути в модификациях.

Помните ?showerrors, документацию и видеоинструкции? Всё это с самого начала было частью одного подхода – сделать модификации понятными, предсказуемыми и повторяемыми в работе. Я кропотливо проектировал единую логику, писал документацию и добавлял диагностику ошибок, чтобы результатами моего труда могли пользоваться другие, и затем – улучшать то, что делал я.

Сегодня я завершил полный контур, который позволит вам самостоятельно разобраться в механиках библиотеки и сделать её мощным рабочим инструментом. Ведь понимание – сила)

Теперь у вас есть:
• Инструкции и видео по установке
• Модуль самостоятельной диагностики ?showerrors
• Ответы и решения по распространённым проблемам
• Подробная документация к модификациям
• 80+ примеров, которые можно скопировать к себе в проект
• И наконец-то, понятный и прозрачный пошаговый алгоритм, что делать, когда модификация не работает)

Его можно найти на сайте в разделе «Поддержка»: https://postnikovmd.com/mods/support

Если однажды поймёте логику модификаций, сможете делать с ними невероятные и ценные проекты) Всячески буду вам в этом помогать 🦾

Максим Постников | Дизайн, Тильда и модификации
Please open Telegram to view this post
VIEW IN TELEGRAM
16🔥64❤14👍10👏3🤯1
🔥 Отметка в тысячу пройдена!

Друзья, хочу сказать спасибо каждому, кто рядом, кто следит и поддерживает)

Когда я только начинал, в канале было 5 человек, моих близких. Всё это время я просто делал и делился с вами мыслями, видением и результатами. Никогда не закупал рекламу, не использовал накрутку, не делал розыгрыши за подписку и тд. И я очень рад, что моя работа вызывает по-настоящему живой интерес и создаёт ценность)

Спасибо каждому из вас, что делитесь и рекомендуете, крепко обнимаю) 🫂

И плюс одно мини-достижение в жизни: канал вырос до 1 000 человек исключительно органически 🤍

Максим Постников | Дизайн, Тильда и модификации
Please open Telegram to view this post
VIEW IN TELEGRAM
8❤80🔥55🎉31👍9
🦾 Почему модификации получились именно такими?

Помните пост, где я показывал, на каком цикле кривой находился сервис полгода назад?

Тогда было интересно, как развернутся события дальше, и теперь, оглядываясь назад, понимаю, что за это время продукт вырос и стал намного более серьезным. Сейчас это уже больше, чем просто моды – это скорее мини-фреймворк в Тильде, который позволяет выйти за рамки её функционала, оставаясь внутри редактора.

Поэтому хочу рассказать вам о том, что долгое время оставалось за кулисами «авторской библиотеки»)

⌨️ Каждый мод — конструктор
Я никогда это так не называл, но в этом главная фишка и особенность модификаций. Любой дизайн в Zero можно превратить в функциональный компонент, причём способов сборки — тысячи.

Библиотека закрывает практически весь must-have функционал при создании сайтов:
• слайдеры
• вкладки
• аккордеоны
• автоскейл
• формы
• хэдеры
• поп-апы
• анимации и др.

Этого вполне хватает, чтобы создавать коммерческие проекты, когда сайт должен не только эффектно выглядеть, но и работать стабильно при любых сценариях.

Модификации также можно комбинировать друг с другом, оживляя на Тильде сложные дизайн-конструкции.

⌨️ Единая логика установки
Библиотека спроектирована по единому подходу, с помощью которого моды намного легче использовать и повторять из проекта в проект:
• Установка в <head> сайта
• Настройка зеро в редакторе (сверстать, создать группы Object, добавить классы и ссылки)
• Добавление кода в T123.

Если однажды разобрались в логике, дальше всё работает по одному и тому же принципу – и задачи, которые требуют долгой разработки, решаются внутри редактора за минуты)

🚫 Инженерное качество кода
Сок для разработчиков – чистый Javascript с минимальными зависимостями от сторонних библиотек.

В центре внимания – ядро модификаций, которое загружает нужный мод после его вызова на страничке. Внутри каждого мода – механики, благодаря которым они корректно работают даже в сложной вёрстке и нестандартных сценариях.

Кроме того, в библиотеку встроен диагностический модуль ?showerrors для поиска проблем прямо на сайте, а также скрытые обработчики ошибок, которые позволяют модификациям работать даже с ошибками в вёрстке. Код оптимизирован для максимальной производительности и переиспользования даже в сложных проектах.

Именно так и получилась целая система, которую можно переносить из проекта в проект. Она требует аккуратности в сборке, но зато дает возможности следующего уровня, которых нет в самой Тильде. И чем лучше вы понимаете её логику, тем сильнее она начинает работать на вас ⚡️

Ссылка на модификации:
https://postnikovmd.com/mods

Максим Постников | Дизайн, Тильда и модификации
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥39❤7👍6👏4
💎 Подписка на модификации

За последний год библиотека сильно выросла, во многом — благодаря вам и вашим проектам. Мне безумно приятно видеть, как моды помогают вам в работе, радуют ваших клиентов и упрощают процесс разработки) И с ростом продукта я всё больше понимаю, что за ним стоит большая ответственность, которая требует взрослой экономики.

Поэтому в последнее время я много думал над монетизацией и тем, какой она должна быть. Не хотелось просто брать и закрывать библиотеку, оставляя доступ только по подписке, или делать freemium-модель, где часть модов стала бы платной.

Модификации получились специфичными на уровне самой концепции – подход, где все можно сделать одной строчкой кода – это одновременно и её суперсила, и слабость. И тут было важно найти честную, прозрачную и подходящую модель, которая позволит системе развиваться дальше.

Так вот, я её нашел. Спешу поделиться)

Все моды останутся бесплатными, но появится подписка на инструменты для ускорения работы с ними. Это касается:
🤩 Расширенных настроек в генераторе кода (например, стилей, логики поведения, ограничений и др.)
🤩 Шаблонов примеров, которые можно скопировать к себе на сайт
🤩 Продвинутых модулей (сложных системных модификаций, на данный момент — для личного кабинета)

Подписка подойдет тем, кто регулярно собирает проекты на Zero, делает сложные коммерческие проекты и хочет экономить часы ручной настройки.

При этом базу по-прежнему можно использовать бесплатно – например, если вы учитесь или просто хотите попробовать моды. Сам код, естественно, продолжит работать независимо от наличия подписки)

Оформить подписку можно будет с 10 марта (вт). До этого момента всё остаётся, как сейчас (тестирую финальные детали). Со стоимостью и условиями можно ознакомиться здесь: https://postnikovmd.com/mods/pricing

Переходим от подборки решений к профессиональному инструменту для регулярной работы ⭐️

Дальше – только интереснее)

Максим Постников | Дизайн, Тильда и модификации
Please open Telegram to view this post
VIEW IN TELEGRAM
❤35👍20🔥10⚡3👏1
This media is not supported in your browser
VIEW IN TELEGRAM
🤍 Подписка открыта, добро пожаловать в профессиональный уровень)

Что внутри:

💎 Расширенные настройки
В подписку вошли расширенные настройки генератора кода — логика, поведение, стили, ограничения и другие параметры, с которыми можно гибко настраивать работу модов. Базовые настройки (класс, ссылки, скорость переходов и др.) остаются доступными для всех.

💎 Шаблоны примеров
В библиотеке уже почти сотня примеров использования модификаций, и по подписке их можно копировать к себе в проект как готовые шаблоны. На бесплатном тарифе примеры остаются открытыми для вдохновения)

💎 Личный кабинет
Модификации личного кабинета перешли в тариф Pro, а на самом сайте появился одноимённый раздел для доступа к платным функциям и управления подпиской. Конечно же, на основе новенького продвинутого модуля) Уже можно регистрироваться 🔗

Сами модификации при этом остаются открытыми. Подписка — это мастхэв для тех, кто регулярно использует библиотеку, работает со сложными проектами и стремится повышать ценность своей работы.

Её основной смысл — сэкономить часы разработки и сделать сложное возможным 🦾

Оформить подписку можно тут:
https://postnikovmd.com/mods/pricing

В честь запуска добавил небольшой бонус – промокод START даёт 15% скидку на подписку в течение всего марта 🔥

Как всегда, сделано с душой и вдохновением)

Максим Постников | Дизайн, Тильда и модификации
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥42👍13❤11🎉6
This media is not supported in your browser
VIEW IN TELEGRAM
💎 Он самый — каталог примеров модификаций!

Собрал в коллекцию 90+ примеров, которые накопились за два года работы с модами)

Всё самое нужное для создания функциональных сайтов: от слайдеров, вкладок и аккордеонов до комбинаций нескольких модов и продвинутых сценариев. Лёгким движением руки любой пример можно скопировать к себе в проект и адаптировать под свой дизайн)

Если когда-нибудь искали «как сделать такой функционал в зеро», велика вероятность, что он уже есть в каталоге.
И главное — теперь он наглядный пример того, что можно сделать с помощью библиотеки. А также место для дизайнерского и технического вдохновения 🤍

Где найти:
Модификации → раздел «Примеры» или по ссылке: https://postnikovmd.com/mods/examples

Делитесь впечатлениями, о скольких примерах из каталога вы знали?)

Максим Постников | Дизайн, Тильда и модификации
Please open Telegram to view this post
VIEW IN TELEGRAM
3❤31🔥25👍7😍5
🔗 Вайбкодить нельзя на Тильде. Куда поставим запятую?

Друзья, в последнее время тема ИИ активно начинает заходить на рынок Тильды. Многие, кто пробовал писать код через нейросети, говорят, что это очень мощно — и с ИИ можно сделать буквально всё. Но чем больше людей это пишет, тем больше я не могу развидеть, как быстрый результат кружит головы. И как человек, который пользуется нейросетями и сам пишет код, очень хочу вас предостеречь. Поделюсь опытом)

Для начала скажу, что конечно же, я вайбкожу. Пробовал писать код с разными нейронками, от GPT до Claude, пользовался агентами и mcp. И могу сказать одно — они все очень хороши, если понимать, какой результат получается на выходе. И в особенности, если собирать с ним решения с нуля.

Например, если подготовить контент и сказать нейросети:
«Собери на основе присланных кейсов сайт-портфолио», он выполнит эту задачу отлично. И выглядеть будет очень достойно. Почему? Потому что на входе у вас простые вводные, и результат получается бинарным: работает/не работает.

А что, если попросить ИИ «собери слайдер с карточками товаров, который будет работать в зеро блоке и подгружать данные из каталога товаров»?

Задача кратно усложняется контекстом. Мы говорим «карточки товаров», а под капотом подразумевается: получить товары от Tilda API, преобразовать и вставить их в блок, запустить слайдер, проверить состояния, учесть особенности Тильда и др.

Что делает ИИ, когда мы не даем ему достаточно контекста? Достраивает его на своё усмотрение. И код, который мы получаем, имеет прилично хрупких допущений, которые развалятся, если наш заказчик захочет поменять вводные или, например, добавить в слайдер фильтры.

Тогда мы попробуем написать ИИшке: «не работает». И если мы не даем ему диагностических данных или не позволяем ему (агенту) сделать это самостоятельно, то получаем «заплатку» — костыль, который решает нашу проблему при ограниченных вводных, который при следующем изменении снова развалится.

🟩 Так о чём я?
ИИ позволяет решать простые задачи быстро и эффективно. И главное, ИИ — это отличная песочница, которая позволяет учиться кодить.

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

Без этого «вайбкодинг» превращается в опасную для клиентов штуку – мы делаем им то, что, работает в моменте, но не выдерживает изменений. И в первую очередь от этого страдают сами заказчики.

В общем, навайбкодить можно правда всё, что угодно. И даже рабочее) Но вопрос не в том, работает ли, а в том, выдержит ли это следующий шаг.

А вы что думаете? Стоит ли на Тильде вайбкодить и какие задачи можно решить с ИИ?

Максим Постников | Дизайн, Тильда и модификации
Please open Telegram to view this post
VIEW IN TELEGRAM
3👍28❤17🔥5🤔2💯2👏1
🔗 Вайбкодить на Тильде можно)

Но аккуратно и с пониманием того, что получается на выходе. Иначе клиент получает хрупкий результат, который разваливается при первой смене контекста.

Так или иначе, если дизайнер берется генерировать код через ИИ, он должен базово понимать архитектуру его задачи – из каких компонентов она состоит, какими методами их можно связать, какие условия нужно учесть и тд.

В принципе это чем-то похоже на задачу по физике и математике: есть «дано», набор методов (формул) и переменных (компонент), с которыми можно получить результат. А дальше есть множество вариантов, как и в какой последовательности их применить, чтобы прийти к результату.

Поэтому да, для качественного результата вайбкод требует системного мышления. Если мы заранее не понимаем, как связать элементы в задаче, ИИ за нас сделает это криво – исходя из того контекста, который у него будет (а он почти всегда недостаточен).


Так вот, когда дизайнер с креативным мышлением идёт в ИИ, тот выдаёт работающий в первом приближении код, а тот без валидации вставляет его в T123 и отдаёт клиенту – происходит то самое, о чем я предупреждал) Оно разваливается.

Но значит ли это, что без системного мышления вайбкодить вообще не нужно? Конечно, нет. Можно и нужно. Но я против того, чтобы сходу без опыта решать через ИИ клиентские задачи. Как я говорил в посте выше, с помощью ИИ можно учиться мыслить. И Тильда – отличная песочница, чтобы это попробовать.

Короткий топ задач, которые стоит вайбкодить на Тильде:

🟩 Стилизовать стандартные блоки
Самая распространенная и актуальная задача, встречающаяся на Тильде) Не требует сложной логики, но помогает понять, как устроены элементы странички, как работают селекторы и свойства в css и как браузер преобразует их в стили. И провалидировать результат можно прямо визуально.

🟩 Добавить простую функцию
Например, таймер с обратным отсчетом, мини-калькулятор или подмену контента в блоке. Здесь появляется логика, условия, состояния, но все ещё на том уровне, который почти нельзя спроектировать «не так». И если разобрать с ИИ, почему код написан именно так, большинство загадочных #$!? в синтаксисе превратятся в понятное и последовательное.

Для старта этого достаточно. Остальные задачи на Тильде намного сложнее – и не потому, что они сами по себе такие, а потому что контекст конструктора настолько большой, что для их решения нужно в деталях понимать, как он работает и пошагово направлять нейросеть. Иногда бывает даже быстрее написать всё руками) А иногда отказаться от Тильды в пользу самописных или более масштабируемых решений.

Но в общем, шаг за шагом, мы приходим к пониманию, как строятся решения, которые выдает нам ИИ. Понимаем, как с ним общаться, чтобы получить работающий результат. И понимаем, как потом его валидировать, чтобы он работал устойчиво. И вот тогда предлагать его заказчику – не стыдно.

А дальше – развилка. Дизайнер начинает настолько хорошо понимать код, что задачи, которые он для себя ставит, сталкиваются с ограничениями среды (то есть Тильды). Часть из этих ограничений решается модификациями, часть остаётся на откуп конструктору. И тогда перед ним встаёт выбор: остаться на Тильде, потому что она закрывает большинство его задач, или уйти в вайбкод, но уже на качественно другом уровне, с полным контролем над стеком✍️

Максим Постников | Дизайн, Тильда и модификации
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥9❤4👏2
💬 Друзья, хочу собрать небольшую обратную связь по модификациям)

Напишите, пожалуйста, в паре строк:
• Что вам нравится в модах?
• Чего вам сейчас не хватает?

С большой радостью приветствуется как позитивный, так и негативный фидбэк. Честность превыше всего 🤍

ps. Для тех, кто ещё не пользовался, самое время почитать комментарии)

Максим Постников | Дизайн, Тильда и модификации
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10❤4👍3
👾 Почему Тильда не делает свои модификации?

А если и добавляет их в конструктор (как автоскейл стандартных блоков), то примитивно. Ведь технически у них есть все возможности...?

Для справки: автоскейл стандартных блоков, который вышел в последнем обновлении – это «текущая ширина экрана / 1200».


#1. Их позиционирование

«Сделай сам, без кода, легко и просто». Тильда говорит, что любой человек (даже без технического образования) может сделать себе профессиональный сайт. Это подкупает, привлекает в отрасль новичков и стимулирует рост небольших проектов, где Тильда покрывает почти все задачи.

Если бы они делали более сложную логику, обернуть её в простые кнопочки и подать как «магию» просто не получится. Да и рынок масс-маркета гораздо больше, чем рынок узких профи, разбирающихся в селекторах и атрибутах. Да и требовательные они, эти профи)

#2. Стоимость поддержки

Сложный функционал трудно поддерживать – в нём буквально много кода. А ещё у новичков (которых привлекает то самое позиционирование) возникает тысяча и один вопрос. В большинстве случаев – не по существу.

Когда 90% обращений в духе «я нажал, и оно сломалось», держать штат опытных разработчиков ради оставшихся 10% – слишком дорого.

Поэтому, кстати, поддержка Тильды такая «тугая», как многие жалуются. Они вынуждены наращивать первую линию поддержки из-за того, что сами же привлекают предпринимателей и маркетологов, которые не отличают grid от window. А хорошо сформулированные, компетентные запросы, теряются.

#3. Сложные фичи не масштабируются на их аудиторию

Логично задаться вопросом – если мы нанимаем разработчиков и делаем сложные фичи, что нам это принесёт?

Ответ: при текущем позиционировании ими будет пользоваться 5% аудитории. Да и если делать что-то дорогое и сложное, придётся поднять стоимость подписки до 2000₽/месяц, чтобы окупить затраты на R&D и разработку.

И тогда пользователи не то что не придут — часть ещё и отвалится. И не 5%, а 25% — те, кто пришёл за бесплатным или недорогим сайтом. Таких много) возможно, даже больше, чем кажется)

#4 Техдолг под капотом

Тильда – не современный фронтенд-фреймворк, а исторически сложившийся монолит со своей вёрсткой, редактором и способом хранения данных. Добавить умный слайдер или аккордеон прямо в зеро означает переписать ядро. Но это уже совсем другая история...)

🔲 Короче, Тильда не делает моды, потому что это просто невыгодно

Если бы она делала сложные моды, она бы:
🤩Потеряла простоту (своё главное конкурентное преимущество)
🤩Получила бы тонны сложных запросов в поддержку
🤩Должна была бы нанять дорогих специалистов
🤩Подняла бы цену подписки
🤩Потеряла бы массового пользователя

Но почему моды всё же существуют? Всё просто. По любви 🤍

Что думаете, кстати, насчёт этой темы? Согласны с мыслями или есть возражения?

Максим Постников | Дизайн, Тильда и модификации
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥34❤17👍9💯6👏31
This media is not supported in your browser
VIEW IN TELEGRAM
👆 Новый ?showerrors — диагностика, которая подскажет, что делать

Давно заметил: ?showerrors – крутой инструмент, но ему часто не хватает прозрачности. Хотелось, чтобы он не просто показывал ошибки, а помогал их исправить — и даже давал заглянуть под капот библиотеки.

Теперь он может больше. В последнем обновлении полностью переписал модуль диагностики)

Рассказываю, что изменилось 🦾

Все ошибки в одном месте
Новый интерфейс собирает все ошибки в едином окне – по клику на них можно посмотреть детальную информацию о проблеме и получить рекомендации по исправлению.

Умные подсказки
Для большинства ошибок теперь показываются связанные параметры (например, если слайдер не листается, диагностика покажет нужный класс и количество слайдов внутри него). Останется только исправить)

Просмотр параметров модов
Теперь ?showparams встроен прямо в диагностику. В новом интерфейсе можно одним кликом посмотреть параметры любой модификации на странице: от классов до внутренних состояний.

Новые типы ошибок и модов
Расширил список ошибок, которые отслеживает диагностика (всего более 140). Модуль детально понимает каждую ошибку любого мода из библиотеки: от слайдера до личного кабинета.

Состояние без ошибок
Если диагностика не выявила ошибок, теперь она тоже об этом скажет. Помогает убедиться, что проверка действительно прошла, и не тратить время на поиск несуществующей проблемы.

Обновление появилось у всех модификаций, начиная с версии 1.4. Просто откройте любой сайт с модификациями и добавьте в конец URL ?showerrors:

https://example.com/?showerrors


Как это работает?
Небольшой тех. ликбез: каждый мод самостоятельно ловит ошибки при запуске и отправляет их в ядро. Диагностика достаёт оттуда получившийся массив, сверяет с базой и предлагает рекомендации.

Приятной отладки) С заботой о вашем времени 🤍

Максим Постников | Дизайн, Тильда и модификации
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥25❤15👍5😍11
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 Версия 1.6 — плюс вайб к процессу установки

Это обновление я откладывал полгода, потому что не мог найти правильную архитектуру – и наконец, рад поделиться им с вами!

Комбинаторика модов, новые настройки и решение основных проблем установки – это одно из самых крупных обновлений, с которым настраивать модификации станет в разы удобнее)

Что внутри:

➕ Обновление всей библиотеки
Модификации теперь умеют работать друг с другом без ручной настройки. Раньше, если вы хотели совместить слайдер с вкладками или поставить аккордеон в поп-ап – приходилось разбираться в пользовательских событиях и вручную прописывать порядок запуска. Теперь моды определяют его сами. Обычный вызов – и всё работает)

Это затрагивает всю библиотеку и делает её по-настоящему комбинируемой 🦾

Ещё одна приятная мелочь – если блок скрыт настройками видимости, мод с ним просто не запустится. Раньше это нужно было прописывать в коде отдельно.

➕ Слайдер в Zero-блоке
Доработан механизм перетаскивания мышью: эффект стал плавнее, а кнопки внутри слайдов больше не конфликтуют с перетаскиванием мышью. Отключать его через drag: false не нужно. Минус боль при работе с модом)

➕ Аккордеон в Zero-блоке
Настраивать аккордеон стало удобнее во всех смыслах:
• расстояние между карточками теперь определяется автоматически: больше не обязательно «слипать» карточки и задавать отступы вручную
• аккордеон в автолэйауте можно верстать без добавления доп. классов – теперь просто объединяя группы
• автовысота Hug у блока с аккордеоном больше не ломает отображение

А также добавлена поддержка внутренних отступов (паддингов) у карточек с автолэйаутом. Посмотреть пример можно тут: ссылка.

➕ Расширенный автоскейл
Появилась возможность задавать постоянный отступ при масштабировании – например, 40px для всей страницы. Это решает насущный запрос: выровнять верстку стандартных и Zero-блоков или сделать одинаковые отступы для всех блоков без ручных правок.

➕ Хэдер в Zero-блоке
Самое масштабное обновление по видимым изменениям.

Три отдельные модификации объединились в одну: теперь выпадающее меню и меню — это составные компоненты шапки, а не отдельные модификации. И также появился новый компонент: поиск по сайту — его можно разместить в фиксированном хэдере и меню.

Логика показа и скрытия шапки при скролле переработана и стала гибче: можно управлять видимостью отдельно при прокрутке вниз и вверх, задавать свой z-index. В генераторе кода появилось много новых параметров)

➕ Продвинутый слайдер
Добавлен режим бегущей строки – его можно включить в настройках модификации или через параметр ticker: true. Больше не нужно собирать отдельно несколько параметров, как это было раньше.

И конечно же, появилась новая диагностика модификаций. Если ещё не видели её – загляните в пост выше)

Как обновиться?
Чтобы поставить новую версию библиотеки в <head> сайта существующий код модификаций на этот:

<script src="https://cdn.postnikovmd.com/tilda@1.6/mods.min.js"></script>


Ссылка на модификации: https://postnikovmd.com/mods

Спойлер:
переход на 1.6 был сделан для того, чтобы в будущем на нём появились модификации для интернет-магазина в зеро)

Приятной работы 🤍

Максим Постников | Дизайн, Тильда и модификации
Please open Telegram to view this post
VIEW IN TELEGRAM
❤25🔥17👍6😍2
Всем привет!

Давно не рассказывал, что у канала есть закрытый чат, где я выкладываю небольшие обновления и фиксы по модификациям, а также делюсь своими мыслями по поводу Тильды, которые не попадают в основные анонсы.

Из последнего: недавно на сайте появились примеры для личного кабинета, настройки скрытия для кнопок воспроизведения аудио и возможность останавливать бегущую строку по ховеру.

В общем, если хотите держать руку на пульсе и смотреть закулисье разработки, велкам)

https://t.me/+2zHS72Lk17owZTAy

Максим Постников | Дизайн, Тильда и модификации
❤8👍7🔥6😍1
💎 Интернет-магазин в Zero-блоке

Каталог и детальную страницу товара теперь можно полностью собрать в Zero-блоке с абсолютной свободой вёрстки и синхронизацией с каталогом в реальном времени)

Перед вами самый большой и продуманный модуль библиотеки: два месяца разработки, ~4800 строк кода и компонентная архитектура – это как если бы Тильда сама встроила интернет-магазин в Zero. Внутри модуля четыре модификации:

➕ Каталог товаров в Zero-блоке
Кастомные карточки каталога со своими разделами, поиском и пагинацией. Всё, что нужно – сверстать один ряд карточек, как вы хотите (со своей сеткой, автолэйаутом/автоскейлом и стилями) – модификация клонирует его под реальное количество товаров, придерживаясь вашей вёрстки и заполняя данные из стандартного каталога Тильды.

Больше не нужно вручную собирать карточку под каждый товар, только первый ряд) Отдельно горжусь пагинацией: она верстается прямо в Zero, без прозрачных шейпов и добавления html-кода. Всё видно и управляется из макета — как точки в продвинутом слайдере.

Модификация: Каталог товаров в Zero-блоке

➕ Карточка товара в Zero-блоке
Своя детальная страница товара вместо стандартной /tproduct/ с выводом опций, характеристик, галереи, хлебных крошек, кнопки «в корзину» и многого другого. Полностью ваша вёрстка, которая синхронизируется с реальным каталогом Тильды.

При смене опции карточка динамически пересчитывает цену, артикул и остаток и подставляет фото варианта. Можно верстать в автолэйауте и без)

Модификация: Карточка товара в Zero-блоке

➕ Похожие товары в Zero-блоке
Подборка рекомендаций из той же категории, что и у текущего товара. Те же кастомные карточки и тот же принцип клонирования, разве что без пагинации) Можно поставить на любой странице и привязать к любому товару, без ограничений.

Модификация: Похожие товары в Zero-блоке

➕ Иконки корзины и избранного в Zero-блоке
Свои иконки со счётчиками, которые можно расположить в любом месте страницы. Модификация прячет стандартные иконки Тильды и синхронизирует с ними счетчик в Zero-блоке (обновляется в реальном времени).

Модификация: Иконки корзины и избранного в Zero-блоке

Модуль проработан максимально системно, как у самой Тильды. Под капотом:
• Интернет-магазин состоит из нескольких независимых модулей, каждый из которых отвечает за свой функционал

• Модули полностью автономны: в каждом из них есть своя логика общения с API Тильды — модификация сама достаёт и обрабатывает все товары с сервера без блоков-посредников

• Для работы с вёрсткой Zero создана полноценная система клонирования карточек, которая сохраняет оригинальную структуру и позволяет добавлять в блок неограниченное количество товаров. Поддерживает все типы элементов, верстку в автолэйаутах и масштабирование автоскейлом

• Если данные товаров не приходят по API, есть резервный механизм извлечения (fallback)

• Для всех модификаций детально проработана система логирования и диагностики: 11 ошибок и рекомендаций по их исправлению в ?showerrors

• Отдельно для генератора кода проработан механизм определения номера раздела (storepart): можно временно добавить на страницу стандартный блок, указать в настройках нужный раздел, и его код подтянется по ссылке автоматически


Скажу честно – это самый большой модуль библиотеки и одновременно самый требовательный. Он раскрывается у тех, кто уверен в своей вёрстке, и создан для случаев, когда каталог должен выглядеть эффектно, а кастомизация важнее всего. Например, для бутиковых проектов или акцентных витрин.

Но по опыту работы с Тильдой: если достаточно сделать на стандартных – делайте на них) Для большинства случаев они более простые, стабильные и богатые по функционалу. Но там, где нужна вёрстка, которую больше нечем собрать, — этот модуль будет незаменим.

Теперь он — ещё одно приятное дополнение подписки Pro. В ближайший месяц модуль будет бесплатным для всех. Соберите с его помощью что-нибудь красивое)

Ссылочка на модификации: https://postnikovmd.com/mods/store

Почитать документацию: https://postnikovmd.com/mods/docs/store

Максим Постников | Дизайн, Тильда и модификации
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥60👏11❤9😍8⚡2🤯11