Резиновая верстка сайта на Тильде

Подписаться 129 тыс.

Просмотров 47 тыс.

50% 1

Куратор 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

Опубликовано:

14 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 79

@user-pg5bo6no5b Год назад

Наконец то я стал понимать на 50% лучше про grid/window container и про резину в частности. Хорошо объяснил мужчина..очень хорошо.

@Samed21 3 года назад

Спасибо вам за такую чудесную программу. Как хорошо, что вы есть

@eloquent2200 2 года назад

Спасибо за проделанную работу

@9292ukrnet 2 года назад

Спасибо, полезно, наглядно и интересно.

@nety_net_ne 2 года назад

Ухх, спасли меня! Два монитора, один HD, второй 2К, и 2К монитор сильно срезал мне картинку на заднем плане, очень помогли, чувствую что надо обязательно все ваши видео на канале посмотреть!!!

@NadiykaAkymova 2 года назад

Класс, как круто )) Спасиибо огромное!!!))

@user-rj7hg4pn4g 3 года назад

спс за науку...как же крута тильда и как много я ещё не знаю..

@EvgeniiSorokin 3 года назад

Отличный совет с размерами экранов. Буду закупаться в каждой стране гаджетами на все разрешения. Нужно ведь тестить. И да, про терпение очень хороший совет, его необходим целый поезд при верстке на разные экраны. Надеюсь, придет время, когда Тильда приблизится к Redymag по удобству использования. Ребята, желаю вам продуктивности!

@VeronikaVolkova-fy7xo 4 месяца назад

Спасибо! Все понятно объяснил)

@igormosijchuk6300 3 года назад

Также в настройках размеров, значення можно указывать с комбинированными единицами измерения (например 100vh - 100px), может иногда приготдится

@ImechkoFamiliya92 10 месяцев назад

Спасибо) я теперь поняла в каких настройках был косяк, что при верстке делаю одно, а при публикации - другое 😅

@user-ms6dk5me8e 3 года назад

Макс, красавчик! Спасибо за пиксели, которые можно превращать в проценты. Это прекрасно)

@lordelias6600 11 месяцев назад

огромное спасибо, очень сильно помог)

@takhiryussupov2764 3 года назад

Вот это самое нужное!

@Nsdimon 3 года назад

Макс ты как всегда достоверно объясняешь. Молодец !

@antonyswoford3617 3 года назад

Лучший!!!

@mxmzubov Год назад

как я долго искал эту информацию про 550 пикселей

@2000zohan 3 года назад

Только интенсив досмотрел 6-часовой с вами, доволен как слон, переделал полностью два своих проекта за одну ночь, все блоки сделал в зеро, заказчики в шоке, я в шоке, сделал им это бесплатно, так как учился на них. Спасибо вам✌🏼👍🏻

@TildaPublishing 3 года назад

Спасибо вам за приятную обратную связь!

@user-eb7ip6fs4e 2 года назад

Добрый день. Что за 6-часовой интенсив?

@user-kz7pp7rm6m 3 года назад

самый понятный спикер)лайк конечно

@fizzybubblech666 2 года назад

Нбать да ты зверюга!! Красота то какая сказка! Вот ето лапиищи!

@nikitatrubitsin1047 3 года назад

Cool!

@user-jn8nc6cw4p Год назад

Такой вопрос: как адаптировать текст соразмерно экрану при резиновой верстке? Условно если текст 16px на макбуке 13-м, как сделать так, чтобы и на аймаке 27 этот текст был пропорционален остальному контенту так же, как и на макбуке? Явно размер у него будет уже на 16px.. Заранее спасибо за ответ!

@torebektoregozhin4626 3 года назад

5:55 stretch это для себя

@ruslanzdor6921 3 года назад

Было бы очень полезно сказать и показать, что в самом браузере вы можете увидеть как сайт выглядит на других расширениях, просто нажав просмотреть код и выбрав нужное расширение. Это бы намного упростило задачу поиска различных мониторов

@dmitrykand5142 3 года назад

Еще использование расширение под хром Window Resizer и ему подобные.

@pov.8577 3 года назад

Зашел в комменты, чтобы написать это, а уже все)))

@user-wc2lo9be1w 3 года назад

но советуют проверять-таки на телефонах

@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!

@nanofox6874 3 года назад

почему вы не обьясняете как верстать так, чтоб смотрелось и на десктопах нормально и на мобильных устройствах, если делать windows container , то в мобильной версии, идут белые пробелы между блоками, выпустите нормальное видео как правильно верстать в компьютерной версии и в мобильной версии.

@tentasaur2173 2 года назад

узнали как убрать белые пробелы? Потому что на Айфоне 5 и 11 например экран разный, не получается чтото

@ImechkoFamiliya92 10 месяцев назад

@@tentasaur2173не пробовали в настройках блоков расстояние проверить и поставить на 0 пикселей (к примеру)? Кажется, что дело в этом. У меня такой проблемы нет

@tentasaur2173 10 месяцев назад

@@ImechkoFamiliya92 Спасибо за ответ, позже проверю

@katni98 3 года назад

