Тонкости адаптивной верстки на Тильде: мастер-класс
HTML-код
- Опубликовано: 26 июл 2024
- Тильда позволяет создавать сайты, которые выглядят эффектно и аккуратно на любом экране. Как использовать возможности стандартных блоков и функции 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, нулевой блок, анимация, пошаговая анимация
Есть ощущение, что Макс - это лучшая рекламная копмания в истории человечества
100%
чувак какой ты крутой!!! всё понятно! вот бы во всех универах так преподы обьясняли
смотрю в записи, кайф спикер, спасибо очень много полезной инфы! ещё раз спасибо.
Было бы неплохо посмотреть видео, где Макс объясняет, как стать таким крутым учителем/спикером :)
Спасибо, хороший вебинар, как всегда! Было бы здорово послушать отдельный вебинар про мобильные версии
Максим, благодарю за ценный вебинар.
Доходчиво объясняет, все понятно, без сумбура и без воды, Лайк!!!
Спасибо, добрый человек! Открыл глаза на многие штуки! Респект! Полезный видос! 💪
Спасибо, теперь у меня две полезные фишечки в использовании (отступы в мобильной версии и сетка для стандартных блоков). Благодарю за полезный контент )
Как всегда - только годный и полезный контент от гуру Тильды:)
Спасибо от души. Макс объясняет и вдохновляет.
Сегодня буду делать адаптив своей учебной страницы,
которую сделал с нуля в Зеро и до конца.
не хватает адаптивов:)
Макс ты как всегда THE BEST ! ⭐️⭐️⭐️⭐️⭐️
Отличный мастер-класс!
Просто супер! Действительно профи
Как всегда доступно,👍
Спасибо большое за это видео 👍👍👍
Большое спасибо! Очень полезный ролик и все понятно объяснили 👍🏼
Огонь. Спасибо!
как много ответов на мои вопросы!! спасибо огромное!!
Спасибо!
как всегда все очень понятно, полностью согласен с автором коммента ниже
Макс -- крут!
Спасибо тебе огромное, что ты есть у нас)))
спасибо огромное!
большое спасибо! очень полезно, особенно про мобильную версию:)
я тоже вас слушаю и делаю адаптив)
1:04:39 - очень важное замечание, что все изменения наследуются только в напрпавлении от десктопа к мобилке, а наоборот - не наследуются. То есть редактировать размеры элементов надо по порядку по каждому брейкпоинту. Если же после декстопа начать редактировать мобилку, а уже потом перейти на таблет, то при редактировании таблета в мобилке некоторые параметры поедут.
Только что проверил - сбивается текстовая верстка. Делал в порядке справа налево (от декстопа к мобилке), и пока дошёл до мобилы, на декстопе и планшетах уже всё поехало. Почему так?
такая же проблема, вы нашли ответ?)@@Aleksandr_Antsiferov
@@user-dg9lk3gi3s да. Там изменения наследуются справа налево (то есть начинать от десктопной и идти к мобильной)
+ На тех экранах, где нужно вводить изменения в текстовые слоя, поступайте вот так:
- на новом экране делайте копию текстового слоя
- копию оставляйте и редактируйте как вам нужно (она не повлияет на старшие экраны)
- а оригинальный слой отодвиньте как можно дальше левее (на ширину нескольких экранов), он не будет попадать в зону показа.
Так у вас на несколько экранов получится 2-3 текстовых слоя для одного и того же текста
@@Aleksandr_Antsiferovспасибо огромное!) намучилась с адаптивом текстовых блоков
@@user-yr6iz1vd7b попробуйте создавать новые отдельные текстовые блоки на каждом экране, на котором приходится сдвигать строки
А старые отодвигать далеко в сторону, не удаляя и не скрывая их (тогда они не пропадут на других экранах)
спасибо
благодарю!!!
спасибо !!!!!
Привет, подскажи пожалуйста как совмещать шрифты из зеро блока и стандартного блока. Как понять какой шрифт будет в стандартном блоке в мобильной версии, чтобы указать такой же в зеро блоке?
Не очень понятный вопрос на самом деле. Вообще непонятный!
Здравствуйте, Вячеслав
Посмотрите, пожалуйста, информацию про шрифты для сайта на Тильде на странице help-ru.tilda.ws/fonts
Если вы задаёте шрифт в настройках проекта, то он будет применяться для всех страниц и ко всем блокам.
На бордах для разных разрешений в зеро блоке можно выставлять разный размер шрифта. Как я понял, про это вопрос. Тоже интересует.
Когда хочется во всю ширину и на разных разрешках, я понял что проще использовать кастомный CSS код где указываем какие блоки при каком разрешении окна показываем. И делаем копии блоков под 1360,1920,4к и компонуем внешний вид каждого. Да это геморно поддерживать, но если хочется чтобы выглядело как адаптивный сайт с полной шириной другого способа не вижу.
привет подскажи пож-ста насколько реально сверстать сайт на тильде где есть слайдеры поп апы всякие аккордеоны параллаксы, табы и так далее. Свои стили в тильде можно переписывать?
Здравствуйте! Для всего перечисленного вами в Тильде есть нужные блоки и настройки, но при желании вы можете использовать сторонний код.
@@TildaPublishing спасибо за ответ!
Всем привет, кто нибудь знает как уменьшить под мобильную версию стандартную форму заявок в zero block?
Боже насколько проще все таки сделать резиновую вёрстку в readymag.
Подскажите пожалуйста. когда я работаю в зеро блоке, делаю дизайн на десктопной версии, потом в адаптации все элементы в одной куче. как нужно изначально располагать контент, что бы потом в адаптиве он не был в куче? и если ты уже сделал десктопную версию, и в ней у тебя все элементы на позиции left+top, а потом заходишь в адаптивы, а у тебя там вся каша в одной куче, можно ли это быстро исправить, или только в ручную все растягивать?
Здравствуйте!
В каждой адаптивной версии расположение элементов возможно изменить лишь вручную.
@@TildaPublishing я просто как то делала, потом заходила в адаптивы, и там всё элементы не были в куче, просто не знаю как я так работала в десктопе, что у меня в адаптивах всё нормально получилось, а сейчас не могу, всё уже перепробывала, а в адаптиве всё равно всё в куче(((
Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc.
В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
Помогите пожалуйста: как настроить отступы между блоками в мобильной версии сайта - они сделаны в Zero-block? Есть ли такая возможность? Спасибо
Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc
В обращении опишите задачу, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.
Здравствуйте, подскажите пожалуйста, что делать. Столкнулась с такой проблемой, в дескотопе, за контейнером редактирования поместила другие версии картинок, текста и тд для мобильной версии и их видно на большом экране, но нужно, чтобы блок накладывался на следующий. Пробовала их убирать по бокам, но тоже не спасло(
Здравствуйте, Алина
К сожалению, не уверены, что правильно понимаем проблему
Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets, или написав на почту support@tilda.cc
В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
Добрый день, подскажите что делать, товар находиться в двух категориях к примеру зимняя и летняя обувь, например я зашел в карточку товара из категории зимняя но когда выхожу из нее попадаю в летнюю как это исправить ?
Здравствуйте
Необходимо рассмотреть ситуацию подробнее
Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc
В обращении опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ
Народ подскажите почему видео которое залито на Ютуб и используется как фоновое - оно тормозит , в начале оно в кубиках ( не четкое ) потом становится лучше - какое решение сделать что бы не тормозило
Добрый день.
Подскажите, в чем может быть проблема : Между зеро блоками белая полоса в мобильной версии видна. Как исправить?
Добрый день!
Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc.
В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
Здравствуйте, подскажите пожалуйста. Я создаю сайт из стандартных блоков и собираюсь размещать в Инстаграмм ( мобильная версия) , но так же хочу, чтобы человек мог легко открыть с компьютера и сайт работал и в десктопной версии, как мне это сделать?
Здравствуйте, Ирина
Если вы создаёте из стандартных блоков, то вам стоит обратить внимание только на блоки с полноэкранными фоновыми изображениями, если они есть на вашем сайте.
Рекомендуем посмотреть информацию на страницах:
help-ru.tilda.ws/mobile-version
help-ru.tilda.ws/photo-for-publishing
Все стандартные блоки адаптируются автоматически. Внимания могут потребовать только изображения.
Если возникнут трудности, то просим обращаться на team@tilda.cc.
@@TildaPublishingСпасибо большое)
Изучаете, как минимум html5 + CSS и делаете все, что душе угодно, без подобных конструкторов.
Можно ли где-то включить залипание к сетке в Зеро блоках?
К сожалению, такого готового решения нет на данный момент
Не пропагандист.
Скорее, - популяризатор.
Добрый день,подскажите если в домине ошибка в одной букве фамилии как исправить ?
Здравствуйте, Юлия
Если правильно вас понимаем, при регистрации домена через Тильду неверно указали фамилию, верно?
Если да, то необходимо обратиться Reg.ru. Данный сервис является доменным провайдером для данной услуги.
Если возникнут дополнительные вопросы или трудности, создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc
Здравствуйте , столкнулся с проблемой на тильде при адаптации сайта под мобильные устройства в горизонтальном виде. После сделанных необходимых действий и их сохранения , заходя на сайт с мобильного устройства он отображается некорректно. С чем это может быть связано?
Необходимо рассмотреть проблему подробнее. Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc
В обращении опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
@@TildaPublishing Написал на почту , уже несколько дней жду ответа.
Подскажите, пожалуйста, часть вашего email'а до символа @, чтобы мы проверили входящие
@@TildaPublishing nazarznak686
К сожалению, на почте не удается найти входящие по этим данным.
Создайте, пожалуйста, новое обращение с темой «из комментариев RUclips» tilda.cc/tickets/. Передадим в службу поддержки, чтобы помогли как можно скорее
Благодарим вас за терпение и понимание
У меня такой вопрос, может кто знает ответ? Кто знает, как исправить такую ситуацию, когда делаешь адаптив под мобилку на андроиде и на айфоне очень все отличается и все это так же отличается от того, как ты на компе делаешь адаптив, то есть на компе адаптив и на разных операционных системах телефонах выглядит все по разному! Сделала адаптив, смотрю на айфоне выглядит вот так, смотрю на андроиде выглядит по другому, бесит (((
Необходимо рассмотреть ситуацию более подробно.
Напишите, пожалуйста, на team@tilda.cc или через виджет в правом нижнем углу личного кабинета Tilda
В обращении укажите:
Опишите ситуацию
Ссылку на опубликованную страницу сайта
Полноэкранные скриншоты с айфона и андроида - как вы видите проблему
Здравствуйте, Вы разобрались?
Где искать клиентов?
Рекомендуем посмотреть запись вебинара на эту тему - ruclips.net/video/OdrnvQViZxU/видео.html
Стандартные и зеро блоки как-то по разному отражаются на мобилках в плане ширины блока. Невозможно одно подогнать под другое.
Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets, или написав на почту support@tilda.cc
В обращении подробно опишите задачу/ проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/ проблему и дать максимально точный ответ.
Олег, тоже столкнулся такой проблемой. Когда в сайте используется Зероблок вместе со стандартными и в мобилки разные отступы слева. Решилось вот так - в мобилке у элемента выставляется контейнер на Виндоу и в строке с Х выставьте 18 пикселей. Мне это помогло сейчас сравнять отступы
Начала только смотреть! Надеюсь на вашу помощь тк ну никак адаптация не поддается мне!
Если появятся вопросы, наша служба поддержки всегда рада помочь.
Создать обращение можно на странице tilda.cc/tickets/
Чтобы поддержка смогла дать максимально точный ответ, опишите подробно вашу задачу/ проблему
Укажите ссылку на страницу сайта и полноэкранные скриншоты, если они смогут помочь понять обращение
@@TildaPublishing Спасибо. На зиро блоке было сложно. Но оказалось параметры выставлены не правильно вместе ex.100 было 100 и оставались огромные поля, что сложно поддавалось редактировать.
Главное, что удалось разобраться!
Если появятся вопросы, всегда рады
Совершенно не удобно, что нет просто кнопки включения сетки, хотя это было бы правильное решение((
Ели есть страница и её надо проверить, то совершенно не во всех блоках есть включение сетки((
Оч.неудобно((
Часто приходится переносить работу на след.день доделывать и сетки уже нет, если она и была включена((
Подскажите, пожалуйста, как решить проблему с дёргающимся фоном?
ruclips.net/video/TCNUezzfsa8/видео.html
Здравствуйте, Дмитрий
Необходимо рассмотреть ситуацию более подробно.
Напишите, пожалуйста, на team@tilda.cc или через виджет в правом нижнем углу личного кабинета Tilda
В обращении укажите:
Опишите ситуацию
Ссылку на опубликованную страницу сайта
@@TildaPublishing
Да, спасибо!
Для 2022 года урок устарел. Настройки поменялись местами в Интерфейсе. Треп идет по пониманию дизайна а не как в Тильде работать. До половины роллика не смог досмотреть. Много того что мне не нужно.
Он сказал , что более 3000 студентов, только у него которые работают на заказ....а еще минимум 100 различных обучающих курсов(хотя мне кажется их под 1000 )..... и все хотят работать .... столько нету заказов...... помоем уже веб дизайн переполнен.......????????????
Конкуренция однозначно растет. К сожалению, не можем ответить на данный вопрос, исследований не проводили. Но стоит учитывать характер заказов. В большей степени это промо-материалы + материалы, требующие сопровождения. Это позволяет сделать рынок веб-дизайна более «резиновым».
Неприятно было смотреть, как классный парень, рассказывая про классный инструмент отвечает на вопросы в формате "Тильда - подарок судьбы, а ты -дурак" 🤦♀️
Тильда - инструмент с ОЧЕНЬ ограниченным набором возможностей. От этого он не становится плохим, просто не нужно оправдывать его естественные ограничения, связанные с простотой и скоростью освоения, "проблемами" самих дизайнеров.
В Тильде невозможно сделать пиксель перфект хотя бы потому, что нет возможности задать правила для компоненты (и компоненты как таковые отсутствуют).
Банально, но нельзя задать Zero-блоку высоту, подстраивающуюся под высоту контента (что особенно важно при верстке мобильных разрешений).
И нельзя задать элементу привязку к расположению другого элемента (только к "гриду" или "окну").
Именно отсюда возникают все эти "нахлесты" или "пустоты" между элементами, привязанными по window-контейнеру.
Для адаптивной верстки просто недостаточно правил.
В итоге половина дизайн-решений, которые начинающий верстальщик мог бы реализовать, при дизайне под Тильду просто нужно забыть.
В ограничениях порой рождаются наилучшие решения =) но давно есть конструкторы, которые позволяют переносит дизайн в подходящие под него компоненты и сделать по-настоящему адаптивный дизайн. Просто Тильда преследует другие задачи и хороша для них.
а где можно? редимаг? вебфло?
блин думал что то дельное будет в видосе а тут как обычно хрень которую не разобрать бал бла бла и все
кто хочет делать гавно сайты то вот вам тильда в подарок. а нормальные сайты делают в ручную версталами! или гоу в веб флоу, елементор и подобные там все для людей сдлано никто наезжать друг на друга не будет все будет работать так как положено. тильде об этом даже не мечтать
Видео не о чем, болтает много