Резиновая верстка сайта на Тильде
Куратор Tilda School Максим Ширко рассказывает, как верстать десктопную версию сайта на Тильде так, чтобы она одинаково хорошо отображалась на любом экране - от небольшого ноутбука до 27-дюймового 4К монитора.
Таймкоды:
00:00 вступление
00:17 как адаптировать контент на всю ширину экрана в стандартных блоках
1:42 ошибки резиновой верстки в стандартных блоках
4:15 как работает выравнивание элементов по grid container
5:09 варианты выравнивания элементов нулевого блока внутри окна
7:16 как работает выравнивание элементов по window container
8:55 как задавать размеры объектов в процентах относительно размера экрана
__________________
👉 Создать сайт на Tilda: tilda.cc/ru
Онлайн-журнал для дизайнеров, маркетологов и предпринимателей Tilda Education: tilda.education
Tilda school: tilda.school
Подписывайтесь на нас в соцсетях:
◾ Instagram: / tildapublishing
◾ Telegram: t.me/tildanews
◾ VK: vk.com/tildapublishing
◾ Facebook: / tildapublishing
Оставить отзыв о работе на платформе Tilda: tilda.cc/ru/otzyvy
Наконец то я стал понимать на 50% лучше про grid/window container и про резину в частности. Хорошо объяснил мужчина..очень хорошо.
Спасибо вам за такую чудесную программу. Как хорошо, что вы есть
Ухх, спасли меня! Два монитора, один HD, второй 2К, и 2К монитор сильно срезал мне картинку на заднем плане, очень помогли, чувствую что надо обязательно все ваши видео на канале посмотреть!!!
Спасибо за проделанную работу
Спасибо) я теперь поняла в каких настройках был косяк, что при верстке делаю одно, а при публикации - другое 😅
Отличный совет с размерами экранов. Буду закупаться в каждой стране гаджетами на все разрешения. Нужно ведь тестить. И да, про терпение очень хороший совет, его необходим целый поезд при верстке на разные экраны. Надеюсь, придет время, когда Тильда приблизится к Redymag по удобству использования. Ребята, желаю вам продуктивности!
спс за науку...как же крута тильда и как много я ещё не знаю..
Спасибо, полезно, наглядно и интересно.
Макс, красавчик! Спасибо за пиксели, которые можно превращать в проценты. Это прекрасно)
Класс, как круто )) Спасиибо огромное!!!))
Также в настройках размеров, значення можно указывать с комбинированными единицами измерения (например 100vh - 100px), может иногда приготдится
Спасибо! Все понятно объяснил)
Макс ты как всегда достоверно объясняешь. Молодец !
Вот это самое нужное!
Только интенсив досмотрел 6-часовой с вами, доволен как слон, переделал полностью два своих проекта за одну ночь, все блоки сделал в зеро, заказчики в шоке, я в шоке, сделал им это бесплатно, так как учился на них. Спасибо вам✌🏼👍🏻
Спасибо вам за приятную обратную связь!
Добрый день. Что за 6-часовой интенсив?
огромное спасибо, очень сильно помог)
Лучший!!!
как я долго искал эту информацию про 550 пикселей
Cool!
Нбать да ты зверюга!! Красота то какая сказка! Вот ето лапиищи!
самый понятный спикер)лайк конечно
Такой вопрос: как адаптировать текст соразмерно экрану при резиновой верстке? Условно если текст 16px на макбуке 13-м, как сделать так, чтобы и на аймаке 27 этот текст был пропорционален остальному контенту так же, как и на макбуке? Явно размер у него будет уже на 16px.. Заранее спасибо за ответ!
Tilda is the best constructor ever! It would be way more comfortable and functional if we had personal accounts in e-stores... well, waiting for the updates:((
Hey, as i know, it has personal accounts for courses or like that, and theres no problem to connect them to e-store. Visit settings of ur website and attitude it!
5:55 stretch это для себя
Было бы очень полезно сказать и показать, что в самом браузере вы можете увидеть как сайт выглядит на других расширениях, просто нажав просмотреть код и выбрав нужное расширение. Это бы намного упростило задачу поиска различных мониторов
Еще использование расширение под хром Window Resizer и ему подобные.
Зашел в комменты, чтобы написать это, а уже все)))
но советуют проверять-таки на телефонах
почему вы не обьясняете как верстать так, чтоб смотрелось и на десктопах нормально и на мобильных устройствах, если делать windows container , то в мобильной версии, идут белые пробелы между блоками, выпустите нормальное видео как правильно верстать в компьютерной версии и в мобильной версии.
узнали как убрать белые пробелы? Потому что на Айфоне 5 и 11 например экран разный, не получается чтото
@@tentasaur2173не пробовали в настройках блоков расстояние проверить и поставить на 0 пикселей (к примеру)? Кажется, что дело в этом. У меня такой проблемы нет
@@ImechkoFamiliya92 Спасибо за ответ, позже проверю
Это действительно самое тяжелое в верстке😫 Ну лично у меня вечно затуп с этим window container
У тебя тоже в редакторе все друг на друга наезжает ? но после публикации во всей красе страницы все на местах. Вот только в редакторе сложно бывает ориентироваться с этой кашей.
Было бы круто, если бы можно было ставить дополнительные размеры экранов на десктопе например добавить full hd версию
Благодарим за обратную связь! Уже передали ваш запрос разработчикам
🎉🎉🎉🎉🎉
Спасибо большое! А как можно с помощью калькулятора рассчитать, как будет выглядить на рпзных экранах ?
Не уверены, что правильно понимаем вопрос Вы можете в режиме онлайн редактировать страницу и проверять отображение на разных экранах, открыв предпросмотр страницы > слева в нижнем углу рядом с кнопкой «вернуться к редактированию», навести на иконку с изображением ноутбука и выбрать один из вариантов ширины экрана. Также можно использовать сторонние инструменты для проверки отображения. В таком случае необходимо будет опубликовать страницу прежде
в хроме есть инструмент разработчика , там можно глянуть как выглядит верстка на других устройствах с разной шириной экрана
Как избежать проблемы, когда верстаешь дизайн, а в итоге на iPhone вся верстка плывет? Но на Андроид устройствах все корректно отображается.
Стоит рассматривать подробнее Обратитесь в нашу службу поддержки, пожалуйста. Создать обращение можно на странице tilda.cc/tickets/ Уточните сразу в обращении в поддержке: Ссылку на страницу сайта Модели устройств, на котором проблема воспроизвелась, и на котором открывается корректно И информацию об устройстве и браузере (получить эту информацию вам поможет утилита на странице mybrowser.fyi/. просто откройте на нужном устройстве эту страницу и скопируйте информацию)
к сожалению сафари поддерживает не все технлогии
Ещё бы добавили брейк-поинт на 1920 вообще была бы красота.
Данная задача уже стоит очереди, постараемся ускорить процесс реализации
@@TildaPublishing ждёёёёёёммм)
как совместить одинаковое отображение зеро и стандартного, Элементы в Зеро всегда на примерно 10 px стоят дальше от края , чем элементы ы стандартных, Хотя и там и там 12 колонок
К сожалению, не можем помочь в рамках комментариев на KZhead. Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc В обращении подробно опишите задачу/ проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/ проблему и дать максимально точный ответ.
Может кто нибудь подсказать Почему на большом экране расстояние между текстом становиться намного больше Хотя делаю все в window container Уже и в % перепробовал
Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets, или написав на почту support@tilda.cc В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
То есть вёрстка - это адаптация для всех устройств?
Верстка - создание структуры и расположение элементов на странице (в случае web'а)
Привет. как сделать несколько кнопок в глубину? нажал на кнопку перешел на др.страницу а там опять нажал на кнопку и опять перешел уже на др.страницу и так несколько раз????
Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите задачу/проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/проблему и дать максимально точный ответ.
Это не совсем то чего хотелось бы. Да , элементы можно сделать резиновыми (шейп, изображения) в процентной привязки , но этого не достаточно, т.к. масштабирование текста сделать нельзя и при расширении браузерного окна в 27 дюймов все увеличивается , а текста на фоне увеличенных элементов смотрятся мелко и картина в целом становится косячной. Я недавно все это дело изучил и нашел один лайфхак)) но это так себе вариант) Если есть возможность сделать модификацию в тильдошной чтобы текст можно было в процентах привязывать и он масштабировался, я буду готов даже заплатить за эту модификацию!
CSS
@@molchyngaming2814 нельзя, так как в зеро блоке абсолютное позицианирование, элементы не понимают другие и отступы не будут изменяться
Лучше сделать тогда несколько блоков и медиазапросами распределить какой когда отображается
@@NikoZazulin все можно) как раз медиазапросами поменять размер шрифтов на нужных разрешениях
@@NikoZazulin это тоже вариант, но контент дважды редактировать
Печальный факт состоит в том, что на мобильной версии стандартные блоки выглядят лучше, чем зеро, потому что резинятся. Да, можно привязать контент к левому краю с отступом, но растягивать текстовый блок по ширине уже не получиться. В общем печально, но надеюсь поправят.
Если вопрос ещё актуален, вы можете обратиться в нашу службу поддержки, они вам подскажут наилучшее решение для вашей задачи. Создать обращение можно на странице tilda.cc/tickets/ Уточните сразу в обращении в поддержке: Ссылку на страницу сайта Подробное описание задачи и полноэкранные скриншоты, на которых будет видно проблему с отображением zero-блоков Также уточните сразу устройства и браузеры, на которых тестируете
а зачем куча экранов, если есть тулза в браузере?
Эмуляторы могут отображать некорректное состояние. Всегда лучше проверять на реальных устройствах
Я думал что-то изменилось, раз отдельное видио под адаптивную верстку на большие экраны выпустили. На самом деле анимация только в пикселях. Если делать кастомный сайт для дорогой компании, для больших экранов - не на Tilda.
Не понимаю, почему нельзя регулировать ширину контейнера. Почему нельзя исправить 1200px вручную? За что я заплатил деньги?
Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
С кодом это всё как-то проще...