Тонкости адаптивной верстки на Тильде: мастер-класс
Рет қаралды 88,575
Күн бұрынТильда позволяет создавать сайты, которые выглядят эффектно и аккуратно на любом экране. Как использовать возможности стандартных блоков и функции Zero Block для адаптивной вёрстки - расскажет Максим Ширко.
👉 Вебинар по мобильной анимации в Zero Block: • Мобильная анимация в Z...
✨ Ближайшие вебинары: webinars.tilda.cc
👉 Создать сайт на Tilda: tilda.cc/ru
◾ Школа Тильды: tilda.school
🤩 Онлайн-журнал для дизайнеров, маркетологов и предпринимателей Tilda Education: tilda.education
00:00:00 - Введение
00:03:26 - Как работает сетка базовых блоков?
00:09:12 - Ошибки при работе с высотой блока
00:12:46 - Частая ошибка с блоком меню
00:15:13 - Не делайте все блоки на весь экран
00:16:52 - Как работает контейнер экрана?
00:22:21 - Ответы на вопросы
00:28:09 - Как работает Grid контейнер?
00:41:54 - Как работает Window контейнер?
00:51:27 - Ответы на вопросы
00:55:21 - Синтез Zero Block и базового блока
00:57:37 - Ответы на вопросы
00:59:23 - Особенности мобильной верстки
01:08:48 - Ответы на вопросы
Подписывайтесь на нас в соцсетях:
◾ Telegram: t.me/tildanews
◾ VK: tildapublishing
◾ Instagram: / tildapublishing
Оставить отзыв о работе на платформе Tilda: tilda.cc/ru/otzyvy
* Компания Meta Platforms Inc., владеющая социальными сетями Facebook и Instagram, по решению суда от 21.03.2022 признана экстремистской организацией, ее деятельность на территории России запрещена.
Теги: дизайн, Zero Block, нулевой блок, анимация, пошаговая анимация
@nekipeloff4755 3 жыл бұрын
Есть ощущение, что Макс - это лучшая рекламная копмания в истории человечества
@user-rj9er5mw2v 3 жыл бұрын
100%
@dinarsuleyman5581 4 жыл бұрын
чувак какой ты крутой!!! всё понятно! вот бы во всех универах так преподы обьясняли
@user-kw7no8oy3h 4 жыл бұрын
смотрю в записи, кайф спикер, спасибо очень много полезной инфы! ещё раз спасибо.
@user-wc3dl1eu6u 3 жыл бұрын
Было бы неплохо посмотреть видео, где Макс объясняет, как стать таким крутым учителем/спикером :)
@skripach.irkutsk.pezhemskiy Жыл бұрын
Доходчиво объясняет, все понятно, без сумбура и без воды, Лайк!!!
@MargaritaLunae 4 жыл бұрын
Спасибо, хороший вебинар, как всегда! Было бы здорово послушать отдельный вебинар про мобильные версии
@live-ff6pt 2 жыл бұрын
Максим, благодарю за ценный вебинар.
@nikitasvet7483 2 жыл бұрын
Спасибо, добрый человек! Открыл глаза на многие штуки! Респект! Полезный видос! 💪
@aleksandraab 3 жыл бұрын
Спасибо, теперь у меня две полезные фишечки в использовании (отступы в мобильной версии и сетка для стандартных блоков). Благодарю за полезный контент )
@Elenele-1 6 ай бұрын
Большое спасибо! Очень полезный ролик и все понятно объяснили 👍🏼
@sergeyprostobean4521 3 жыл бұрын
Как всегда - только годный и полезный контент от гуру Тильды:) Спасибо от души. Макс объясняет и вдохновляет. Сегодня буду делать адаптив своей учебной страницы, которую сделал с нуля в Зеро и до конца. не хватает адаптивов:)
@katelazareva6299 2 жыл бұрын
Отличный мастер-класс!
@Nsdimon 4 жыл бұрын
Макс ты как всегда THE BEST ! ⭐️⭐️⭐️⭐️⭐️
@tatianakazakova4724 3 жыл бұрын
Просто супер! Действительно профи
@MAX_ShapeD Жыл бұрын
как всегда все очень понятно, полностью согласен с автором коммента ниже Макс -- крут! Спасибо тебе огромное, что ты есть у нас)))
@user-wl8dd3ky6m 2 жыл бұрын
Спасибо большое за это видео 👍👍👍
@rambek9945 4 жыл бұрын
Как всегда доступно,👍
@advokat.xaecki 4 жыл бұрын
Огонь. Спасибо!
@Adelina_88 Жыл бұрын
как много ответов на мои вопросы!! спасибо огромное!!
@TildaPublishing Жыл бұрын
Спасибо!
@user-un2zq1uz4b 4 жыл бұрын
спасибо огромное!
@svetlanazenkovich2704 3 жыл бұрын
большое спасибо! очень полезно, особенно про мобильную версию:)
@webwin.agency 2 жыл бұрын
я тоже вас слушаю и делаю адаптив)
@user-nt9fu9jr5e 3 ай бұрын
благодарю!!!
@vottuda Жыл бұрын
1:04:39 - очень важное замечание, что все изменения наследуются только в напрпавлении от десктопа к мобилке, а наоборот - не наследуются. То есть редактировать размеры элементов надо по порядку по каждому брейкпоинту. Если же после декстопа начать редактировать мобилку, а уже потом перейти на таблет, то при редактировании таблета в мобилке некоторые параметры поедут.
@Aleksandr_Antsiferov Жыл бұрын
Только что проверил - сбивается текстовая верстка. Делал в порядке справа налево (от декстопа к мобилке), и пока дошёл до мобилы, на декстопе и планшетах уже всё поехало. Почему так?
@user-dg9lk3gi3s 6 ай бұрын
такая же проблема, вы нашли ответ?)@@Aleksandr_Antsiferov
@Aleksandr_Antsiferov 6 ай бұрын
@@user-dg9lk3gi3s да. Там изменения наследуются справа налево (то есть начинать от десктопной и идти к мобильной) + На тех экранах, где нужно вводить изменения в текстовые слоя, поступайте вот так: - на новом экране делайте копию текстового слоя - копию оставляйте и редактируйте как вам нужно (она не повлияет на старшие экраны) - а оригинальный слой отодвиньте как можно дальше левее (на ширину нескольких экранов), он не будет попадать в зону показа. Так у вас на несколько экранов получится 2-3 текстовых слоя для одного и того же текста
@user-yr6iz1vd7b 2 ай бұрын
@@Aleksandr_Antsiferovспасибо огромное!) намучилась с адаптивом текстовых блоков
@Aleksandr_Antsiferov 2 ай бұрын
@@user-yr6iz1vd7b попробуйте создавать новые отдельные текстовые блоки на каждом экране, на котором приходится сдвигать строки А старые отодвигать далеко в сторону, не удаляя и не скрывая их (тогда они не пропадут на других экранах)
@Skyabas 3 жыл бұрын
спасибо
@maxim4eck777 3 жыл бұрын
Когда хочется во всю ширину и на разных разрешках, я понял что проще использовать кастомный CSS код где указываем какие блоки при каком разрешении окна показываем. И делаем копии блоков под 1360,1920,4к и компонуем внешний вид каждого. Да это геморно поддерживать, но если хочется чтобы выглядело как адаптивный сайт с полной шириной другого способа не вижу.
@gameovers2569 4 жыл бұрын
Привет, подскажи пожалуйста как совмещать шрифты из зеро блока и стандартного блока. Как понять какой шрифт будет в стандартном блоке в мобильной версии, чтобы указать такой же в зеро блоке?
@sunstudio3827 4 жыл бұрын
Не очень понятный вопрос на самом деле. Вообще непонятный!
@TildaPublishing 4 жыл бұрын
Здравствуйте, Вячеслав Посмотрите, пожалуйста, информацию про шрифты для сайта на Тильде на странице help-ru.tilda.ws/fonts Если вы задаёте шрифт в настройках проекта, то он будет применяться для всех страниц и ко всем блокам.
@maxphts 3 жыл бұрын
На бордах для разных разрешений в зеро блоке можно выставлять разный размер шрифта. Как я понял, про это вопрос. Тоже интересует.
@user-mx8nb4qg9r 2 жыл бұрын
спасибо !!!!!
@user-qz3cf7tv7w 3 жыл бұрын
Всем привет, кто нибудь знает как уменьшить под мобильную версию стандартную форму заявок в zero block?
@masterplus720 2 жыл бұрын
Народ подскажите почему видео которое залито на Ютуб и используется как фоновое - оно тормозит , в начале оно в кубиках ( не четкое ) потом становится лучше - какое решение сделать что бы не тормозило
@ii-yj5qj 2 жыл бұрын
привет подскажи пож-ста насколько реально сверстать сайт на тильде где есть слайдеры поп апы всякие аккордеоны параллаксы, табы и так далее. Свои стили в тильде можно переписывать?
@TildaPublishing 2 жыл бұрын
Здравствуйте! Для всего перечисленного вами в Тильде есть нужные блоки и настройки, но при желании вы можете использовать сторонний код.
@ii-yj5qj 2 жыл бұрын
@@TildaPublishing спасибо за ответ!
@redwood6806 2 жыл бұрын
Помогите пожалуйста: как настроить отступы между блоками в мобильной версии сайта - они сделаны в Zero-block? Есть ли такая возможность? Спасибо
@TildaPublishing 2 жыл бұрын
Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc В обращении опишите задачу, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.
@Adelina_88 Жыл бұрын
Подскажите пожалуйста. когда я работаю в зеро блоке, делаю дизайн на десктопной версии, потом в адаптации все элементы в одной куче. как нужно изначально располагать контент, что бы потом в адаптиве он не был в куче? и если ты уже сделал десктопную версию, и в ней у тебя все элементы на позиции left+top, а потом заходишь в адаптивы, а у тебя там вся каша в одной куче, можно ли это быстро исправить, или только в ручную все растягивать?
@TildaPublishing Жыл бұрын
Здравствуйте! В каждой адаптивной версии расположение элементов возможно изменить лишь вручную.
@Adelina_88 Жыл бұрын
@@TildaPublishing я просто как то делала, потом заходила в адаптивы, и там всё элементы не были в куче, просто не знаю как я так работала в десктопе, что у меня в адаптивах всё нормально получилось, а сейчас не могу, всё уже перепробывала, а в адаптиве всё равно всё в куче(((
@TildaPublishing Жыл бұрын
Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
@larapuk6582 3 жыл бұрын
Можно ли где-то включить залипание к сетке в Зеро блоках?
@TildaPublishing 3 жыл бұрын
К сожалению, такого готового решения нет на данный момент
@user-lv3yq2gw1c 3 жыл бұрын
Здравствуйте, подскажите пожалуйста, что делать. Столкнулась с такой проблемой, в дескотопе, за контейнером редактирования поместила другие версии картинок, текста и тд для мобильной версии и их видно на большом экране, но нужно, чтобы блок накладывался на следующий. Пробовала их убирать по бокам, но тоже не спасло(
@TildaPublishing 3 жыл бұрын
Здравствуйте, Алина К сожалению, не уверены, что правильно понимаем проблему Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets, или написав на почту support@tilda.cc В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
@norfinukraine2450 2 жыл бұрын
Добрый день, подскажите что делать, товар находиться в двух категориях к примеру зимняя и летняя обувь, например я зашел в карточку товара из категории зимняя но когда выхожу из нее попадаю в летнюю как это исправить ?
@TildaPublishing 2 жыл бұрын
Здравствуйте Необходимо рассмотреть ситуацию подробнее Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc В обращении опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ
@user-qx6gs8fz1u 4 жыл бұрын
Здравствуйте, подскажите пожалуйста. Я создаю сайт из стандартных блоков и собираюсь размещать в Инстаграмм ( мобильная версия) , но так же хочу, чтобы человек мог легко открыть с компьютера и сайт работал и в десктопной версии, как мне это сделать?
@TildaPublishing 4 жыл бұрын
Здравствуйте, Ирина Если вы создаёте из стандартных блоков, то вам стоит обратить внимание только на блоки с полноэкранными фоновыми изображениями, если они есть на вашем сайте. Рекомендуем посмотреть информацию на страницах: help-ru.tilda.ws/mobile-version help-ru.tilda.ws/photo-for-publishing Все стандартные блоки адаптируются автоматически. Внимания могут потребовать только изображения. Если возникнут трудности, то просим обращаться на team@tilda.cc.
@user-qx6gs8fz1u 4 жыл бұрын
@@TildaPublishingСпасибо большое)
@user-bj5lb7kf1c 3 жыл бұрын
Изучаете, как минимум html5 + CSS и делаете все, что душе угодно, без подобных конструкторов.
@pavelbukanyov8177 4 жыл бұрын
Не пропагандист. Скорее, - популяризатор.
@indexzet 3 жыл бұрын
Боже насколько проще все таки сделать резиновую вёрстку в readymag.
@kristushca28 4 жыл бұрын
У меня такой вопрос, может кто знает ответ? Кто знает, как исправить такую ситуацию, когда делаешь адаптив под мобилку на андроиде и на айфоне очень все отличается и все это так же отличается от того, как ты на компе делаешь адаптив, то есть на компе адаптив и на разных операционных системах телефонах выглядит все по разному! Сделала адаптив, смотрю на айфоне выглядит вот так, смотрю на андроиде выглядит по другому, бесит (((
@TildaPublishing 4 жыл бұрын
Необходимо рассмотреть ситуацию более подробно. Напишите, пожалуйста, на team@tilda.cc или через виджет в правом нижнем углу личного кабинета Tilda В обращении укажите: Опишите ситуацию Ссылку на опубликованную страницу сайта Полноэкранные скриншоты с айфона и андроида - как вы видите проблему
@trenddecor19 Жыл бұрын
Здравствуйте, Вы разобрались?
@leveremin108 3 жыл бұрын
Где искать клиентов?
@TildaPublishing 3 жыл бұрын
Рекомендуем посмотреть запись вебинара на эту тему - kzfaq.info/get/bejne/hcqiodmCu8--qIk.html
@YuliyaGerts1 2 жыл бұрын
Добрый день,подскажите если в домине ошибка в одной букве фамилии как исправить ?
@TildaPublishing 2 жыл бұрын
Здравствуйте, Юлия Если правильно вас понимаем, при регистрации домена через Тильду неверно указали фамилию, верно? Если да, то необходимо обратиться Reg.ru. Данный сервис является доменным провайдером для данной услуги. Если возникнут дополнительные вопросы или трудности, создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc
@an4ernova Жыл бұрын
Добрый день. Подскажите, в чем может быть проблема : Между зеро блоками белая полоса в мобильной версии видна. Как исправить?
@TildaPublishing Жыл бұрын
Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
@nazarznak7645 3 жыл бұрын
Здравствуйте , столкнулся с проблемой на тильде при адаптации сайта под мобильные устройства в горизонтальном виде. После сделанных необходимых действий и их сохранения , заходя на сайт с мобильного устройства он отображается некорректно. С чем это может быть связано?
@TildaPublishing 3 жыл бұрын
Необходимо рассмотреть проблему подробнее. Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc В обращении опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
@nazarznak7645 3 жыл бұрын
@@TildaPublishing Написал на почту , уже несколько дней жду ответа.
@TildaPublishing 3 жыл бұрын
Подскажите, пожалуйста, часть вашего email'а до символа @, чтобы мы проверили входящие
@nazarznak7645 3 жыл бұрын
@@TildaPublishing nazarznak686
@TildaPublishing 3 жыл бұрын
К сожалению, на почте не удается найти входящие по этим данным. Создайте, пожалуйста, новое обращение с темой «из комментариев KZfaq» tilda.cc/tickets/. Передадим в службу поддержки, чтобы помогли как можно скорее Благодарим вас за терпение и понимание
@olegpochtar5456 3 жыл бұрын
Стандартные и зеро блоки как-то по разному отражаются на мобилках в плане ширины блока. Невозможно одно подогнать под другое.
@TildaPublishing 3 жыл бұрын
Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets, или написав на почту support@tilda.cc В обращении подробно опишите задачу/ проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/ проблему и дать максимально точный ответ.
@Sbg1925 2 жыл бұрын
Олег, тоже столкнулся такой проблемой. Когда в сайте используется Зероблок вместе со стандартными и в мобилки разные отступы слева. Решилось вот так - в мобилке у элемента выставляется контейнер на Виндоу и в строке с Х выставьте 18 пикселей. Мне это помогло сейчас сравнять отступы
@dmitrypakseev7789 4 жыл бұрын
Подскажите, пожалуйста, как решить проблему с дёргающимся фоном? kzfaq.info/get/bejne/iql-iMir38zXkWw.html
@TildaPublishing 4 жыл бұрын
Здравствуйте, Дмитрий Необходимо рассмотреть ситуацию более подробно. Напишите, пожалуйста, на team@tilda.cc или через виджет в правом нижнем углу личного кабинета Tilda В обращении укажите: Опишите ситуацию Ссылку на опубликованную страницу сайта
@dmitrypakseev7789 4 жыл бұрын
@@TildaPublishing Да, спасибо!
@flightperrita 3 жыл бұрын
Начала только смотреть! Надеюсь на вашу помощь тк ну никак адаптация не поддается мне!
@TildaPublishing 3 жыл бұрын
Если появятся вопросы, наша служба поддержки всегда рада помочь. Создать обращение можно на странице tilda.cc/tickets/ Чтобы поддержка смогла дать максимально точный ответ, опишите подробно вашу задачу/ проблему Укажите ссылку на страницу сайта и полноэкранные скриншоты, если они смогут помочь понять обращение
@flightperrita 3 жыл бұрын
@@TildaPublishing Спасибо. На зиро блоке было сложно. Но оказалось параметры выставлены не правильно вместе ex.100 было 100 и оставались огромные поля, что сложно поддавалось редактировать.
@TildaPublishing 3 жыл бұрын
Главное, что удалось разобраться! Если появятся вопросы, всегда рады
@_Al_Kuznec 3 жыл бұрын
Совершенно не удобно, что нет просто кнопки включения сетки, хотя это было бы правильное решение(( Ели есть страница и её надо проверить, то совершенно не во всех блоках есть включение сетки(( Оч.неудобно(( Часто приходится переносить работу на след.день доделывать и сетки уже нет, если она и была включена((
@donbotdonbot2522 2 жыл бұрын
Он сказал , что более 3000 студентов, только у него которые работают на заказ....а еще минимум 100 различных обучающих курсов(хотя мне кажется их под 1000 )..... и все хотят работать .... столько нету заказов...... помоем уже веб дизайн переполнен.......????????????
@TildaPublishing 2 жыл бұрын
Конкуренция однозначно растет. К сожалению, не можем ответить на данный вопрос, исследований не проводили. Но стоит учитывать характер заказов. В большей степени это промо-материалы + материалы, требующие сопровождения. Это позволяет сделать рынок веб-дизайна более «резиновым».
@yuliyayugoncharova7047 3 жыл бұрын
Неприятно было смотреть, как классный парень, рассказывая про классный инструмент отвечает на вопросы в формате "Тильда - подарок судьбы, а ты -дурак" 🤦♀️ Тильда - инструмент с ОЧЕНЬ ограниченным набором возможностей. От этого он не становится плохим, просто не нужно оправдывать его естественные ограничения, связанные с простотой и скоростью освоения, "проблемами" самих дизайнеров. В Тильде невозможно сделать пиксель перфект хотя бы потому, что нет возможности задать правила для компоненты (и компоненты как таковые отсутствуют). Банально, но нельзя задать Zero-блоку высоту, подстраивающуюся под высоту контента (что особенно важно при верстке мобильных разрешений). И нельзя задать элементу привязку к расположению другого элемента (только к "гриду" или "окну"). Именно отсюда возникают все эти "нахлесты" или "пустоты" между элементами, привязанными по window-контейнеру. Для адаптивной верстки просто недостаточно правил. В итоге половина дизайн-решений, которые начинающий верстальщик мог бы реализовать, при дизайне под Тильду просто нужно забыть. В ограничениях порой рождаются наилучшие решения =) но давно есть конструкторы, которые позволяют переносит дизайн в подходящие под него компоненты и сделать по-настоящему адаптивный дизайн. Просто Тильда преследует другие задачи и хороша для них.
@samyetism3492 2 жыл бұрын
а где можно? редимаг? вебфло?
@serhioramires3166 2 жыл бұрын
Для 2022 года урок устарел. Настройки поменялись местами в Интерфейсе. Треп идет по пониманию дизайна а не как в Тильде работать. До половины роллика не смог досмотреть. Много того что мне не нужно.
@JamesBond-jf4ni 2 жыл бұрын
кто хочет делать гавно сайты то вот вам тильда в подарок. а нормальные сайты делают в ручную версталами! или гоу в веб флоу, елементор и подобные там все для людей сдлано никто наезжать друг на друга не будет все будет работать так как положено. тильде об этом даже не мечтать
@JamesBond-jf4ni 2 жыл бұрын
блин думал что то дельное будет в видосе а тут как обычно хрень которую не разобрать бал бла бла и все
@user-rq3vi4oe7b 2 жыл бұрын
Видео не о чем, болтает много
Bon Bon Media
Рет қаралды 12 МЛН
Дмитрий Варфоломеев
Рет қаралды 5 М.
Study Kvo. Обучение веб-дизайну и UX UI
Рет қаралды 65 М.
Bon Bon Media
Рет қаралды 12 МЛН