Резиновая верстка сайта на Тильде
ฝัง
- เผยแพร่เมื่อ 13 ก.ค. 2024
- Куратор 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: tildapublishing
◾ Facebook: / tildapublishing
Оставить отзыв о работе на платформе Tilda: tilda.cc/ru/otzyvy
Наконец то я стал понимать на 50% лучше про grid/window container и про резину в частности. Хорошо объяснил мужчина..очень хорошо.
Спасибо вам за такую чудесную программу.
Как хорошо, что вы есть
Спасибо) я теперь поняла в каких настройках был косяк, что при верстке делаю одно, а при публикации - другое 😅
Ухх, спасли меня! Два монитора, один HD, второй 2К, и 2К монитор сильно срезал мне картинку на заднем плане, очень помогли, чувствую что надо обязательно все ваши видео на канале посмотреть!!!
Спасибо за проделанную работу
Отличный совет с размерами экранов. Буду закупаться в каждой стране гаджетами на все разрешения. Нужно ведь тестить. И да, про терпение очень хороший совет, его необходим целый поезд при верстке на разные экраны. Надеюсь, придет время, когда Тильда приблизится к Redymag по удобству использования. Ребята, желаю вам продуктивности!
Спасибо, полезно, наглядно и интересно.
спс за науку...как же крута тильда и как много я ещё не знаю..
Класс, как круто )) Спасиибо огромное!!!))
Также в настройках размеров, значення можно указывать с комбинированными единицами измерения (например 100vh - 100px), может иногда приготдится
Спасибо! Все понятно объяснил)
Макс, красавчик! Спасибо за пиксели, которые можно превращать в проценты. Это прекрасно)
Только интенсив досмотрел 6-часовой с вами, доволен как слон, переделал полностью два своих проекта за одну ночь, все блоки сделал в зеро, заказчики в шоке, я в шоке, сделал им это бесплатно, так как учился на них. Спасибо вам✌🏼👍🏻
Спасибо вам за приятную обратную связь!
Добрый день. Что за 6-часовой интенсив?
огромное спасибо, очень сильно помог)
Вот это самое нужное!
Макс ты как всегда достоверно объясняешь. Молодец !
как я долго искал эту информацию про 550 пикселей
Лучший!!!
Нбать да ты зверюга!! Красота то какая сказка! Вот ето лапиищи!
самый понятный спикер)лайк конечно
почему вы не обьясняете как верстать так, чтоб смотрелось и на десктопах нормально и на мобильных устройствах, если делать windows container , то в мобильной версии, идут белые пробелы между блоками, выпустите нормальное видео как правильно верстать в компьютерной версии и в мобильной версии.
узнали как убрать белые пробелы? Потому что на Айфоне 5 и 11 например экран разный, не получается чтото
@@tentasaur2173не пробовали в настройках блоков расстояние проверить и поставить на 0 пикселей (к примеру)?
Кажется, что дело в этом.
У меня такой проблемы нет
@@ImechkoFamiliya92 Спасибо за ответ, позже проверю
Это действительно самое тяжелое в верстке😫 Ну лично у меня вечно затуп с этим window container
У тебя тоже в редакторе все друг на друга наезжает ? но после публикации во всей красе страницы все на местах.
Вот только в редакторе сложно бывает ориентироваться с этой кашей.
Было бы очень полезно сказать и показать, что в самом браузере вы можете увидеть как сайт выглядит на других расширениях, просто нажав просмотреть код и выбрав нужное расширение. Это бы намного упростило задачу поиска различных мониторов
Еще использование расширение под хром Window Resizer и ему подобные.
Зашел в комменты, чтобы написать это, а уже все)))
но советуют проверять-таки на телефонах
Cool!
5:55 stretch это для себя
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!
Такой вопрос: как адаптировать текст соразмерно экрану при резиновой верстке? Условно если текст 16px на макбуке 13-м, как сделать так, чтобы и на аймаке 27 этот текст был пропорционален остальному контенту так же, как и на макбуке? Явно размер у него будет уже на 16px..
Заранее спасибо за ответ!
Ещё бы добавили брейк-поинт на 1920 вообще была бы красота.
Данная задача уже стоит очереди, постараемся ускорить процесс реализации
@@TildaPublishing ждёёёёёёммм)
Как избежать проблемы, когда верстаешь дизайн, а в итоге на iPhone вся верстка плывет? Но на Андроид устройствах все корректно отображается.
Стоит рассматривать подробнее
Обратитесь в нашу службу поддержки, пожалуйста. Создать обращение можно на странице tilda.cc/tickets/
Уточните сразу в обращении в поддержке:
Ссылку на страницу сайта
Модели устройств, на котором проблема воспроизвелась, и на котором открывается корректно
И информацию об устройстве и браузере (получить эту информацию вам поможет утилита на странице mybrowser.fyi/. просто откройте на нужном устройстве эту страницу и скопируйте информацию)
к сожалению сафари поддерживает не все технлогии
Было бы круто, если бы можно было ставить дополнительные размеры экранов на десктопе например добавить full hd версию
Благодарим за обратную связь! Уже передали ваш запрос разработчикам
🎉🎉🎉🎉🎉
Это не совсем то чего хотелось бы. Да , элементы можно сделать резиновыми (шейп, изображения) в процентной привязки , но этого не достаточно, т.к. масштабирование текста сделать нельзя и при расширении браузерного окна в 27 дюймов все увеличивается , а текста на фоне увеличенных элементов смотрятся мелко и картина в целом становится косячной. Я недавно все это дело изучил и нашел один лайфхак)) но это так себе вариант) Если есть возможность сделать модификацию в тильдошной чтобы текст можно было в процентах привязывать и он масштабировался, я буду готов даже заплатить за эту модификацию!
CSS
@@molchyngaming2814 нельзя, так как в зеро блоке абсолютное позицианирование, элементы не понимают другие и отступы не будут изменяться
Лучше сделать тогда несколько блоков и медиазапросами распределить какой когда отображается
@@NikoZazulin все можно) как раз медиазапросами поменять размер шрифтов на нужных разрешениях
@@NikoZazulin это тоже вариант, но контент дважды редактировать
Спасибо большое!
А как можно с помощью калькулятора рассчитать, как будет выглядить на рпзных экранах ?
Не уверены, что правильно понимаем вопрос
Вы можете в режиме онлайн редактировать страницу и проверять отображение на разных экранах, открыв предпросмотр страницы > слева в нижнем углу рядом с кнопкой «вернуться к редактированию», навести на иконку с изображением ноутбука и выбрать один из вариантов ширины экрана. Также можно использовать сторонние инструменты для проверки отображения. В таком случае необходимо будет опубликовать страницу прежде
в хроме есть инструмент разработчика , там можно глянуть как выглядит верстка на других устройствах с разной шириной экрана
как совместить одинаковое отображение зеро и стандартного, Элементы в Зеро всегда на примерно 10 px стоят дальше от края , чем элементы ы стандартных, Хотя и там и там 12 колонок
К сожалению, не можем помочь в рамках комментариев на TH-cam. Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc
В обращении подробно опишите задачу/ проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/ проблему и дать максимально точный ответ.
Может кто нибудь подсказать
Почему на большом экране расстояние между текстом становиться намного больше
Хотя делаю все в window container
Уже и в % перепробовал
Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets, или написав на почту support@tilda.cc
В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
Печальный факт состоит в том, что на мобильной версии стандартные блоки выглядят лучше, чем зеро, потому что резинятся. Да, можно привязать контент к левому краю с отступом, но растягивать текстовый блок по ширине уже не получиться. В общем печально, но надеюсь поправят.
Если вопрос ещё актуален, вы можете обратиться в нашу службу поддержки, они вам подскажут наилучшее решение для вашей задачи. Создать обращение можно на странице tilda.cc/tickets/
Уточните сразу в обращении в поддержке:
Ссылку на страницу сайта
Подробное описание задачи и полноэкранные скриншоты, на которых будет видно проблему с отображением zero-блоков
Также уточните сразу устройства и браузеры, на которых тестируете
То есть вёрстка - это адаптация для всех устройств?
Верстка - создание структуры и расположение элементов на странице (в случае web'а)
Привет. как сделать несколько кнопок в глубину? нажал на кнопку перешел на др.страницу а там опять нажал на кнопку и опять перешел уже на др.страницу и так несколько раз????
Добрый день!
Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc.
В обращении подробно опишите задачу/проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/проблему и дать максимально точный ответ.
а зачем куча экранов, если есть тулза в браузере?
Эмуляторы могут отображать некорректное состояние. Всегда лучше проверять на реальных устройствах
Не понимаю, почему нельзя регулировать ширину контейнера. Почему нельзя исправить 1200px вручную? За что я заплатил деньги?
Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc
В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
С кодом это всё как-то проще...
Я думал что-то изменилось, раз отдельное видио под адаптивную верстку на большие экраны выпустили. На самом деле анимация только в пикселях. Если делать кастомный сайт для дорогой компании, для больших экранов - не на Tilda.