Это действительно самое тяжелое в верстке😫 Ну лично у меня вечно затуп с этим window container

@rustam_webdesigner 3 года назад

У тебя тоже в редакторе все друг на друга наезжает ? но после публикации во всей красе страницы все на местах. Вот только в редакторе сложно бывает ориентироваться с этой кашей.

@user-kc5mk9ln8c 2 года назад

Было бы круто, если бы можно было ставить дополнительные размеры экранов на десктопе например добавить full hd версию

@TildaPublishing 2 года назад

Благодарим за обратную связь! Уже передали ваш запрос разработчикам

@kristinazimareva5353 Год назад

🎉🎉🎉🎉🎉

@trubenok 3 года назад

Спасибо большое! А как можно с помощью калькулятора рассчитать, как будет выглядить на рпзных экранах ?

@TildaPublishing 3 года назад

Не уверены, что правильно понимаем вопрос Вы можете в режиме онлайн редактировать страницу и проверять отображение на разных экранах, открыв предпросмотр страницы > слева в нижнем углу рядом с кнопкой «вернуться к редактированию», навести на иконку с изображением ноутбука и выбрать один из вариантов ширины экрана. Также можно использовать сторонние инструменты для проверки отображения. В таком случае необходимо будет опубликовать страницу прежде

@mr.zxzxzxz3816 2 года назад

в хроме есть инструмент разработчика , там можно глянуть как выглядит верстка на других устройствах с разной шириной экрана

@sergeysibvaleo 3 года назад

Как избежать проблемы, когда верстаешь дизайн, а в итоге на iPhone вся верстка плывет? Но на Андроид устройствах все корректно отображается.

@TildaPublishing 3 года назад

Стоит рассматривать подробнее Обратитесь в нашу службу поддержки, пожалуйста. Создать обращение можно на странице tilda.cc/tickets/ Уточните сразу в обращении в поддержке: Ссылку на страницу сайта Модели устройств, на котором проблема воспроизвелась, и на котором открывается корректно И информацию об устройстве и браузере (получить эту информацию вам поможет утилита на странице mybrowser.fyi/. просто откройте на нужном устройстве эту страницу и скопируйте информацию)

@mr.zxzxzxz3816 2 года назад

к сожалению сафари поддерживает не все технлогии

@pavelkorolev4575 3 года назад

Ещё бы добавили брейк-поинт на 1920 вообще была бы красота.

@TildaPublishing 3 года назад

Данная задача уже стоит очереди, постараемся ускорить процесс реализации

@mdesign8409 3 года назад

@@TildaPublishing ждёёёёёёммм)

@user-ti2im7bo9q 2 года назад

как совместить одинаковое отображение зеро и стандартного, Элементы в Зеро всегда на примерно 10 px стоят дальше от края , чем элементы ы стандартных, Хотя и там и там 12 колонок

@TildaPublishing 2 года назад

К сожалению, не можем помочь в рамках комментариев на RU-vid. Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc В обращении подробно опишите задачу/ проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/ проблему и дать максимально точный ответ.

@user-hh9vu7df5v 2 года назад

То есть вёрстка - это адаптация для всех устройств?

@TildaPublishing 2 года назад

Верстка - создание структуры и расположение элементов на странице (в случае web'а)

@user-jq2xt5rp5l 3 года назад

Может кто нибудь подсказать Почему на большом экране расстояние между текстом становиться намного больше Хотя делаю все в window container Уже и в % перепробовал

@TildaPublishing 3 года назад

Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets, или написав на почту support@tilda.cc В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.

@user-lw3lm2ld7d 9 месяцев назад

Привет. как сделать несколько кнопок в глубину? нажал на кнопку перешел на др.страницу а там опять нажал на кнопку и опять перешел уже на др.страницу и так несколько раз????

@TildaPublishing 9 месяцев назад

Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите задачу/проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/проблему и дать максимально точный ответ.

@mdesign8409 3 года назад

Это не совсем то чего хотелось бы. Да , элементы можно сделать резиновыми (шейп, изображения) в процентной привязки , но этого не достаточно, т.к. масштабирование текста сделать нельзя и при расширении браузерного окна в 27 дюймов все увеличивается , а текста на фоне увеличенных элементов смотрятся мелко и картина в целом становится косячной. Я недавно все это дело изучил и нашел один лайфхак)) но это так себе вариант) Если есть возможность сделать модификацию в тильдошной чтобы текст можно было в процентах привязывать и он масштабировался, я буду готов даже заплатить за эту модификацию!

@molchyngaming2814 3 года назад

CSS

@NikoZazulin 3 года назад

@@molchyngaming2814 нельзя, так как в зеро блоке абсолютное позицианирование, элементы не понимают другие и отступы не будут изменяться

@NikoZazulin 3 года назад

Лучше сделать тогда несколько блоков и медиазапросами распределить какой когда отображается

@molchyngaming2814 3 года назад

@@NikoZazulin все можно) как раз медиазапросами поменять размер шрифтов на нужных разрешениях

@molchyngaming2814 3 года назад

@@NikoZazulin это тоже вариант, но контент дважды редактировать

@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.