Полезный лайфхак и внутрянка нашего спецпроекта "Бабули против мошенников" 🔥
Раньше мы сильно недооценивали и не понимали html-вставки в зероблоке Тильды. Зачем они вообще нужны? Что с ними делать, кроме как вставлять embed-код с видосиками?
А теперь, когда мы начали сильно глубже изучать вайбкодинг, поняли, что это ОЧЕНЬ полезный инструмент для ускорения процесса верстки!
Давайте на примере. У нас в нашей игре есте блок с интерактивным кроссвордом, который одна из бабуль должна разгадать. Когда мы рисовали макет в Фигме, то, разумеется, отрисовали и его тоже. Но, когда пришел час переносить его на Тильду - началась паника.
Это нужно было перенести все элементы в зероблок, одна буква - один квадратик. На каждый квадратик настроить класс и текстовый блок, чтобы внутрь можно было вводить текст. К тому же, надо было сделать проверку на "корректность" этой буквы. И так с каждой буквой, из которых состоят слова-ответы на кроссворды. Можно было бы растянуть слово, чтобы буквы визуально попадали в ячейки, но это все равно долго.
Даже читать это запарно...
На помощь пришла та самая html-вставка. Вместо того, чтобы переносить все элементы в зероблок, мы просто добавили туда html. В gpt закинули скрин с макетом из Фигмы (да, просто скрин!)), написали шрифт, который нужно использовать и объяснили задачу. ВСЕ!) Через 5 минут получили полностью готовый интерактивный блок кроссворда в точности как на макете. Магия, да и только!
Все, что надо было сделать - добавить внутрь вставки div с классом и сам код (можно отдельно в T123, а можно прям в зероблок в эту же вставку)
Этот способ можно использовать не только для игр и спецпроектов, но и для обычных сайтов, чтобы быстрее верстать макет⚡️
#бабули@redachme
