Виды верстки в Zero Block: autoscale, grid- и window-контейнеры

[@Nadi_Tich]

Анечка, спасибо! Все просто, понятно, по делу!

[@Anneta75]

Аня, спасибо огромное ❤ супер эфир!!! Про мобилку тоже очень нужен эфир🙏😊

[@TildaPublishing]

Спасибо! Учтем пожелания)

[@olgakotova8943]

Анечка, спасибо за такое детальное и понятное объяснение. Наконец в голове все более или менее разложилось по полочкам, начну экспериментировать с разными видами верстки ❤

[@ПавелНиян]

Благодарю за очень полезный эфир! Очень нужен мастер-класс по верстке на мобильных устройствах + как там же работает анимация.

[@Vika-lb3cq]

Спасибо! многое поняла про виды верстки!! Думаю теперь не буду путаться)

[@TildaPublishing]

Спасибо! 🌟

[@Юлька-й9ь]

Спасибо, Анечка, очень ценный для меня эфир и очень вовремя. Я только начинаю работать в Тильде. Ты очень доступно объясняешь и очень милая, приятная. На мой взгляд, ты лучше всех, из тех кого я видела.

[@сонясонная-я1ш]

Привет! Очень понравилось твое видео и очень помогло мне, т.к. я только начинаю свой путь в дизайне. Подскажи, пожалуйста, а пользуешься ли ты стандартными блоками Тильда или они очень похожи, и ты предпочитаешь Зеро блок? Мне нравится стандартные блоки Тильда, потому что я пока медленно работаю, а со стандартными блоками ведь получается намного быстрее... или какие тут есть минусы?

[@ТатьянаХоружева]

Спасибо! Так Вы воодушевленно всё рассказываете, я так вдохновилась ещё больше/усерднее развиваться и стать такой же крутышкой)))

[@svetlanaleontyeva]

Спасибо за мастер-класс. Вы очень талантливый и увлеченный дизайнер. Хотелось бы отдельный мастер-класс по мобильной верстке.

[@TildaPublishing]

Спасибо!Приняли пожелание👍

[@Marina-Isaeva-web]

Аня, спасибо большое) Так понятно объясняешь, все страхи прошли, появился интерес, ручки чешутся всё попробовать теперь) Спасибо 🌿🌹🌿

[@Nsdimon]

Аня спасибо за эфир. Работаю уже 14 лет дизайнером но даже у вас подчерпнул какие то новые детали. Приятно слушать вас.

[@TildaPublishing]

Спасибо 🧡

[@theangelicaustinova]

Хотим мобильную верстку🔥

[@TildaPublishing]

Спасибо за пожелание!

[@sergey-zeleniy]

эпоха мобильных версий, а мы все смотрим как дизайнят на ПК

[@polygraphinya]

Аня, огромное спасибо за такой подробный разбор! Наконец-то разобралась с этими похожими, но все же разными типами верстки)) Но есть такой вопрос, наверное, очень профанский)) Если в Тильде максимальная ширина картинки 1680 px, но если делать автоскейл или растягивание картинки на всю ширину экрана, то она дико шакалится на 1920 и далее.. как этого избежать? Ваша картинка на фоне в Феномене Пруста кажется не размытой. Как этого добиться, молю, откройте секрет? Аня, или кто-нибудь, скажите, пожалуйста, как растянуть картинку на всю ширину экрана и сохранить ее качество, если она максимально по ширине 1680 px

[@SvetlanaMysenkova]

Аня, спасибо. Ты такая молодец, как же хочется быть на тебя похожей. Так доступно всё объясняешь. Ты СУПЕР!!!

[@lexteju3555]

