Виды верстки в Zero Block: autoscale, grid- и window-контейнеры
ฝัง
- เผยแพร่เมื่อ 13 ก.ค. 2024
- Как выбрать тип верстки в Zero Block, подходящий вашему проекту, и какие особенности нужно учесть - узнаете на бесплатном мастер-классе дизайнера Ани Мельник.
◾ Инстаграм Ани Мельник: / ania._.melnik
🌟 Дизайн сайта в прямом эфире: Autoscale в Zero Block: • Дизайн сайта в прямом ...
🌟 Вёрстка в Zero Block в прямом эфире: • Вёрстка в Zero Block в...
🌟 Другие видео по работе с Zero Block: tilda.link/playlist-zero-block
🌟 Руководство по Zero Block: tilda.education/articles-zero...
00:00 - О чём будет мастер-класс
04:10 - Что такое верстка
06:02 - Как работает верстка в Grid-контейнере
07:48 - Autoscale: как работает автомасштабирование
09:23 - Как работает верстка в Window-контейнере
15:00 - Как верстать с Autoscale на 10 колонок
19:55 - Как учесть нюанс с пустыми полями по бокам
21:42 - Как понять, какой тип вёрстки использован на сайте
22:47 - Как добавить крупный заголовок при Window-контейнере
26:55 - Комбинированная верстка в Zero Block
32:10 - Примеры сайтов с версткой по Grid-контейнеру
38:00 - Пример сайта с Autoscale
39:50 - Пример сайта с версткой по Window-контейнеру
43:34 - Примеры сайтов с комбинированной вёрсткой
54:48 - Сайт Ани Мельник про феномен Пруста
58:30 - «Феномен Пруста» в Grid-контейнере
59:20 - «Феномен Пруста» в Autoscale
01:00:36 - «Феномен Пруста» в Window-контейнере
01:05:30 - Ответы на вопросы
На вебинаре разберём:
- Как определить подходящий тип вёрстки в Zero Block.
- В каких случаях использовать Grid-, а в каких Window-контейнер.
- Принцип работы и советы по использованию автомасштабирования.
____________
✨ Ближайшие вебинары Tilda Publishing: webinars.tilda.cc
👉 Создать сайт на Tilda: tilda.cc/ru/
◾ Школа Тильды: tilda.school
🤩 Онлайн-журнал для дизайнеров, маркетологов и предпринимателей Tilda Education: tilda.education/
Подписывайтесь на нас в соцсетях:
◾ Instagram: / tildapublishing
◾ Telegram: t.me/tildanews
◾ VK: tildapublishing
◾ Facebook: / tildapublishing
Оставить отзыв о работе на платформе Tilda: tilda.cc/ru/otzyvy
Теги: веб дизайн тильда обучение тильда tilda дизайн стрим дизайн сайта tilda обучение обзор конструктора tilda обзор тильда сайт на тильда
Анечка, спасибо! Все просто, понятно, по делу!
Аня, спасибо. Ты такая молодец, как же хочется быть на тебя похожей. Так доступно всё объясняешь. Ты СУПЕР!!!
Спасибо! Так Вы воодушевленно всё рассказываете, я так вдохновилась ещё больше/усерднее развиваться и стать такой же крутышкой)))
Анна, большое вам спасибо! Вы мой кумир!
Аня, спасибо большое) Так понятно объясняешь, все страхи прошли, появился интерес, ручки чешутся всё попробовать теперь) Спасибо 🌿🌹🌿
Анечка, спасибо за такое детальное и понятное объяснение. Наконец в голове все более или менее разложилось по полочкам, начну экспериментировать с разными видами верстки ❤
Я наконец-то досмотрела эфир ))) Как всегда все круто и понятно, Аня! Спасибо!
Спасибо!
Спасибо, Анечка, очень ценный для меня эфир и очень вовремя. Я только начинаю работать в Тильде. Ты очень доступно объясняешь и очень милая, приятная. На мой взгляд, ты лучше всех, из тех кого я видела.
Благодарю за очень полезный эфир! Очень нужен мастер-класс по верстке на мобильных устройствах + как там же работает анимация.
Спасибо! Очень полезно
Спасибо! многое поняла про виды верстки!! Думаю теперь не буду путаться)
Спасибо! 🌟
Аня, спасибо огромное ❤ супер эфир!!! Про мобилку тоже очень нужен эфир🙏😊
Спасибо! Учтем пожелания)
спасибо! очень полезно
классное и полезное видео, которое приятно смотреть и пересматривать.
Спасибо!🤩
Спасибо, было очень интересно. Много узнал)
Спасибо 🧡
Спасибо за мастер-класс. Вы очень талантливый и увлеченный дизайнер. Хотелось бы отдельный мастер-класс по мобильной верстке.
Спасибо!Приняли пожелание👍
Спасибо
Аня спасибо за эфир. Работаю уже 14 лет дизайнером но даже у вас подчерпнул какие то новые детали. Приятно слушать вас.
Спасибо 🧡
Великолепный урок 👍 Просто, понятно, нужно 👍
лайк вам от вебмастера и гуру по сео и сайтам - СЕООНЛИ
Хотим мобильную верстку🔥
Спасибо за пожелание!
эпоха мобильных версий, а мы все смотрим как дизайнят на ПК
Аня, чтобы сократить время на изменении масштаба сайта просто зажми ctrl и крути колесико на мышке! )
Анна, спасибо за МК - супер полезность! Тильда - спасибо за ваш продукт!💫
Кое-что дополню от себя, а где-то акцентирую) Не пойму разделения на "типы вёрстки" в 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. Всем МИР и успехов в работе!
золотая мысль Ани, что грамотно ориентироваться на тип устройств у ЦА через аналитику посещаемости со статистикой по типам устройств - но такие данные сможет дать далеко не каждый клиент, они достигаются на объёме и на периоде времени, если сайт новый - их попросту нет в наличии, если трафика мало - тоже слабый аргумент.
Привет! Спасибо за комментарий)
1. Все три типа не могут комбинироваться в Зеро блоке. Если ты включаешь настройку автоскейл, то работа в виндоу контейнере и процентах исключается. Грид и виндоу в рамках одного Зеро блока миксовать действительно можно, про это так же рассказала в ответе на вопрос про вёрстку мобильной версии) Про комбинацию типов вёрстки на всём сайте наглядно показала удачные примеры, как это может выглядеть)
2. Автоскейл, как и работу с виндоу-контейнером можно назвать резиновой вёрсткой. Другой вопрос, что в нём нет возможности регулировать «резиновость» отдельных элементов. Но во многих проектах такой простой тип резиновой вёрстки смотрится уместно, особенно в художественных и с прогрессивным дизайном.
3. Почему вы подумали, что я «думаю, что users с больших мониторов - не Ц.А.»? Я такого не говорила, а если дизайн не терпит гигантизма, то под такие устройства предложила бы комбинированную верстку автоскейл+виндоу или виндоу+грид, примеры классные на эфире как раз показала)
4. Про косяки в брейкпойнтах между mobile и десктоп нужна более контретная информация) У меня никаких проблем с адаптивами нет, как раз потому что я делаю тесты на разных моделях планшетов и телефонов с разных браузеров, что рекомендую делать всем без исключения)
5. «Вы думаете, что люди, кто купил планшет или ресайзнул окно браузера чуть по ширине - уже не ваша ЦА?)» - не поняла этот комментарий, нужно больше конкретики, потому что я такого утверждения тоже нигде не говорила)
Про тестирование на всех устройствах согласна)
@@lexteju3555 Да, поэтому если данные есть, супер) Если же их нет, то выбираем максимально безопасный вариант вёрстки, делаем запуск и собираем статистику)
@@AniaMelnik Привет!
1.) почему нет?) Простой пример: блок 1го экрана, на фоне в window лежит фото (или видос) + shape фильтр и может какие-то элементы по краям (от задачи) - всё это лежит в window, а заголовок + cta кнопка в grid (тут же возможно autoscale) - таким образом все 3 принципа использованы и это прям ок (данный пример самый простой) или как вариант в 1 блоке zero на десктопе нет autoscale, а на мобайле - использую - так можно? - можно) можно по всякому, когда оно работает, не тупит, не багует и даёт необходимый результат) Суть в том, что window располагать чать элементов, фоны, подложки (да всё что нужно) и при этом в гриде располагать другие важные элементы, а autoscale можно отключать на разных вьюпортах - всё в рамках 1 блока.
2.) Согласен)
3-4-5.) Вы приняли на свой счёт слишком - тут мысль не про ваши сайты и МК - с ними как раз всё good) А имелось ввиду, как общий мессендж к комьюнити, тем кто верстает, собирает на тильде. Просто довольно много вижу недочётов на сайтах на тильде в частности - цель коммента была в том, чтобы обратить внимание на проблематику, которая повторяется, возможно, потому что на это мало обращают внимание и порой даже классные сайты содержат грубые недочёты по адаптиву, которые портят впечатление, пользовательский опыт.
@@lexteju3555
1) если ты в блоке включаешь функцию автоскейл, то всё, что ты задаёшь в виндоу и процентах, начинает съезжать, потестируй. Автоскейл исключает виндоу. Элементы в этом блоке, которые расположены по виндоу, на разных устройствах будут отображаться по разному, потестируй. Грид тоже будет исключен, потому что включается автоскейл, и твои 12 колонок растягиваются на 100% ширины экрана. То есть в рамках одного блока можно миксовать грид+виндоу либо просто включать автоскейл.
2-3-4-5) оки)) адаптивы очень интересная тема, там много нюансов, которые можно обсудить
😍🥰🥰
конечно. тема мобайл фёрст очень интересует.
Привет! Очень понравилось твое видео и очень помогло мне, т.к. я только начинаю свой путь в дизайне.
Подскажи, пожалуйста, а пользуешься ли ты стандартными блоками Тильда или они очень похожи, и ты предпочитаешь Зеро блок? Мне нравится стандартные блоки Тильда, потому что я пока медленно работаю, а со стандартными блоками ведь получается намного быстрее... или какие тут есть минусы?
Все волшебно но ждем мобилку!
Спасибо, учтем пожелание!
Аня, огромное спасибо за такой подробный разбор! Наконец-то разобралась с этими похожими, но все же разными типами верстки))
Но есть такой вопрос, наверное, очень профанский)) Если в Тильде максимальная ширина картинки 1680 px, но если делать автоскейл или растягивание картинки на всю ширину экрана, то она дико шакалится на 1920 и далее.. как этого избежать? Ваша картинка на фоне в Феномене Пруста кажется не размытой. Как этого добиться, молю, откройте секрет?
Аня, или кто-нибудь, скажите, пожалуйста, как растянуть картинку на всю ширину экрана и сохранить ее качество, если она максимально по ширине 1680 px
Спасибо большое за отличный мастер-класс. Есть нубский вопрос, пожалуйста: если подключить свой домен к Тильде, то субдомен останется свободным для подключения Wordpress например?
Добрый день!
Да, субдомен вы сможете подключить к любому другому сайту.
14:23 в процентах от левого края отступ задайте в вашем случае это примерно 80%
Спасибо большое за эфир)) Появилось понмиание, как можно с помощью видов верстки круто менять дизайн и делать сайт визуально еще красивее и интереснее) Раньше не знала про эти методы, версала просто в гриде. Хотела спросить про содержание проектов на слоте. Под слотом что ты имеешь ввиду? Я хочу выставлять свои работы на награду в тильде, хочу сделать сой сайт - портфолио, но нет финансовой возможности его содержать.
Добрый день!
Под слотами Анна имела в виду количество проектов на аккаунте. В зависимости от тарифа на аккаунте вы можете иметь от 1, 5, 10 и тд сайтов.
Подробнее про тарифы - tilda.cc/ru/pricing/
@@TildaPublishing 10 сайтов? 5 же максимум на тарифе бизнес. Или есть еще какие-то тарифы? А где их можно увидеть?
Аня выглядит как персонаж какой-то из LoL :D
Мобилки, молю
Спасибо за МК! Один вопрос, как работать с Window container на мобильной версии?
Добрый день!
Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc.
В обращении подробно опишите задачу, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.
Здравствуйте! При вёрстке с привязкой к windows container, можно ли сделать, чтобы расстояние от края блока до текста и от текста до конца блока всегда было одинаковым. Ширина экрана меняется, текст поднимается или наоборот количество строк увеличивается и расстояние до следующего блока меняется. А как сделать чтобы высота блока тоже была "резиновой" всегда одинаковой, чтобы разные блоки с разным набором текста выглядели аккуратно? Спасибо!
Хотим адаптивную верстку под мобилы!
Спасибо! Можно узнать, Аня, какой у Вас телеграмм канал?
Здравствуйте!
Вы можете посмотреть ссылки на другие соц.сети в Инстаграм Ани Мельник: instagram.com/ania._.melnik
Ребят, подскажите пожалуйста - сколько приблизительно нужно осваивать Тильду, чтобы была возможность хотя бы немного подработать на фрилансе?
У меня ребята с нуля начинают после 5 недель брать заказы, за 5 недель тильду можно освоить виртуозно
@@AniaMelnik спасибо за инфу)
Интересна верстка для мобильных устройств
Спасибо!Отметили пожелание!
Здравствуйте .Извините что немного не по теме. Подскажите, пожалуйста можно ли с indesign перенести в тильду макет?
Здравствуйте! На данный момент прямая интеграция есть только с Figma.
Анна , а Вы не затрагивали эту тему в своих видео? Хотелось бы посмотреть про это. @@TildaPublishing
все ждём мобилки
друзья,подскажите пожалуйста,как делать выпадающее меню в зеро блоке
Добрый день!
Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc
В обращении подробно опишите задачу, это поможет дать максимально точный ответ.
КАКОЙ у Вас опыт работы?
Добрый день!
Вы можете написать этот вопрос Анне в социальных сетях, контакт указан в описании к видео.
автоскейл не работает(( сделал все как показано тут, но все элементы остаются прежнего размера и не вмещаются в окно
Здравствуйте! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc
В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
Короче верстка в процентах это колдунство с бубном :D
Достаточно один раз разобраться с процентами в зеро блоке, и мир никогда не будет прежним)
То чувство когда потратил на ПК версию 14 часов, а на адаптацию на мобильных устройствах два дня😂
Кто это там сказал что "верстка должна одинаково выглядеть на всех устройствах"? Как она может одинаково выглядеть на мобилке портретной и на wide-дисплее? Как раз наоборот: верстка должна не одинаково а АДЕКВАТНО выглядеть на разных типах устройств
Ни фига себе ленивый дизайнер, хотела бы я таким ленивцем быть)
Не доверяю дизайнерам, которые смотрят в 1.5 глаза))