Резиновая верстка сайта на Тильде
Рет қаралды 48,050
Күн бұрынКуратор 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
@user-pg5bo6no5b Жыл бұрын
Наконец то я стал понимать на 50% лучше про grid/window container и про резину в частности. Хорошо объяснил мужчина..очень хорошо.
@ImechkoFamiliya92 11 ай бұрын
Спасибо) я теперь поняла в каких настройках был косяк, что при верстке делаю одно, а при публикации - другое 😅
@Samed21 3 жыл бұрын
Спасибо вам за такую чудесную программу. Как хорошо, что вы есть
@nety_net_ne 2 жыл бұрын
Ухх, спасли меня! Два монитора, один HD, второй 2К, и 2К монитор сильно срезал мне картинку на заднем плане, очень помогли, чувствую что надо обязательно все ваши видео на канале посмотреть!!!
@user-rj7hg4pn4g 3 жыл бұрын
спс за науку...как же крута тильда и как много я ещё не знаю..
@eloquent2200 2 жыл бұрын
Спасибо за проделанную работу
@EvgeniiSorokin 3 жыл бұрын
Отличный совет с размерами экранов. Буду закупаться в каждой стране гаджетами на все разрешения. Нужно ведь тестить. И да, про терпение очень хороший совет, его необходим целый поезд при верстке на разные экраны. Надеюсь, придет время, когда Тильда приблизится к Redymag по удобству использования. Ребята, желаю вам продуктивности!
@9292ukrnet 2 жыл бұрын
Спасибо, полезно, наглядно и интересно.
@NadiykaAkymova 2 жыл бұрын
Класс, как круто )) Спасиибо огромное!!!))
@igormosijchuk6300 3 жыл бұрын
Также в настройках размеров, значення можно указывать с комбинированными единицами измерения (например 100vh - 100px), может иногда приготдится
@nanofox6874 3 жыл бұрын
почему вы не обьясняете как верстать так, чтоб смотрелось и на десктопах нормально и на мобильных устройствах, если делать windows container , то в мобильной версии, идут белые пробелы между блоками, выпустите нормальное видео как правильно верстать в компьютерной версии и в мобильной версии.
@tentasaur2173 2 жыл бұрын
узнали как убрать белые пробелы? Потому что на Айфоне 5 и 11 например экран разный, не получается чтото
@ImechkoFamiliya92 11 ай бұрын
@@tentasaur2173не пробовали в настройках блоков расстояние проверить и поставить на 0 пикселей (к примеру)? Кажется, что дело в этом. У меня такой проблемы нет
@tentasaur2173 11 ай бұрын
@@ImechkoFamiliya92 Спасибо за ответ, позже проверю
@mxmzubov 2 жыл бұрын
как я долго искал эту информацию про 550 пикселей
@2000zohan 3 жыл бұрын
Только интенсив досмотрел 6-часовой с вами, доволен как слон, переделал полностью два своих проекта за одну ночь, все блоки сделал в зеро, заказчики в шоке, я в шоке, сделал им это бесплатно, так как учился на них. Спасибо вам✌🏼👍🏻
@TildaPublishing 3 жыл бұрын
Спасибо вам за приятную обратную связь!
@user-eb7ip6fs4e 2 жыл бұрын
Добрый день. Что за 6-часовой интенсив?
@VeronikaVolkova-fy7xo 5 ай бұрын
Спасибо! Все понятно объяснил)
@takhiryussupov2764 3 жыл бұрын
Вот это самое нужное!
@user-ms6dk5me8e 3 жыл бұрын
Макс, красавчик! Спасибо за пиксели, которые можно превращать в проценты. Это прекрасно)
@lordelias6600 Жыл бұрын
огромное спасибо, очень сильно помог)
@katni98 3 жыл бұрын
Это действительно самое тяжелое в верстке😫 Ну лично у меня вечно затуп с этим window container
@rustam_webdesigner 3 жыл бұрын
У тебя тоже в редакторе все друг на друга наезжает ? но после публикации во всей красе страницы все на местах. Вот только в редакторе сложно бывает ориентироваться с этой кашей.
@ruslanzdor6921 3 жыл бұрын
Было бы очень полезно сказать и показать, что в самом браузере вы можете увидеть как сайт выглядит на других расширениях, просто нажав просмотреть код и выбрав нужное расширение. Это бы намного упростило задачу поиска различных мониторов
@dmitrykand5142 3 жыл бұрын
Еще использование расширение под хром Window Resizer и ему подобные.
@pov.8577 3 жыл бұрын
Зашел в комменты, чтобы написать это, а уже все)))
@user-wc2lo9be1w 3 жыл бұрын
но советуют проверять-таки на телефонах
@fizzybubblech666 2 жыл бұрын
Нбать да ты зверюга!! Красота то какая сказка! Вот ето лапиищи!
@user-jn8nc6cw4p Жыл бұрын
Такой вопрос: как адаптировать текст соразмерно экрану при резиновой верстке? Условно если текст 16px на макбуке 13-м, как сделать так, чтобы и на аймаке 27 этот текст был пропорционален остальному контенту так же, как и на макбуке? Явно размер у него будет уже на 16px.. Заранее спасибо за ответ!
@antonyswoford3617 3 жыл бұрын
Лучший!!!
@Nsdimon 3 жыл бұрын
Макс ты как всегда достоверно объясняешь. Молодец !
@torebektoregozhin4626 3 жыл бұрын
5:55 stretch это для себя
@nikitatrubitsin1047 3 жыл бұрын
Cool!
@sergeysibvaleo 3 жыл бұрын
Как избежать проблемы, когда верстаешь дизайн, а в итоге на iPhone вся верстка плывет? Но на Андроид устройствах все корректно отображается.
@TildaPublishing 3 жыл бұрын
Стоит рассматривать подробнее Обратитесь в нашу службу поддержки, пожалуйста. Создать обращение можно на странице tilda.cc/tickets/ Уточните сразу в обращении в поддержке: Ссылку на страницу сайта Модели устройств, на котором проблема воспроизвелась, и на котором открывается корректно И информацию об устройстве и браузере (получить эту информацию вам поможет утилита на странице mybrowser.fyi/. просто откройте на нужном устройстве эту страницу и скопируйте информацию)
@mr.zxzxzxz3816 2 жыл бұрын
к сожалению сафари поддерживает не все технлогии
@turko_baba 3 жыл бұрын
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:((
@hemendal7458 3 жыл бұрын
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!
@pavelkorolev4575 3 жыл бұрын
Ещё бы добавили брейк-поинт на 1920 вообще была бы красота.
@TildaPublishing 3 жыл бұрын
Данная задача уже стоит очереди, постараемся ускорить процесс реализации
@mdesign8409 3 жыл бұрын
@@TildaPublishing ждёёёёёёммм)
@user-kz7pp7rm6m 3 жыл бұрын
самый понятный спикер)лайк конечно
@user-kc5mk9ln8c 2 жыл бұрын
Было бы круто, если бы можно было ставить дополнительные размеры экранов на десктопе например добавить full hd версию
@TildaPublishing 2 жыл бұрын
Благодарим за обратную связь! Уже передали ваш запрос разработчикам
@trubenok 3 жыл бұрын
Спасибо большое! А как можно с помощью калькулятора рассчитать, как будет выглядить на рпзных экранах ?
@TildaPublishing 3 жыл бұрын
Не уверены, что правильно понимаем вопрос Вы можете в режиме онлайн редактировать страницу и проверять отображение на разных экранах, открыв предпросмотр страницы > слева в нижнем углу рядом с кнопкой «вернуться к редактированию», навести на иконку с изображением ноутбука и выбрать один из вариантов ширины экрана. Также можно использовать сторонние инструменты для проверки отображения. В таком случае необходимо будет опубликовать страницу прежде
@mr.zxzxzxz3816 2 жыл бұрын
в хроме есть инструмент разработчика , там можно глянуть как выглядит верстка на других устройствах с разной шириной экрана
@mdesign8409 3 жыл бұрын
Это не совсем то чего хотелось бы. Да , элементы можно сделать резиновыми (шейп, изображения) в процентной привязки , но этого не достаточно, т.к. масштабирование текста сделать нельзя и при расширении браузерного окна в 27 дюймов все увеличивается , а текста на фоне увеличенных элементов смотрятся мелко и картина в целом становится косячной. Я недавно все это дело изучил и нашел один лайфхак)) но это так себе вариант) Если есть возможность сделать модификацию в тильдошной чтобы текст можно было в процентах привязывать и он масштабировался, я буду готов даже заплатить за эту модификацию!
@molchyngaming2814 3 жыл бұрын
CSS
@NikoZazulin 3 жыл бұрын
@@molchyngaming2814 нельзя, так как в зеро блоке абсолютное позицианирование, элементы не понимают другие и отступы не будут изменяться
@NikoZazulin 3 жыл бұрын
Лучше сделать тогда несколько блоков и медиазапросами распределить какой когда отображается
@molchyngaming2814 3 жыл бұрын
@@NikoZazulin все можно) как раз медиазапросами поменять размер шрифтов на нужных разрешениях
@molchyngaming2814 3 жыл бұрын
@@NikoZazulin это тоже вариант, но контент дважды редактировать
@user-ti2im7bo9q 2 жыл бұрын
как совместить одинаковое отображение зеро и стандартного, Элементы в Зеро всегда на примерно 10 px стоят дальше от края , чем элементы ы стандартных, Хотя и там и там 12 колонок
@TildaPublishing 2 жыл бұрын
К сожалению, не можем помочь в рамках комментариев на KZfaq. Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc В обращении подробно опишите задачу/ проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/ проблему и дать максимально точный ответ.
@user-lw3lm2ld7d 10 ай бұрын
Привет. как сделать несколько кнопок в глубину? нажал на кнопку перешел на др.страницу а там опять нажал на кнопку и опять перешел уже на др.страницу и так несколько раз????
@TildaPublishing 10 ай бұрын
Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите задачу/проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/проблему и дать максимально точный ответ.
@user-jq2xt5rp5l 3 жыл бұрын
Может кто нибудь подсказать Почему на большом экране расстояние между текстом становиться намного больше Хотя делаю все в window container Уже и в % перепробовал
@TildaPublishing 3 жыл бұрын
Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets, или написав на почту support@tilda.cc В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
@sunlunee 2 жыл бұрын
То есть вёрстка - это адаптация для всех устройств?
@TildaPublishing 2 жыл бұрын
Верстка - создание структуры и расположение элементов на странице (в случае web'а)
@kristinazimareva5353 Жыл бұрын
🎉🎉🎉🎉🎉
@AlexeyPodolsky 3 жыл бұрын
а зачем куча экранов, если есть тулза в браузере?
@TildaPublishing 3 жыл бұрын
Эмуляторы могут отображать некорректное состояние. Всегда лучше проверять на реальных устройствах
@pavelkorolev4575 3 жыл бұрын
Печальный факт состоит в том, что на мобильной версии стандартные блоки выглядят лучше, чем зеро, потому что резинятся. Да, можно привязать контент к левому краю с отступом, но растягивать текстовый блок по ширине уже не получиться. В общем печально, но надеюсь поправят.
@TildaPublishing 3 жыл бұрын
Если вопрос ещё актуален, вы можете обратиться в нашу службу поддержки, они вам подскажут наилучшее решение для вашей задачи. Создать обращение можно на странице tilda.cc/tickets/ Уточните сразу в обращении в поддержке: Ссылку на страницу сайта Подробное описание задачи и полноэкранные скриншоты, на которых будет видно проблему с отображением zero-блоков Также уточните сразу устройства и браузеры, на которых тестируете
@velessn Жыл бұрын
Не понимаю, почему нельзя регулировать ширину контейнера. Почему нельзя исправить 1200px вручную? За что я заплатил деньги?
@TildaPublishing Жыл бұрын
Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
@user-ji8gc4pe9z 3 жыл бұрын
Я думал что-то изменилось, раз отдельное видио под адаптивную верстку на большие экраны выпустили. На самом деле анимация только в пикселях. Если делать кастомный сайт для дорогой компании, для больших экранов - не на Tilda.
@alexUnion 2 жыл бұрын
С кодом это всё как-то проще...
BrainsCloud
Рет қаралды 935 М.
Gufee.medalin
Рет қаралды 4 МЛН
Давид Аветисян | Сайты на Тильде
Рет қаралды 36 М.
Gufee.medalin
Рет қаралды 4 МЛН