Автолейауты в тильда 2024. Обучение

Всем привет! Это команда маркетинга IMpro.pro и практикующий веб-дизайнер Никита Солдатов. Недавно в тильде вышло офигенное обновление с автолейаутами. Погнали разбираться!

Видео: https://youtu.be/jv3eYZILiqA?si=5GW8KEo_J_U0enIT

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

Автолейауты. Текстовый блок

Начнем с текстового блока, потому что он самый простой. На нем мы и посмотрим работу автолейаутов. 

Я отставил и разгрупировал текст, чтобы сделать все заново. Мы уже определились, что контейнер у нас будет 640 пикселей, потому что это принятый удобный размер для чтения в вебе. Здесь у нас описание самой статьи, поэтому “размер” ставим 25. 

Дальше у нас идет еще один блок с текстом, но он уже с заголовком. На данном этапе давайте определимся с тем, какие отступы мы хотим видеть на сайте. Допустим, отступ от заголовка до текста у нас будет — 15 пикселей. Между главами текста мы сделаем большой отступ — 60 пикселей. В автолейаутах надо исходить из меньшего отступа, который есть на сайте. Это мы предусмотрели в первую очередь, потому что большие отступы поправить можно позже. Сейчас я расскажу как.

Нам нужен прозрачный шейпик. Я думаю, все его знают по добавлению в край блока, который листается вправо.

Итак, мы группируем нужные объекты и делаем нашу группу “объектом” — выбираем “Object (Beta)” в GROUP. После этого добавляем сам автолейаут — во FLEX жмем Auto и настраиваем отступы. Так и сформировался наш автолейаут. Сейчас расскажу как здесь все устроено.

В главном тексте, от заголовка до текста, отступ — 15 пикселей по автолейауту. Выше отступ — 60 пикселей. Он получился за счет того, что отступ от текста до нашего шейпа — 15 пикселей, столько же и от шейпа до заголовка + сам шейп — 30 пикселей. В общем и получается 60.

Это расстояние можно редактировать с помощью увеличения шейпа. Так как отступы у нас по автолейауту — 15 пикселей, то следующие главы нам нужно скопировать вместе с этим шейпом. 

Допустим, мы еще хотим добавить изображение. Сперва добавим отступ, чтобы оно не прилипало к тексту, но сделаем его чуть меньше — 10 пикселей.

База автолейаутов. Какие бывают?

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

Как это работает я покажу на других примерах?

У нас есть выравнивание элементов внутри самого автолейаута: по центру или по правому краю. Ему также можно задать свой цвет, например, темный контейнер с белым текстом. 

Еще ему можно задать внутренние отступы от контента, допустим, 60 пикселей. Столько же пикселей сделаем для закругления.

Автолейауты. Галерея

Итак, свойство автолейаутоа — перенос на следующую строчку

Применим это свойство на галерее из картинок. Фотографии подтягиваются под контейнер, когда мы изменяем его ширину. 

У нас есть отступ 20 пикселей, он работает с элементами справа, слева и снизу. Отступ можно разделить и сделать его снизу 40 пикселей. Также мы можем выбрать то, как будет распределяться контент, с этим уже вы поэкспериментируйте.

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

Автолейауты. Преимущества с иконками

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

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

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

Мы можем задавать фиксированную ширину: наш контейнер будет подстраиваться под контент внутри.

Значение Fixed позволяет нам задать четкие размеры группы, при этом правила размещения контента в нём не поменяются.

Автолейауты. Тариф

Сейчас расскажу как это все работает. Тут у нас “паддинги”. Также я задал небольшую обводку.

В контейнере у нас название тарифа, стоимость, небольшой отступ, разделительная линия под размер контейнера, отступ 30 пикселей, а после небольшого прозрачного шейпа идут сами пункты меню. Они сделаны с помощью переноса на следующую строчку.

Как это работает? Мы скопировали несколько иконок, но они все идут в одну строчку. Чтобы контент не слипался и шел столбиком, здесь растягивается текст до конца контейнера. 

На “Мобилках” нужно будет просто отредактировать размеры текстовых контейнеров и прозрачных шейпов.

Важный момент с кнопками. Сейчас они у меня настроены на одну высоту: это делается с помощью прозрачных шейпов. Допустим мы добавим еще какой-то пункт меню, но кнопки из-за этого съедут. Тут можно просто отредактировать высоту пустого шейпа, чтобы кнопки были на одной высоте.

Автолейауты. Шапка

Здесь все просто. Это у нас автолейаут с направлением вправо, отступы — 20 пикселей и между блоками контента стоят прозрачные шейпы. 

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

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

Код шаблона, если хотите поиграться с автолейаутами 47387391

Подписывайтесь на наш тгк, там еще больше новостей о тильде и аудиты сайтов.

Всем пока!