Как работать с автолейаутами (Auto Layout) в Zero Block в Тильде

Из ролика вы узнаете, как быстрее и удобнее верстать дизайн в Zero Block с помощью автолейаутов (Auto Layout).
В чем отличие от прошлых методов верстки?
Если коротко - вы задаете направление и расстояния между элементами внутри группы-контейнера, а элементы будут выстраиваться согласно этим правилам. Вы можете менять размер группы, удалять или добавлять контент, правила останутся теми же.
Это значит, что дизайн станет более гибким к изменениям. Если, например, вам понадобится добавить еще одно изображение в группу, оно «встанет» согласно заданным правилам - не нужно будет двигать другие элементы группы вручную.
👋 Больше о настройке автолейаутов в Zero Block: help-ru.tilda.cc/zero/auto-la...
👋 Начало работы в Zero Block: help-ru.tilda.cc/zero
00:00 Что такое Auto Layout и когда его можно использовать?
00:19 В чем отличие автолейаута от других методов?
00:47 Пример 1. Настроим хлебные крошки
02:55 Пример 2. Настроим блок с галереей
06:57 В чем отличие между настройкой Align Elements и Align Content?
08:00 Пример 3. Настроим карточку для товара или услуги
◾ Гид по SEO на Тильде: help-ru.tilda.cc/search-engine
◾ О цифровой доступности сайтов, созданных на Тильде: tilda.cc/ru/lp/accessibility
◾ Как включить тестирование новых функций: t.me/tildanews/2446
👉 Создать сайт на Tilda: tilda.cc/ru
🤩 Онлайн-журнал для дизайнеров, маркетологов и предпринимателей Tilda Education: tilda.education
Подписывайтесь на нас в соцсетях:
◾ Telegram: t.me/tildanews
◾ VK: tildapublishing
◾ Instagram: / tildapublishing
Оставить отзыв о работе на платформе Tilda: tilda.cc/ru/otzyvy
Теги: tildapublishing, Тильда, конструктор сайтов, zero block, нулевой блок, автолейауты, гибкая верстка, flexbox

[@user-wd4yt2xk7q]

Вау! Функционал Фигмы перекочёвывает в Тильду!!! Это круто! 👍 Ещё жду, когда углы прямоугольников можно будет скруглять каждый по отдельности С каждым годом Тильда становится всё удобней!

[@AlexanderLobachev]

Это прорыв для тильды! Если возьмёте за референс вебфлоу и будете двигаться дальше выйдете на супер новый уровень. Потому что мне как дизайнеру, лично мне не очень понравилось верстать в вебфлоу, в тильде мне проще, но вот настраивать адаптивы и блоки вручную всегда не нравилось, сейчас вы сделали хороший шаг вперёд. Браво🎉

[@maxi_mo]

Спасибо! это самое лучшая новость за последнее время )

[@evgeny.borodin]

Замечательный функционал. Спасибо за пример с карточкой, покажите, пожалуйста, пример с разным размером карточек

[@user-sx6sj3eu3j]

Класс! Как я ждала этого! Обожаю AL

[@user-hg2je2un2k]

Что то я не совсем понял восхищением этой функцией в комментариях. Ну да, галерею из фото вы сможете быстрее с адаптировать, можете быть даже пункты меню сможете на одну минуту быстрее с адаптировать, ну и в принципе все. Лучше б обратили внимание на настройки стандартных блоков, условно в аккордеоне элементарно нельзя назначить цвет по наведению, абсолютно нет настроек для описания в этом аккордеоне, нет никакой кастомизации. Тильда позиционирует себя как сервис nocode,я ни одного сайта еще не делал без кода. Какой то одностраничник может и можно накидать, но серьезные сайты добро пожаловать на сайты програмистов. А тут такое восхищение как будто эта функция снилась ночами. Условно попробуйте сделать карточку товара, где у вас есть описание,название, иконка, фон,цена и кнопка записаться а не эту пародию на карточку из видео и как эта функция в этом поможет? Для видео сделать так конечно можно, но как и в большинстве всяких обучающих видео это теория, а на практике увы...

[@user-xl3gl8nq5v]

Тильдодрочеры всегда ссуться кипятком от "фичи" которую как будто 1 день делали но выкатывали несколько лет. Абсолютно бесполезная обнова тк нет вложенности групп, это вообще треш какой-то)

[@TemaKubik]

Нужна вложеность для групп, сейчас нужно прям искать кейсы для применения, но появление функционала радует

[@shpilevoy]

Поддержу комментарий, нужна вложенность. Одним гэпом настроить отступы между элементами не выйдет. Выше писали о webflow, если ориентироваться на них в плане функциональности вёрстки, то будет просто идеальная платформа в сегменте стран СНГ. Очень нужен полноценный функционал flexbox'a, пока это больше демоверсия.

[@TildaPublishing]

Добрый день! Мы передаем все пожелания разработчикам и планируем в скором времени добавить вложенность групп. Чтобы быть в курсе всех новостей, вы можете подписаться на наш телеграм-канал - t.me/tildanews

[@eko_slasty4899]

