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

  Рет қаралды 29,960

Tilda Publishing

Tilda Publishing

Күн бұрын

Как выбрать тип верстки в 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 обзор тильда сайт на тильда

Пікірлер: 81
@olgakotova8943
@olgakotova8943 Жыл бұрын
Анечка, спасибо за такое детальное и понятное объяснение. Наконец в голове все более или менее разложилось по полочкам, начну экспериментировать с разными видами верстки ❤
@plumebum2512
@plumebum2512 Жыл бұрын
Анна, большое вам спасибо! Вы мой кумир!
@user-tx9du8xr6p
@user-tx9du8xr6p Жыл бұрын
Спасибо! Так Вы воодушевленно всё рассказываете, я так вдохновилась ещё больше/усерднее развиваться и стать такой же крутышкой)))
@SvetlanaMysenkova
@SvetlanaMysenkova Жыл бұрын
Аня, спасибо. Ты такая молодец, как же хочется быть на тебя похожей. Так доступно всё объясняешь. Ты СУПЕР!!!
@user-tg5vp9in8c
@user-tg5vp9in8c Жыл бұрын
Благодарю за очень полезный эфир! Очень нужен мастер-класс по верстке на мобильных устройствах + как там же работает анимация.
@Marina-Isaeva-web
@Marina-Isaeva-web Жыл бұрын
Аня, спасибо большое) Так понятно объясняешь, все страхи прошли, появился интерес, ручки чешутся всё попробовать теперь) Спасибо 🌿🌹🌿
@katyarubina
@katyarubina Жыл бұрын
Я наконец-то досмотрела эфир ))) Как всегда все круто и понятно, Аня! Спасибо!
@TildaPublishing
@TildaPublishing Жыл бұрын
Спасибо!
@user-zz5qe7mn9e
@user-zz5qe7mn9e 11 ай бұрын
Спасибо, Анечка, очень ценный для меня эфир и очень вовремя. Я только начинаю работать в Тильде. Ты очень доступно объясняешь и очень милая, приятная. На мой взгляд, ты лучше всех, из тех кого я видела.
@Anneta75
@Anneta75 Жыл бұрын
Аня, спасибо огромное ❤ супер эфир!!! Про мобилку тоже очень нужен эфир🙏😊
@TildaPublishing
@TildaPublishing Жыл бұрын
Спасибо! Учтем пожелания)
@Nsdimon
@Nsdimon Жыл бұрын
Аня спасибо за эфир. Работаю уже 14 лет дизайнером но даже у вас подчерпнул какие то новые детали. Приятно слушать вас.
@TildaPublishing
@TildaPublishing Жыл бұрын
Спасибо 🧡
@Vika-lb3cq
@Vika-lb3cq Жыл бұрын
Спасибо! многое поняла про виды верстки!! Думаю теперь не буду путаться)
@TildaPublishing
@TildaPublishing Жыл бұрын
Спасибо! 🌟
@svetlanaleontyeva
@svetlanaleontyeva Жыл бұрын
Спасибо за мастер-класс. Вы очень талантливый и увлеченный дизайнер. Хотелось бы отдельный мастер-класс по мобильной верстке.
@TildaPublishing
@TildaPublishing Жыл бұрын
Спасибо!Приняли пожелание👍
@tarashkev1ch_nadya
@tarashkev1ch_nadya Жыл бұрын
Спасибо! Очень полезно
@VPUPOK_publico
@VPUPOK_publico Жыл бұрын
классное и полезное видео, которое приятно смотреть и пересматривать.
@TildaPublishing
@TildaPublishing Жыл бұрын
Спасибо!🤩
@user-vz7bw3el2y
@user-vz7bw3el2y Жыл бұрын
Спасибо, было очень интересно. Много узнал)
@TildaPublishing
@TildaPublishing Жыл бұрын
Спасибо 🧡
@user-os9de6jg4k
@user-os9de6jg4k 30 минут бұрын
Привет! Очень понравилось твое видео и очень помогло мне, т.к. я только начинаю свой путь в дизайне. Подскажи, пожалуйста, а пользуешься ли ты стандартными блоками Тильда или они очень похожи, и ты предпочитаешь Зеро блок? Мне нравится стандартные блоки Тильда, потому что я пока медленно работаю, а со стандартными блоками ведь получается намного быстрее... или какие тут есть минусы?
@msnvvvp
@msnvvvp Жыл бұрын
Великолепный урок 👍 Просто, понятно, нужно 👍
@seoonlyRU
@seoonlyRU Жыл бұрын
лайк вам от вебмастера и гуру по сео и сайтам - СЕООНЛИ
@theangelicaustinova
@theangelicaustinova Жыл бұрын
Хотим мобильную верстку🔥
@TildaPublishing
@TildaPublishing Жыл бұрын
Спасибо за пожелание!
@sergey-zeleniy
@sergey-zeleniy Жыл бұрын
эпоха мобильных версий, а мы все смотрим как дизайнят на ПК
@user-rn3jy8ff4u
@user-rn3jy8ff4u Жыл бұрын
Аня, чтобы сократить время на изменении масштаба сайта просто зажми ctrl и крути колесико на мышке! )
@QuellFox
@QuellFox 2 ай бұрын
Спасибо
@lexteju3555
@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
@lexteju3555 Жыл бұрын
золотая мысль Ани, что грамотно ориентироваться на тип устройств у ЦА через аналитику посещаемости со статистикой по типам устройств - но такие данные сможет дать далеко не каждый клиент, они достигаются на объёме и на периоде времени, если сайт новый - их попросту нет в наличии, если трафика мало - тоже слабый аргумент.
@AniaMelnik
@AniaMelnik Жыл бұрын
Привет! Спасибо за комментарий) 1. Все три типа не могут комбинироваться в Зеро блоке. Если ты включаешь настройку автоскейл, то работа в виндоу контейнере и процентах исключается. Грид и виндоу в рамках одного Зеро блока миксовать действительно можно, про это так же рассказала в ответе на вопрос про вёрстку мобильной версии) Про комбинацию типов вёрстки на всём сайте наглядно показала удачные примеры, как это может выглядеть) 2. Автоскейл, как и работу с виндоу-контейнером можно назвать резиновой вёрсткой. Другой вопрос, что в нём нет возможности регулировать «резиновость» отдельных элементов. Но во многих проектах такой простой тип резиновой вёрстки смотрится уместно, особенно в художественных и с прогрессивным дизайном. 3. Почему вы подумали, что я «думаю, что users с больших мониторов - не Ц.А.»? Я такого не говорила, а если дизайн не терпит гигантизма, то под такие устройства предложила бы комбинированную верстку автоскейл+виндоу или виндоу+грид, примеры классные на эфире как раз показала) 4. Про косяки в брейкпойнтах между mobile и десктоп нужна более контретная информация) У меня никаких проблем с адаптивами нет, как раз потому что я делаю тесты на разных моделях планшетов и телефонов с разных браузеров, что рекомендую делать всем без исключения) 5. «Вы думаете, что люди, кто купил планшет или ресайзнул окно браузера чуть по ширине - уже не ваша ЦА?)» - не поняла этот комментарий, нужно больше конкретики, потому что я такого утверждения тоже нигде не говорила) Про тестирование на всех устройствах согласна)
@AniaMelnik
@AniaMelnik Жыл бұрын
@@lexteju3555 Да, поэтому если данные есть, супер) Если же их нет, то выбираем максимально безопасный вариант вёрстки, делаем запуск и собираем статистику)
@lexteju3555
@lexteju3555 Жыл бұрын
@@AniaMelnik Привет! 1.) почему нет?) Простой пример: блок 1го экрана, на фоне в window лежит фото (или видос) + shape фильтр и может какие-то элементы по краям (от задачи) - всё это лежит в window, а заголовок + cta кнопка в grid (тут же возможно autoscale) - таким образом все 3 принципа использованы и это прям ок (данный пример самый простой) или как вариант в 1 блоке zero на десктопе нет autoscale, а на мобайле - использую - так можно? - можно) можно по всякому, когда оно работает, не тупит, не багует и даёт необходимый результат) Суть в том, что window располагать чать элементов, фоны, подложки (да всё что нужно) и при этом в гриде располагать другие важные элементы, а autoscale можно отключать на разных вьюпортах - всё в рамках 1 блока. 2.) Согласен) 3-4-5.) Вы приняли на свой счёт слишком - тут мысль не про ваши сайты и МК - с ними как раз всё good) А имелось ввиду, как общий мессендж к комьюнити, тем кто верстает, собирает на тильде. Просто довольно много вижу недочётов на сайтах на тильде в частности - цель коммента была в том, чтобы обратить внимание на проблематику, которая повторяется, возможно, потому что на это мало обращают внимание и порой даже классные сайты содержат грубые недочёты по адаптиву, которые портят впечатление, пользовательский опыт.
@AniaMelnik
@AniaMelnik Жыл бұрын
@@lexteju3555 1) если ты в блоке включаешь функцию автоскейл, то всё, что ты задаёшь в виндоу и процентах, начинает съезжать, потестируй. Автоскейл исключает виндоу. Элементы в этом блоке, которые расположены по виндоу, на разных устройствах будут отображаться по разному, потестируй. Грид тоже будет исключен, потому что включается автоскейл, и твои 12 колонок растягиваются на 100% ширины экрана. То есть в рамках одного блока можно миксовать грид+виндоу либо просто включать автоскейл. 2-3-4-5) оки)) адаптивы очень интересная тема, там много нюансов, которые можно обсудить
@user-ni7zd7cl2v
@user-ni7zd7cl2v Жыл бұрын
конечно. тема мобайл фёрст очень интересует.
@polygraphinya
@polygraphinya 23 күн бұрын
Аня, огромное спасибо за такой подробный разбор! Наконец-то разобралась с этими похожими, но все же разными типами верстки)) Но есть такой вопрос, наверное, очень профанский)) Если в Тильде максимальная ширина картинки 1680 px, но если делать автоскейл или растягивание картинки на всю ширину экрана, то она дико шакалится на 1920 и далее.. как этого избежать? Ваша картинка на фоне в Феномене Пруста кажется не размытой. Как этого добиться, молю, откройте секрет? Аня, или кто-нибудь, скажите, пожалуйста, как растянуть картинку на всю ширину экрана и сохранить ее качество, если она максимально по ширине 1680 px
@eko_slasty4899
@eko_slasty4899 Жыл бұрын
Все волшебно но ждем мобилку!
@TildaPublishing
@TildaPublishing Жыл бұрын
Спасибо, учтем пожелание!
@Putevoii
@Putevoii 4 ай бұрын
😍🥰🥰
@yesaididit329
@yesaididit329 Жыл бұрын
Спасибо большое за отличный мастер-класс. Есть нубский вопрос, пожалуйста: если подключить свой домен к Тильде, то субдомен останется свободным для подключения Wordpress например?
@TildaPublishing
@TildaPublishing Жыл бұрын
Добрый день! Да, субдомен вы сможете подключить к любому другому сайту.
@user-ty2fo8cu3x
@user-ty2fo8cu3x Жыл бұрын
Спасибо большое за эфир)) Появилось понмиание, как можно с помощью видов верстки круто менять дизайн и делать сайт визуально еще красивее и интереснее) Раньше не знала про эти методы, версала просто в гриде. Хотела спросить про содержание проектов на слоте. Под слотом что ты имеешь ввиду? Я хочу выставлять свои работы на награду в тильде, хочу сделать сой сайт - портфолио, но нет финансовой возможности его содержать.
@TildaPublishing
@TildaPublishing Жыл бұрын
Добрый день! Под слотами Анна имела в виду количество проектов на аккаунте. В зависимости от тарифа на аккаунте вы можете иметь от 1, 5, 10 и тд сайтов. Подробнее про тарифы - tilda.cc/ru/pricing/
@yuliaanisakharova
@yuliaanisakharova Жыл бұрын
@@TildaPublishing 10 сайтов? 5 же максимум на тарифе бизнес. Или есть еще какие-то тарифы? А где их можно увидеть?
@sanechek.xyz-
@sanechek.xyz- Жыл бұрын
Аня выглядит как персонаж какой-то из LoL :D
@egorpivko
@egorpivko 11 ай бұрын
Спасибо за МК! Один вопрос, как работать с Window container на мобильной версии?
@TildaPublishing
@TildaPublishing 11 ай бұрын
Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите задачу, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.
@VeraSadko
@VeraSadko 9 ай бұрын
Здравствуйте! При вёрстке с привязкой к windows container, можно ли сделать, чтобы расстояние от края блока до текста и от текста до конца блока всегда было одинаковым. Ширина экрана меняется, текст поднимается или наоборот количество строк увеличивается и расстояние до следующего блока меняется. А как сделать чтобы высота блока тоже была "резиновой" всегда одинаковой, чтобы разные блоки с разным набором текста выглядели аккуратно? Спасибо!
@user-ut5jc2hc7z
@user-ut5jc2hc7z Жыл бұрын
Спасибо! Можно узнать, Аня, какой у Вас телеграмм канал?
@TildaPublishing
@TildaPublishing Жыл бұрын
Здравствуйте! Вы можете посмотреть ссылки на другие соц.сети в Инстаграм Ани Мельник: instagram.com/ania._.melnik
@TanyaT8923
@TanyaT8923 Жыл бұрын
14:23 в процентах от левого края отступ задайте в вашем случае это примерно 80%
@TyttuFrytu
@TyttuFrytu Жыл бұрын
Ребят, подскажите пожалуйста - сколько приблизительно нужно осваивать Тильду, чтобы была возможность хотя бы немного подработать на фрилансе?
@AniaMelnik
@AniaMelnik Жыл бұрын
У меня ребята с нуля начинают после 5 недель брать заказы, за 5 недель тильду можно освоить виртуозно
@TyttuFrytu
@TyttuFrytu Жыл бұрын
@@AniaMelnik спасибо за инфу)
@user-vk6yp4wd6s
@user-vk6yp4wd6s 8 ай бұрын
Здравствуйте .Извините что немного не по теме. Подскажите, пожалуйста можно ли с indesign перенести в тильду макет?
@TildaPublishing
@TildaPublishing 8 ай бұрын
Здравствуйте! На данный момент прямая интеграция есть только с Figma.
@user-vk6yp4wd6s
@user-vk6yp4wd6s 8 ай бұрын
Анна , а Вы не затрагивали эту тему в своих видео? Хотелось бы посмотреть про это. @@TildaPublishing
@vam_svetlo
@vam_svetlo Жыл бұрын
Мобилки, молю
@ajkpro368
@ajkpro368 3 ай бұрын
Хотим адаптивную верстку под мобилы!
@user-mo5ib4cg2o
@user-mo5ib4cg2o Жыл бұрын
друзья,подскажите пожалуйста,как делать выпадающее меню в зеро блоке
@TildaPublishing
@TildaPublishing Жыл бұрын
Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc В обращении подробно опишите задачу, это поможет дать максимально точный ответ.
@R_EA
@R_EA Жыл бұрын
Интересна верстка для мобильных устройств
@TildaPublishing
@TildaPublishing Жыл бұрын
Спасибо!Отметили пожелание!
@userdimasik
@userdimasik Жыл бұрын
все ждём мобилки
@rasvud3014
@rasvud3014 Жыл бұрын
автоскейл не работает(( сделал все как показано тут, но все элементы остаются прежнего размера и не вмещаются в окно
@TildaPublishing
@TildaPublishing Жыл бұрын
Здравствуйте! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
@Lyubov-gl4lx
@Lyubov-gl4lx Жыл бұрын
КАКОЙ у Вас опыт работы?
@TildaPublishing
@TildaPublishing Жыл бұрын
Добрый день! Вы можете написать этот вопрос Анне в социальных сетях, контакт указан в описании к видео.
@MegaDestrok
@MegaDestrok Жыл бұрын
Короче верстка в процентах это колдунство с бубном :D
@AniaMelnik
@AniaMelnik Жыл бұрын
Достаточно один раз разобраться с процентами в зеро блоке, и мир никогда не будет прежним)
@mikhailfilippov3715
@mikhailfilippov3715 9 ай бұрын
То чувство когда потратил на ПК версию 14 часов, а на адаптацию на мобильных устройствах два дня😂
@IgorBobyrev
@IgorBobyrev 3 ай бұрын
Кто это там сказал что "верстка должна одинаково выглядеть на всех устройствах"? Как она может одинаково выглядеть на мобилке портретной и на wide-дисплее? Как раз наоборот: верстка должна не одинаково а АДЕКВАТНО выглядеть на разных типах устройств
@user-em4wq6if3l
@user-em4wq6if3l Жыл бұрын
Ни фига себе ленивый дизайнер, хотела бы я таким ленивцем быть)
@user-bl8db2tu3j
@user-bl8db2tu3j Жыл бұрын
Не доверяю дизайнерам, которые смотрят в 1.5 глаза))
Пошаговая анимация в Tilda Publishing
11:45
Tilda Publishing
Рет қаралды 151 М.
ФИШКИ ZERO BLOCK конструктора TILDA
25:41
Макс Куратов
Рет қаралды 59 М.
The day of the sea 🌊 🤣❤️ #demariki
00:22
Demariki
Рет қаралды 27 МЛН
Шокирующая Речь Выпускника 😳📽️@CarrolltonTexas
00:43
Глеб Рандалайнен
Рет қаралды 11 МЛН
Stupid Barry Find Mellstroy in Escape From Prison Challenge
00:29
Garri Creative
Рет қаралды 7 МЛН
Её Старший Брат Настоящий Джентельмен ❤️
00:18
Глеб Рандалайнен
Рет қаралды 7 МЛН
Новый способ резиновой верстки в Tilda
13:05
Max Shirko / Design Inspiration
Рет қаралды 25 М.
Дизайн-Игра: Второй Урок - Анимация пути
30:16
Лидия Лоткина
Рет қаралды 108
The day of the sea 🌊 🤣❤️ #demariki
00:22
Demariki
Рет қаралды 27 МЛН