Как работать с автолейаутами (Auto Layout) в Zero Block в Тильде
HTML-код
- Опубликовано: 13 июл 2024
- Из ролика вы узнаете, как быстрее и удобнее верстать дизайн в 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
![Архитектура в React: правильная структура приложения [Frontend]](http://i.ytimg.com/vi/pnMyvVK4B9E/mqdefault.jpg)
![Архитектура в React: правильная структура приложения [Frontend]](/img/tr.png)
Просто преклоняюсь перед разработчиками, спасибо ❤
Вау! Функционал Фигмы перекочёвывает в Тильду!!! Это круто! 👍
Ещё жду, когда углы прямоугольников можно будет скруглять каждый по отдельности
С каждым годом Тильда становится всё удобней!
Спасибо! это самое лучшая новость за последнее время )
Это прорыв для тильды! Если возьмёте за референс вебфлоу и будете двигаться дальше выйдете на супер новый уровень. Потому что мне как дизайнеру, лично мне не очень понравилось верстать в вебфлоу, в тильде мне проще, но вот настраивать адаптивы и блоки вручную всегда не нравилось, сейчас вы сделали хороший шаг вперёд. Браво🎉
Класс! Как я ждала этого! Обожаю AL
Нужна вложеность для групп, сейчас нужно прям искать кейсы для применения, но появление функционала радует
Поддержу комментарий, нужна вложенность. Одним гэпом настроить отступы между элементами не выйдет. Выше писали о webflow, если ориентироваться на них в плане функциональности вёрстки, то будет просто идеальная платформа в сегменте стран СНГ. Очень нужен полноценный функционал flexbox'a, пока это больше демоверсия.
Добрый день! Мы передаем все пожелания разработчикам и планируем в скором времени добавить вложенность групп. Чтобы быть в курсе всех новостей, вы можете подписаться на наш телеграм-канал - t.me/tildanews
Самое главное в видосике плашку на карточке картиночкой добавили ))) как-будто вложенность есть ))
Замечательный функционал. Спасибо за пример с карточкой, покажите, пожалуйста, пример с разным размером карточек
Ребят да это лучшее что случалось за последние 10 лет в тильде. Теперь вы реальный конкурент таким компаниям как webflow. С нетерпением жду что добавите rem' ы и vh и тд (знаю что есть но только в стандартных блоках)... Вот не зря я вас всегда в комментах защищал где "SEOшники" ноют "не делайте сайт на Тильде ведь там нельзя...." то что все что нельзя на самом деле можно и просто эти бараны не знают КАК это сделать меня всегда и оскорбляло! Начерта ты видео записываешь собака обманывая людей и говоря что что то нельзя когда просто ТЫ не умеешь! Внятных падингов и марджинов реально мне не хватало и потому "каюсь" - уводил часть народа на web-flow. Кстати очень советую посмотреть как у них это реализовано с точки зрения ux - у них круче и нагляднее(очень надеюсь что "пока" круче). Я понимаю что вы ориентируетесь на "более широкие массы" но не забывайте пожалуйста и про "стареньких" тех кому все все понятно а вот инструментария не хватает (особенно rem'ов в автоскейле)
Подписываюсь под каждым словом❤
🔥 это реально классно, спасибо! опробую сразу на ближайшем проекте 😌
Благодарю, очень ценно!
Пушка! Раньше много времени уходило, на большие сайты особенно если кастомные карточки товаров или еще чего либо
Супер! Нужна еще вложенность групп и Flex высота зероблока!
Добрый день! Мы передаем все пожелания разработчикам и планируем в скором времени добавить вложенность групп и flex настройки. Чтобы быть в курсе всех новостей, вы можете подписаться на наш телеграм-канал - t.me/tildanews
свершилось. найс
Ну какой же кайф !
Что то я не совсем понял восхищением этой функцией в комментариях. Ну да, галерею из фото вы сможете быстрее с адаптировать, можете быть даже пункты меню сможете на одну минуту быстрее с адаптировать, ну и в принципе все. Лучше б обратили внимание на настройки стандартных блоков, условно в аккордеоне элементарно нельзя назначить цвет по наведению, абсолютно нет настроек для описания в этом аккордеоне, нет никакой кастомизации. Тильда позиционирует себя как сервис nocode,я ни одного сайта еще не делал без кода. Какой то одностраничник может и можно накидать, но серьезные сайты добро пожаловать на сайты програмистов. А тут такое восхищение как будто эта функция снилась ночами. Условно попробуйте сделать карточку товара, где у вас есть описание,название, иконка, фон,цена и кнопка записаться а не эту пародию на карточку из видео и как эта функция в этом поможет? Для видео сделать так конечно можно, но как и в большинстве всяких обучающих видео это теория, а на практике увы...
Тильдодрочеры всегда ссуться кипятком от "фичи" которую как будто 1 день делали но выкатывали несколько лет. Абсолютно бесполезная обнова тк нет вложенности групп, это вообще треш какой-то)
Это просто пушка-бомба!!! Спасибо!!!
А можно делать автолайаут внутри автолайаута?
нет, проверил
В Фигме можно
АСМР какой-то!)
Я чуть ли не свечу в церкву ставил за это. Даже стыдно просить о большем, но этому всему не хватает возможности создавать вложенность этих групп и задавать и Fill conteiner
Некоторые конструкторы уже Grid вводят и тестируют, а вы только Flex осваиваете
Ну так пользуйтесь другими конструкторами, в чем проблема?
Подскажите, а можно ли как-то одну фразу в группу объединять, чтоб можно было делать фон с афтолейаут. Было бы супер удобно)
Когда планируется компоненты и стили?
Уже есть (правда не нативно смотри anexx)
Подскажите автолейауты доступны только на платном тарифе тильды ?
Добрый день! Эта опция доступна только на фактически оплаченных аккаунтах. На тарифе Free её, к сожалению, нет.
Еще бы систему компонентов, как в Figma, и вы будете вне конкуренции)
Добрый день! Спасибо за ваш комментарий, мы передаем все пожелания разработчикам, возможно в дальнейшем такая настройка появится.
Данный функционал у меня не получилось рекализовать в window контейнере...планируете реализацию?
Добрый день! Это связанно с работой группы объектов. Так как autolayout это настройкa для object-group, на данный момент она работает только для grid контейнера. В дальнейшем мы планируем добавить возможность настроек и для window контейнера.
И зачем они нужны, если тильда не поддерживает вложенные группы? Смысл выкатывать эту фичу, если она объективно ещё не готова)
Не могу включить режим тестирования. У меня нет галочки «Участвовать в тестировании новых функций» в Профиле.
Добрый день!
Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc.
В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
У меня одного нет вкладки AUTO LAYOUT? (Выделяю объекты, группирую, выбираю "Object (Beta)" , но вкладки нет. Идет вкладка GROUP и сразу BACKGROUND. Никто не подскажет в чем дело?
Включите режим тестирования в настройках профиля
Вот эту штуку нельзя использовать! )
Её сильно колбасит, когда изменяешь ширину браузера и вёрстка переключается с десктопа на мобилку. В итоге пришлось во всех случаях отключить.
Второй недостаток в том, что нельзя объединить группу элементов с auto layout в другой auto layout.
Добрый день!
Если размер экрана меньше или больше чем тот брейкпоинт, на котором вы находитесь в моменте, происходит автоматическое переключение на другую версию. Это корректное поведение.
Уточните, пожалуйста, почему оно вам мешает? В каком моменте возникает необходимость при настройке десктоп версии уменьшить размер браузера?
Будем благодарны вам за обратную связь, чтобы мы могли передать информацию разработчикам и возможно в дальнейшем внести изменения в работу функции.
Отправить информацию вы можете нам на почту marketing@tilda.cc или в комментариях.
Спасибо и хорошего дня!
Сделайте функцию бесплатно на тарифе free. Как же научиться в ученических целях? В фигме автолэйауты бесплатные.
🔥🔥🔥🔥🔥🔥🔥🔥