Ребят да это лучшее что случалось за последние 10 лет в тильде. Теперь вы реальный конкурент таким компаниям как webflow. С нетерпением жду что добавите rem' ы и vh и тд (знаю что есть но только в стандартных блоках)... Вот не зря я вас всегда в комментах защищал где "SEOшники" ноют "не делайте сайт на Тильде ведь там нельзя...." то что все что нельзя на самом деле можно и просто эти бараны не знают КАК это сделать меня всегда и оскорбляло! Начерта ты видео записываешь собака обманывая людей и говоря что что то нельзя когда просто ТЫ не умеешь! Внятных падингов и марджинов реально мне не хватало и потому "каюсь" - уводил часть народа на web-flow. Кстати очень советую посмотреть как у них это реализовано с точки зрения ux - у них круче и нагляднее(очень надеюсь что "пока" круче). Я понимаю что вы ориентируетесь на "более широкие массы" но не забывайте пожалуйста и про "стареньких" тех кому все все понятно а вот инструментария не хватает (особенно rem'ов в автоскейле)

[@AlexanderLobachev]

Подписываюсь под каждым словом❤

[@alexanderparadigma]

🔥 это реально классно, спасибо! опробую сразу на ближайшем проекте 😌

[@Nasa5079]

Пушка! Раньше много времени уходило, на большие сайты особенно если кастомные карточки товаров или еще чего либо

[@hardclient]

Благодарю, очень ценно!

[@em_m5989]

свершилось. найс

[@zero-kot]

Супер! Нужна еще вложенность групп и Flex высота зероблока!

[@TildaPublishing]

Добрый день! Мы передаем все пожелания разработчикам и планируем в скором времени добавить вложенность групп и flex настройки. Чтобы быть в курсе всех новостей, вы можете подписаться на наш телеграм-канал - t.me/tildanews

[@user-rm2qo2xd1j]

Ну какой же кайф !

[@designer_rustam196]

Это просто пушка-бомба!!! Спасибо!!! А можно делать автолайаут внутри автолайаута?

[@user-to5sc9pi5g]

нет, проверил

[@n-vdesigne]

В Фигме можно

[@Bladexennik]

АСМР какой-то!)

[@yanakovaleva3319]

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

[@iliyaskarabas9800]

Я чуть ли не свечу в церкву ставил за это. Даже стыдно просить о большем, но этому всему не хватает возможности создавать вложенность этих групп и задавать и Fill conteiner

[@yury3548]

И зачем они нужны, если тильда не поддерживает вложенные группы? Смысл выкатывать эту фичу, если она объективно ещё не готова)

[@user-nx1rx5qw6x]

Некоторые конструкторы уже Grid вводят и тестируют, а вы только Flex осваиваете

[@ekaterina849]

Ну так пользуйтесь другими конструкторами, в чем проблема?

[@user-gu7lo7kl8p]

Еще бы систему компонентов, как в Figma, и вы будете вне конкуренции)

[@TildaPublishing]

Добрый день! Спасибо за ваш комментарий, мы передаем все пожелания разработчикам, возможно в дальнейшем такая настройка появится.

[@user-jz1ep7fo7b]

Когда планируется компоненты и стили?

[@eko_slasty4899]

Уже есть (правда не нативно смотри anexx)

[@kapakulii]

Вот эту штуку нельзя использовать! ) Её сильно колбасит, когда изменяешь ширину браузера и вёрстка переключается с десктопа на мобилку. В итоге пришлось во всех случаях отключить. Второй недостаток в том, что нельзя объединить группу элементов с auto layout в другой auto layout.

[@TildaPublishing]

Добрый день! Если размер экрана меньше или больше чем тот брейкпоинт, на котором вы находитесь в моменте, происходит автоматическое переключение на другую версию. Это корректное поведение. Уточните, пожалуйста, почему оно вам мешает? В каком моменте возникает необходимость при настройке десктоп версии уменьшить размер браузера? Будем благодарны вам за обратную связь, чтобы мы могли передать информацию разработчикам и возможно в дальнейшем внести изменения в работу функции. Отправить информацию вы можете нам на почту [e-mail] или в комментариях. Спасибо и хорошего дня!

[@user-uh2pk3sf7d]

Сделайте функцию бесплатно на тарифе free. Как же научиться в ученических целях? В фигме автолэйауты бесплатные.

[@AnnaAnna-iw3td]

Подскажите автолейауты доступны только на платном тарифе тильды ?

[@TildaPublishing]

Добрый день! Эта опция доступна только на фактически оплаченных аккаунтах. На тарифе Free её, к сожалению, нет.

[@NuBreakz1990]

Данный функционал у меня не получилось рекализовать в window контейнере...планируете реализацию?

[@TildaPublishing]

Добрый день! Это связанно с работой группы объектов. Так как autolayout это настройкa для object-group, на данный момент она работает только для grid контейнера. В дальнейшем мы планируем добавить возможность настроек и для window контейнера.

[@user-bm6sr3eh7o]

Не могу включить режим тестирования. У меня нет галочки «Участвовать в тестировании новых функций» в Профиле.

[@TildaPublishing]

Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту [e-mail]. В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.

[@KiryaUI]

У меня одного нет вкладки AUTO LAYOUT? (Выделяю объекты, группирую, выбираю "Object (Beta)" , но вкладки нет. Идет вкладка GROUP и сразу BACKGROUND. Никто не подскажет в чем дело?

[@user-to5sc9pi5g]

Включите режим тестирования в настройках профиля

[@sarmatnagolovu]

🔥🔥🔥🔥🔥🔥🔥🔥