Анна, спасибо за МК - супер полезность! Тильда - спасибо за ваш продукт!💫 Кое-что дополню от себя, а где-то акцентирую) Не пойму разделения на "типы вёрстки" в grid, window +autoscale (это опция для grid) - тогда как даже в рамках одного блока все 3 Принципа могут успешно комбинироваться под задачу - это и есть замысел разработчиков тильды. Тем более про весь сайт - может быть какое угодно комбо (и не факт что сложное) - главное чтобы задача выполнялась, а дизайнер понимал что он делает и для чего ) с этим пониманием и практикой ваши сайты станут выглядеть лучше! Резиновая вёрстка - это никак не autoscale, ближе к ней именно window container +%, если говорить про тильду конкретно, то в тильде вы не можете верстать "нативно", поэтому все принципы резиновой вёрстки не сделать в тильде и это - в целом ок, зато у вас во многом "развязаны руки" ). Кто хочет разобраться лучше - рекомендую посмотреть как работает "настоящая верстка" - материала полно в свободном доступе) Многие работают в рамках размера дисплея только своего личного ноутбука и не тестируют вёрстку на 4к+ hidpi дисплеях от 20" и больше. Да, большинство, наверное смотрит с 1920, но уже полно и ноутбуков 4к (не только mac) и дисплеи 4к+ и больше, на которых ваш блок или сайт целиком свёрстанный с autoscale выглядит немного странно) А вы думаете, что users с больших мониторов - не Ц.А.? Обычно крайностей 2 - или слишком всё мелко и напрягаешься читать текст или всё too much zoom) Да понятно, что не у всех есть несколько девайсов в доступе, а кто-то активно путешествует, тогда надо и разбираться в тех части лучше и просить знакомых потэстить) Планшеты и ресайз браузера на десктоп (брейкпойнты между mobile и десктоп) часто делаются по остаточному принципу и там наблюдаются банальные косяки - why?) Вы думаете, что люди, кто купил планшет или ресайзнул окно браузера чуть по ширине - уже не ваша ЦА?) это странно. Вывод - надо тестировать и разбираться в базовых принципах как работает адаптив и что можно делать в тильде, чтобы не "борщить" и не мельчить, ну и хотябы, чтобы скролла бокового не было там где он не нужен реально и весь контент который задумывался был в границах вьюпорта) Субъективно autoscale отчасти решил проблему ширины грида для mobile. Всем МИР и успехов в работе!

[@lexteju3555]

золотая мысль Ани, что грамотно ориентироваться на тип устройств у ЦА через аналитику посещаемости со статистикой по типам устройств - но такие данные сможет дать далеко не каждый клиент, они достигаются на объёме и на периоде времени, если сайт новый - их попросту нет в наличии, если трафика мало - тоже слабый аргумент.

[@AniaMelnik]

Привет! Спасибо за комментарий) 1. Все три типа не могут комбинироваться в Зеро блоке. Если ты включаешь настройку автоскейл, то работа в виндоу контейнере и процентах исключается. Грид и виндоу в рамках одного Зеро блока миксовать действительно можно, про это так же рассказала в ответе на вопрос про вёрстку мобильной версии) Про комбинацию типов вёрстки на всём сайте наглядно показала удачные примеры, как это может выглядеть) 2. Автоскейл, как и работу с виндоу-контейнером можно назвать резиновой вёрсткой. Другой вопрос, что в нём нет возможности регулировать «резиновость» отдельных элементов. Но во многих проектах такой простой тип резиновой вёрстки смотрится уместно, особенно в художественных и с прогрессивным дизайном. 3. Почему вы подумали, что я «думаю, что users с больших мониторов - не Ц.А.»? Я такого не говорила, а если дизайн не терпит гигантизма, то под такие устройства предложила бы комбинированную верстку автоскейл+виндоу или виндоу+грид, примеры классные на эфире как раз показала) 4. Про косяки в брейкпойнтах между mobile и десктоп нужна более контретная информация) У меня никаких проблем с адаптивами нет, как раз потому что я делаю тесты на разных моделях планшетов и телефонов с разных браузеров, что рекомендую делать всем без исключения) 5. «Вы думаете, что люди, кто купил планшет или ресайзнул окно браузера чуть по ширине - уже не ваша ЦА?)» - не поняла этот комментарий, нужно больше конкретики, потому что я такого утверждения тоже нигде не говорила) Про тестирование на всех устройствах согласна)

