Тёмный

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

Tilda Publishing
Подписаться 133 тыс.
Просмотров 32 тыс.
50% 1

Опубликовано:

 

20 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 83   
@Nadi_Tich
@Nadi_Tich 3 месяца назад
Анечка, спасибо! Все просто, понятно, по делу!
@olgakotova8943
@olgakotova8943 Год назад
Анечка, спасибо за такое детальное и понятное объяснение. Наконец в голове все более или менее разложилось по полочкам, начну экспериментировать с разными видами верстки ❤
@Anneta75
@Anneta75 2 года назад
Аня, спасибо огромное ❤ супер эфир!!! Про мобилку тоже очень нужен эфир🙏😊
@TildaPublishing
@TildaPublishing 2 года назад
Спасибо! Учтем пожелания)
@ПавелНиян
@ПавелНиян Год назад
Благодарю за очень полезный эфир! Очень нужен мастер-класс по верстке на мобильных устройствах + как там же работает анимация.
@Vika-lb3cq
@Vika-lb3cq Год назад
Спасибо! многое поняла про виды верстки!! Думаю теперь не буду путаться)
@TildaPublishing
@TildaPublishing Год назад
Спасибо! 🌟
@ТатьянаХоружева
@ТатьянаХоружева 2 года назад
Спасибо! Так Вы воодушевленно всё рассказываете, я так вдохновилась ещё больше/усерднее развиваться и стать такой же крутышкой)))
@Marina-Isaeva-web
@Marina-Isaeva-web Год назад
Аня, спасибо большое) Так понятно объясняешь, все страхи прошли, появился интерес, ручки чешутся всё попробовать теперь) Спасибо 🌿🌹🌿
@Юлька-й9ь
@Юлька-й9ь Год назад
Спасибо, Анечка, очень ценный для меня эфир и очень вовремя. Я только начинаю работать в Тильде. Ты очень доступно объясняешь и очень милая, приятная. На мой взгляд, ты лучше всех, из тех кого я видела.
@plumebum2512
@plumebum2512 Год назад
Анна, большое вам спасибо! Вы мой кумир!
@SvetlanaMysenkova
@SvetlanaMysenkova 2 года назад
Аня, спасибо. Ты такая молодец, как же хочется быть на тебя похожей. Так доступно всё объясняешь. Ты СУПЕР!!!
@svetlanaleontyeva
@svetlanaleontyeva 2 года назад
Спасибо за мастер-класс. Вы очень талантливый и увлеченный дизайнер. Хотелось бы отдельный мастер-класс по мобильной верстке.
@TildaPublishing
@TildaPublishing 2 года назад
Спасибо!Приняли пожелание👍
@Nsdimon
@Nsdimon Год назад
Аня спасибо за эфир. Работаю уже 14 лет дизайнером но даже у вас подчерпнул какие то новые детали. Приятно слушать вас.
@TildaPublishing
@TildaPublishing Год назад
Спасибо 🧡
@VPUPOK_publico
@VPUPOK_publico Год назад
классное и полезное видео, которое приятно смотреть и пересматривать.
@TildaPublishing
@TildaPublishing Год назад
Спасибо!🤩
@lexteju3555
@lexteju3555 2 года назад
Анна, спасибо за МК - супер полезность! Тильда - спасибо за ваш продукт!💫 Кое-что дополню от себя, а где-то акцентирую) Не пойму разделения на "типы вёрстки" в 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
@lexteju3555 2 года назад
золотая мысль Ани, что грамотно ориентироваться на тип устройств у ЦА через аналитику посещаемости со статистикой по типам устройств - но такие данные сможет дать далеко не каждый клиент, они достигаются на объёме и на периоде времени, если сайт новый - их попросту нет в наличии, если трафика мало - тоже слабый аргумент.
@AniaMelnik
@AniaMelnik 2 года назад
Привет! Спасибо за комментарий) 1. Все три типа не могут комбинироваться в Зеро блоке. Если ты включаешь настройку автоскейл, то работа в виндоу контейнере и процентах исключается. Грид и виндоу в рамках одного Зеро блока миксовать действительно можно, про это так же рассказала в ответе на вопрос про вёрстку мобильной версии) Про комбинацию типов вёрстки на всём сайте наглядно показала удачные примеры, как это может выглядеть) 2. Автоскейл, как и работу с виндоу-контейнером можно назвать резиновой вёрсткой. Другой вопрос, что в нём нет возможности регулировать «резиновость» отдельных элементов. Но во многих проектах такой простой тип резиновой вёрстки смотрится уместно, особенно в художественных и с прогрессивным дизайном. 3. Почему вы подумали, что я «думаю, что users с больших мониторов - не Ц.А.»? Я такого не говорила, а если дизайн не терпит гигантизма, то под такие устройства предложила бы комбинированную верстку автоскейл+виндоу или виндоу+грид, примеры классные на эфире как раз показала) 4. Про косяки в брейкпойнтах между mobile и десктоп нужна более контретная информация) У меня никаких проблем с адаптивами нет, как раз потому что я делаю тесты на разных моделях планшетов и телефонов с разных браузеров, что рекомендую делать всем без исключения) 5. «Вы думаете, что люди, кто купил планшет или ресайзнул окно браузера чуть по ширине - уже не ваша ЦА?)» - не поняла этот комментарий, нужно больше конкретики, потому что я такого утверждения тоже нигде не говорила) Про тестирование на всех устройствах согласна)
@AniaMelnik
@AniaMelnik 2 года назад
@@lexteju3555 Да, поэтому если данные есть, супер) Если же их нет, то выбираем максимально безопасный вариант вёрстки, делаем запуск и собираем статистику)
@lexteju3555
@lexteju3555 2 года назад
@@AniaMelnik Привет! 1.) почему нет?) Простой пример: блок 1го экрана, на фоне в window лежит фото (или видос) + shape фильтр и может какие-то элементы по краям (от задачи) - всё это лежит в window, а заголовок + cta кнопка в grid (тут же возможно autoscale) - таким образом все 3 принципа использованы и это прям ок (данный пример самый простой) или как вариант в 1 блоке zero на десктопе нет autoscale, а на мобайле - использую - так можно? - можно) можно по всякому, когда оно работает, не тупит, не багует и даёт необходимый результат) Суть в том, что window располагать чать элементов, фоны, подложки (да всё что нужно) и при этом в гриде располагать другие важные элементы, а autoscale можно отключать на разных вьюпортах - всё в рамках 1 блока. 2.) Согласен) 3-4-5.) Вы приняли на свой счёт слишком - тут мысль не про ваши сайты и МК - с ними как раз всё good) А имелось ввиду, как общий мессендж к комьюнити, тем кто верстает, собирает на тильде. Просто довольно много вижу недочётов на сайтах на тильде в частности - цель коммента была в том, чтобы обратить внимание на проблематику, которая повторяется, возможно, потому что на это мало обращают внимание и порой даже классные сайты содержат грубые недочёты по адаптиву, которые портят впечатление, пользовательский опыт.
@AniaMelnik
@AniaMelnik 2 года назад
@@lexteju3555 1) если ты в блоке включаешь функцию автоскейл, то всё, что ты задаёшь в виндоу и процентах, начинает съезжать, потестируй. Автоскейл исключает виндоу. Элементы в этом блоке, которые расположены по виндоу, на разных устройствах будут отображаться по разному, потестируй. Грид тоже будет исключен, потому что включается автоскейл, и твои 12 колонок растягиваются на 100% ширины экрана. То есть в рамках одного блока можно миксовать грид+виндоу либо просто включать автоскейл. 2-3-4-5) оки)) адаптивы очень интересная тема, там много нюансов, которые можно обсудить
@msnvvvp
@msnvvvp Год назад
Великолепный урок 👍 Просто, понятно, нужно 👍
@katyarubina
@katyarubina 2 года назад
Я наконец-то досмотрела эфир ))) Как всегда все круто и понятно, Аня! Спасибо!
@TildaPublishing
@TildaPublishing 2 года назад
Спасибо!
@alinasyro672
@alinasyro672 3 месяца назад
спасибо! очень полезно
@СергейВладимирович-ю9и
Спасибо, было очень интересно. Много узнал)
@TildaPublishing
@TildaPublishing Год назад
Спасибо 🧡
@seoonlyRU
@seoonlyRU 2 года назад
лайк вам от вебмастера и гуру по сео и сайтам - СЕООНЛИ
@theangelicaustinova
@theangelicaustinova 2 года назад
Хотим мобильную верстку🔥
@TildaPublishing
@TildaPublishing 2 года назад
Спасибо за пожелание!
@sergey-zeleniy
@sergey-zeleniy Год назад
эпоха мобильных версий, а мы все смотрим как дизайнят на ПК
@ТониСтарк-у5в
@ТониСтарк-у5в 2 года назад
Аня, чтобы сократить время на изменении масштаба сайта просто зажми ctrl и крути колесико на мышке! )
@сонясонная-я1ш
@сонясонная-я1ш 4 месяца назад
Привет! Очень понравилось твое видео и очень помогло мне, т.к. я только начинаю свой путь в дизайне. Подскажи, пожалуйста, а пользуешься ли ты стандартными блоками Тильда или они очень похожи, и ты предпочитаешь Зеро блок? Мне нравится стандартные блоки Тильда, потому что я пока медленно работаю, а со стандартными блоками ведь получается намного быстрее... или какие тут есть минусы?
@eko_slasty4899
@eko_slasty4899 Год назад
Все волшебно но ждем мобилку!
@TildaPublishing
@TildaPublishing Год назад
Спасибо, учтем пожелание!
@QuellFox
@QuellFox 7 месяцев назад
Спасибо
@polygraphinya
@polygraphinya 5 месяцев назад
Аня, огромное спасибо за такой подробный разбор! Наконец-то разобралась с этими похожими, но все же разными типами верстки)) Но есть такой вопрос, наверное, очень профанский)) Если в Тильде максимальная ширина картинки 1680 px, но если делать автоскейл или растягивание картинки на всю ширину экрана, то она дико шакалится на 1920 и далее.. как этого избежать? Ваша картинка на фоне в Феномене Пруста кажется не размытой. Как этого добиться, молю, откройте секрет? Аня, или кто-нибудь, скажите, пожалуйста, как растянуть картинку на всю ширину экрана и сохранить ее качество, если она максимально по ширине 1680 px
@ОлегКобызев-е9в
конечно. тема мобайл фёрст очень интересует.
@VeraSadko
@VeraSadko Год назад
Здравствуйте! При вёрстке с привязкой к windows container, можно ли сделать, чтобы расстояние от края блока до текста и от текста до конца блока всегда было одинаковым. Ширина экрана меняется, текст поднимается или наоборот количество строк увеличивается и расстояние до следующего блока меняется. А как сделать чтобы высота блока тоже была "резиновой" всегда одинаковой, чтобы разные блоки с разным набором текста выглядели аккуратно? Спасибо!
@egorpivko
@egorpivko Год назад
Спасибо за МК! Один вопрос, как работать с Window container на мобильной версии?
@TildaPublishing
@TildaPublishing Год назад
Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите задачу, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.
@SvetlodarArtav
@SvetlodarArtav Год назад
Здравствуйте .Извините что немного не по теме. Подскажите, пожалуйста можно ли с indesign перенести в тильду макет?
@TildaPublishing
@TildaPublishing Год назад
Здравствуйте! На данный момент прямая интеграция есть только с Figma.
@SvetlodarArtav
@SvetlodarArtav Год назад
Анна , а Вы не затрагивали эту тему в своих видео? Хотелось бы посмотреть про это. @@TildaPublishing
@TanyaT8923
@TanyaT8923 Год назад
14:23 в процентах от левого края отступ задайте в вашем случае это примерно 80%
@yesaididit329
@yesaididit329 2 года назад
Спасибо большое за отличный мастер-класс. Есть нубский вопрос, пожалуйста: если подключить свой домен к Тильде, то субдомен останется свободным для подключения Wordpress например?
@TildaPublishing
@TildaPublishing 2 года назад
Добрый день! Да, субдомен вы сможете подключить к любому другому сайту.
@sanechek.xyz-
@sanechek.xyz- 2 года назад
Аня выглядит как персонаж какой-то из LoL :D
@Putevoii
@Putevoii 9 месяцев назад
😍🥰🥰
@АнастасияЗезюлина-х4э
Спасибо большое за эфир)) Появилось понмиание, как можно с помощью видов верстки круто менять дизайн и делать сайт визуально еще красивее и интереснее) Раньше не знала про эти методы, версала просто в гриде. Хотела спросить про содержание проектов на слоте. Под слотом что ты имеешь ввиду? Я хочу выставлять свои работы на награду в тильде, хочу сделать сой сайт - портфолио, но нет финансовой возможности его содержать.
@TildaPublishing
@TildaPublishing 2 года назад
Добрый день! Под слотами Анна имела в виду количество проектов на аккаунте. В зависимости от тарифа на аккаунте вы можете иметь от 1, 5, 10 и тд сайтов. Подробнее про тарифы - tilda.cc/ru/pricing/
@yuliaanisakharova
@yuliaanisakharova Год назад
@@TildaPublishing 10 сайтов? 5 же максимум на тарифе бизнес. Или есть еще какие-то тарифы? А где их можно увидеть?
@НатальяЩеколкина
@НатальяЩеколкина 2 года назад
Спасибо! Можно узнать, Аня, какой у Вас телеграмм канал?
@TildaPublishing
@TildaPublishing 2 года назад
Здравствуйте! Вы можете посмотреть ссылки на другие соц.сети в Инстаграм Ани Мельник: instagram.com/ania._.melnik
@TyttuFrytu
@TyttuFrytu 2 года назад
Ребят, подскажите пожалуйста - сколько приблизительно нужно осваивать Тильду, чтобы была возможность хотя бы немного подработать на фрилансе?
@AniaMelnik
@AniaMelnik 2 года назад
У меня ребята с нуля начинают после 5 недель брать заказы, за 5 недель тильду можно освоить виртуозно
@TyttuFrytu
@TyttuFrytu 2 года назад
@@AniaMelnik спасибо за инфу)
@vam_svetlo
@vam_svetlo 2 года назад
Мобилки, молю
@R_EA
@R_EA 2 года назад
Интересна верстка для мобильных устройств
@TildaPublishing
@TildaPublishing 2 года назад
Спасибо!Отметили пожелание!
@ajkpro368
@ajkpro368 7 месяцев назад
Хотим адаптивную верстку под мобилы!
@ДубасДаниил
@ДубасДаниил 2 года назад
друзья,подскажите пожалуйста,как делать выпадающее меню в зеро блоке
@TildaPublishing
@TildaPublishing 2 года назад
Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc В обращении подробно опишите задачу, это поможет дать максимально точный ответ.
@rasvud3014
@rasvud3014 Год назад
автоскейл не работает(( сделал все как показано тут, но все элементы остаются прежнего размера и не вмещаются в окно
@TildaPublishing
@TildaPublishing Год назад
Здравствуйте! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
@userdimasik
@userdimasik 2 года назад
все ждём мобилки
@Lyubov-gl4lx
@Lyubov-gl4lx Год назад
КАКОЙ у Вас опыт работы?
@TildaPublishing
@TildaPublishing Год назад
Добрый день! Вы можете написать этот вопрос Анне в социальных сетях, контакт указан в описании к видео.
@IgorBobyrev
@IgorBobyrev 8 месяцев назад
Кто это там сказал что "верстка должна одинаково выглядеть на всех устройствах"? Как она может одинаково выглядеть на мобилке портретной и на wide-дисплее? Как раз наоборот: верстка должна не одинаково а АДЕКВАТНО выглядеть на разных типах устройств
@mikhailfilippov3715
@mikhailfilippov3715 Год назад
То чувство когда потратил на ПК версию 14 часов, а на адаптацию на мобильных устройствах два дня😂
@MegaDestrok
@MegaDestrok 2 года назад
Короче верстка в процентах это колдунство с бубном :D
@AniaMelnik
@AniaMelnik 2 года назад
Достаточно один раз разобраться с процентами в зеро блоке, и мир никогда не будет прежним)
@Наталья-у2и2х
@Наталья-у2и2х Год назад
Ни фига себе ленивый дизайнер, хотела бы я таким ленивцем быть)
@АндрейК-и6ф
@АндрейК-и6ф 2 года назад
Не доверяю дизайнерам, которые смотрят в 1.5 глаза))
@tarashkev1ch_nadya
@tarashkev1ch_nadya 2 года назад
Спасибо! Очень полезно
Далее
#kikakim
00:17
Просмотров 6 млн
What’s your height?🩷🙀💚
00:59
Просмотров 3 млн
#kikakim
00:17
Просмотров 6 млн