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

Поделиться
HTML-код
  • Опубликовано: 31 дек 2024

Комментарии •

  • @Dmitry_Poglazov
    @Dmitry_Poglazov 2 дня назад

    Проверка в виде изменения %% никто не показывал, это очень крутая фишка, спасибо

  • @olgakotova8943
    @olgakotova8943 Год назад +2

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

  • @Юлька-й9ь
    @Юлька-й9ь Год назад

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

  • @Nsdimon
    @Nsdimon Год назад

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

  • @ТатьянаХоружева
    @ТатьянаХоружева 2 года назад +3

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

  • @Nadi_Tich
    @Nadi_Tich 5 месяцев назад

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

  • @SvetlanaMysenkova
    @SvetlanaMysenkova 2 года назад +1

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

  • @Marina-Isaeva-web
    @Marina-Isaeva-web Год назад +1

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

  • @ПавелНиян
    @ПавелНиян Год назад +1

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

  • @Anneta75
    @Anneta75 2 года назад +3

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

    • @TildaPublishing
      @TildaPublishing  2 года назад

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

  • @plumebum2512
    @plumebum2512 Год назад

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

  • @Vika-lb3cq
    @Vika-lb3cq 2 года назад +1

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

  • @katyarubina
    @katyarubina 2 года назад

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

  • @svetlanaleontyeva
    @svetlanaleontyeva 2 года назад +1

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

    • @TildaPublishing
      @TildaPublishing  2 года назад

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

  • @lexteju3555
    @lexteju3555 2 года назад +5

    Анна, спасибо за МК - супер полезность! Тильда - спасибо за ваш продукт!💫
    Кое-что дополню от себя, а где-то акцентирую) Не пойму разделения на "типы вёрстки" в 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

      Привет! Спасибо за комментарий)
      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) оки)) адаптивы очень интересная тема, там много нюансов, которые можно обсудить

  • @VPUPOK_publico
    @VPUPOK_publico Год назад

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

  • @seoonlyRU
    @seoonlyRU 2 года назад +1

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

  • @ТониСтарк-у5в
    @ТониСтарк-у5в 2 года назад

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

  • @TanyaT8923
    @TanyaT8923 2 года назад

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

  • @msnvvvp
    @msnvvvp 2 года назад +1

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

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

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

  • @tarashkev1ch_nadya
    @tarashkev1ch_nadya 2 года назад +1

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

  • @QuellFox
    @QuellFox 9 месяцев назад

    Спасибо

  • @ОлегКобызев-е9в
    @ОлегКобызев-е9в Год назад +3

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

  • @polygraphinya
    @polygraphinya 7 месяцев назад

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

  • @сонясонная-я1ш
    @сонясонная-я1ш 6 месяцев назад

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

  • @eko_slasty4899
    @eko_slasty4899 Год назад +2

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

  • @bur3vestnik
    @bur3vestnik 11 месяцев назад +1

    😍🥰🥰

  • @egorpivko
    @egorpivko Год назад

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

    • @TildaPublishing
      @TildaPublishing  Год назад

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

  • @theangelicaustinova
    @theangelicaustinova 2 года назад +8

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

    • @TildaPublishing
      @TildaPublishing  2 года назад

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

    • @sergey-zeleniy
      @sergey-zeleniy 2 года назад +2

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

  • @VeraSadko
    @VeraSadko Год назад

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

  • @SvetlodarArtav
    @SvetlodarArtav Год назад

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

    • @TildaPublishing
      @TildaPublishing  Год назад

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

    • @SvetlodarArtav
      @SvetlodarArtav Год назад

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

  • @yesaididit329
    @yesaididit329 2 года назад

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

    • @TildaPublishing
      @TildaPublishing  2 года назад

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

  • @TyttuFrytu
    @TyttuFrytu 2 года назад

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

    • @AniaMelnik
      @AniaMelnik 2 года назад +1

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

    • @TyttuFrytu
      @TyttuFrytu 2 года назад

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

  • @sanechek.xyz-
    @sanechek.xyz- 2 года назад +1

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

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

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

    • @TildaPublishing
      @TildaPublishing  2 года назад

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

    • @yuliaanisakharova
      @yuliaanisakharova Год назад

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

  • @НатальяЩеколкина
    @НатальяЩеколкина 2 года назад

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

    • @TildaPublishing
      @TildaPublishing  2 года назад

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

  • @R_EA
    @R_EA 2 года назад +1

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

    • @TildaPublishing
      @TildaPublishing  2 года назад

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

  • @rasvud3014
    @rasvud3014 Год назад

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

    • @TildaPublishing
      @TildaPublishing  Год назад

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

  • @ajkpro368
    @ajkpro368 9 месяцев назад

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

  • @ДубасДаниил
    @ДубасДаниил 2 года назад

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

    • @TildaPublishing
      @TildaPublishing  2 года назад

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

  • @vam_svetlo
    @vam_svetlo 2 года назад +1

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

  • @Lyubov-gl4lx
    @Lyubov-gl4lx Год назад

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

    • @TildaPublishing
      @TildaPublishing  Год назад

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

  • @IgorBobyrev
    @IgorBobyrev 10 месяцев назад

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

  • @userdimasik
    @userdimasik 2 года назад +2

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

  • @mikhailfilippov3715
    @mikhailfilippov3715 Год назад

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

  • @MegaDestrok
    @MegaDestrok 2 года назад

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

    • @AniaMelnik
      @AniaMelnik 2 года назад +1

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

  • @Наталья-у2и2х
    @Наталья-у2и2х Год назад

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

  • @АндрейК-и6ф
    @АндрейК-и6ф 2 года назад

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

  • @alinasyro672
    @alinasyro672 6 месяцев назад

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