[@AniaMelnik]

@@lexteju3555 Да, поэтому если данные есть, супер) Если же их нет, то выбираем максимально безопасный вариант вёрстки, делаем запуск и собираем статистику)

[@lexteju3555]

@@AniaMelnik Привет! 1.) почему нет?) Простой пример: блок 1го экрана, на фоне в window лежит фото (или видос) + shape фильтр и может какие-то элементы по краям (от задачи) - всё это лежит в window, а заголовок + cta кнопка в grid (тут же возможно autoscale) - таким образом все 3 принципа использованы и это прям ок (данный пример самый простой) или как вариант в 1 блоке zero на десктопе нет autoscale, а на мобайле - использую - так можно? - можно) можно по всякому, когда оно работает, не тупит, не багует и даёт необходимый результат) Суть в том, что window располагать чать элементов, фоны, подложки (да всё что нужно) и при этом в гриде располагать другие важные элементы, а autoscale можно отключать на разных вьюпортах - всё в рамках 1 блока. 2.) Согласен) 3-4-5.) Вы приняли на свой счёт слишком - тут мысль не про ваши сайты и МК - с ними как раз всё good) А имелось ввиду, как общий мессендж к комьюнити, тем кто верстает, собирает на тильде. Просто довольно много вижу недочётов на сайтах на тильде в частности - цель коммента была в том, чтобы обратить внимание на проблематику, которая повторяется, возможно, потому что на это мало обращают внимание и порой даже классные сайты содержат грубые недочёты по адаптиву, которые портят впечатление, пользовательский опыт.

[@AniaMelnik]

@@lexteju3555 1) если ты в блоке включаешь функцию автоскейл, то всё, что ты задаёшь в виндоу и процентах, начинает съезжать, потестируй. Автоскейл исключает виндоу. Элементы в этом блоке, которые расположены по виндоу, на разных устройствах будут отображаться по разному, потестируй. Грид тоже будет исключен, потому что включается автоскейл, и твои 12 колонок растягиваются на 100% ширины экрана. То есть в рамках одного блока можно миксовать грид+виндоу либо просто включать автоскейл. 2-3-4-5) оки)) адаптивы очень интересная тема, там много нюансов, которые можно обсудить

[@plumebum2512]

Анна, большое вам спасибо! Вы мой кумир!

[@VeraSadko]

Здравствуйте! При вёрстке с привязкой к windows container, можно ли сделать, чтобы расстояние от края блока до текста и от текста до конца блока всегда было одинаковым. Ширина экрана меняется, текст поднимается или наоборот количество строк увеличивается и расстояние до следующего блока меняется. А как сделать чтобы высота блока тоже была "резиновой" всегда одинаковой, чтобы разные блоки с разным набором текста выглядели аккуратно? Спасибо!

[@VPUPOK_publico]

классное и полезное видео, которое приятно смотреть и пересматривать.

[@TildaPublishing]

Спасибо!🤩

[@katyarubina]

Я наконец-то досмотрела эфир ))) Как всегда все круто и понятно, Аня! Спасибо!

[@TildaPublishing]

Спасибо!

[@msnvvvp]

Великолепный урок 👍 Просто, понятно, нужно 👍

[@seoonlyRU]

лайк вам от вебмастера и гуру по сео и сайтам - СЕООНЛИ

[@ТониСтарк-у5в]

Аня, чтобы сократить время на изменении масштаба сайта просто зажми ctrl и крути колесико на мышке! )

[@ОлегКобызев-е9в]

конечно. тема мобайл фёрст очень интересует.

[@СергейВладимирович-ю9и]

Спасибо, было очень интересно. Много узнал)

[@TildaPublishing]

Спасибо 🧡

[@SvetlodarArtav]

Здравствуйте .Извините что немного не по теме. Подскажите, пожалуйста можно ли с indesign перенести в тильду макет?

[@TildaPublishing]

Здравствуйте! На данный момент прямая интеграция есть только с Figma.

[@SvetlodarArtav]

Анна , а Вы не затрагивали эту тему в своих видео? Хотелось бы посмотреть про это. @@TildaPublishing

[@egorpivko]

Спасибо за МК! Один вопрос, как работать с Window container на мобильной версии?

[@TildaPublishing]

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

[@tarashkev1ch_nadya]

Спасибо! Очень полезно

[@eko_slasty4899]

Все волшебно но ждем мобилку!

[@TildaPublishing]

Спасибо, учтем пожелание!

[@QuellFox]

Спасибо

[@yesaididit329]

Спасибо большое за отличный мастер-класс. Есть нубский вопрос, пожалуйста: если подключить свой домен к Тильде, то субдомен останется свободным для подключения Wordpress например?

[@TildaPublishing]

Добрый день! Да, субдомен вы сможете подключить к любому другому сайту.

[@НатальяЩеколкина]

Спасибо! Можно узнать, Аня, какой у Вас телеграмм канал?

[@TildaPublishing]

Здравствуйте! Вы можете посмотреть ссылки на другие соц.сети в Инстаграм Ани Мельник: instagram.com/ania._.melnik

[@АнастасияЗезюлина-х4э]

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

[@TildaPublishing]

Добрый день! Под слотами Анна имела в виду количество проектов на аккаунте. В зависимости от тарифа на аккаунте вы можете иметь от 1, 5, 10 и тд сайтов. Подробнее про тарифы - tilda.cc/ru/pricing/

[@yuliaanisakharova]

@@TildaPublishing 10 сайтов? 5 же максимум на тарифе бизнес. Или есть еще какие-то тарифы? А где их можно увидеть?

[@ДубасДаниил]

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

[@TildaPublishing]

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

[@TyttuFrytu]

Ребят, подскажите пожалуйста - сколько приблизительно нужно осваивать Тильду, чтобы была возможность хотя бы немного подработать на фрилансе?

[@AniaMelnik]

У меня ребята с нуля начинают после 5 недель брать заказы, за 5 недель тильду можно освоить виртуозно

[@TyttuFrytu]

@@AniaMelnik спасибо за инфу)

[@sanechek.xyz-]

Аня выглядит как персонаж какой-то из LoL :D

[@TanyaT8923]

14:23 в процентах от левого края отступ задайте в вашем случае это примерно 80%

[@Putevoii]

😍🥰🥰

[@vam_svetlo]

Мобилки, молю

[@rasvud3014]

автоскейл не работает(( сделал все как показано тут, но все элементы остаются прежнего размера и не вмещаются в окно

[@TildaPublishing]

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

[@R_EA]

Интересна верстка для мобильных устройств

[@TildaPublishing]

Спасибо!Отметили пожелание!

[@ajkpro368]

Хотим адаптивную верстку под мобилы!

[@userdimasik]

все ждём мобилки

[@Lyubov-gl4lx]

КАКОЙ у Вас опыт работы?

[@TildaPublishing]

Добрый день! Вы можете написать этот вопрос Анне в социальных сетях, контакт указан в описании к видео.

[@mikhailfilippov3715]

То чувство когда потратил на ПК версию 14 часов, а на адаптацию на мобильных устройствах два дня😂

[@IgorBobyrev]

Кто это там сказал что "верстка должна одинаково выглядеть на всех устройствах"? Как она может одинаково выглядеть на мобилке портретной и на wide-дисплее? Как раз наоборот: верстка должна не одинаково а АДЕКВАТНО выглядеть на разных типах устройств

[@MegaDestrok]

Короче верстка в процентах это колдунство с бубном :D

[@AniaMelnik]

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

[@Наталья-у2и2х]

Ни фига себе ленивый дизайнер, хотела бы я таким ленивцем быть)

[@АндрейК-и6ф]

Не доверяю дизайнерам, которые смотрят в 1.5 глаза))

[@alinasyro672]

спасибо! очень полезно