Верстка мобильной версии на тильде

Справка по размерам экранов устройств

Каждое устройство кроме физической ширины экрана имеет свою CSS-ширину, которая определяет, какая версия блока или диапазон в Zero Block будет показываться пользователю. Для удобства мы составили список популярных устройств и значений их CSS-ширины.

Apple iPhone X; 375 Apple iPhone 6+, 6s+, 7+, 8+; 414 Apple iPhone 7, iPhone 8;375 Apple iPhone 6, 6s;375 Apple iPhone 5s, SE; 320 Apple iPhone 4, 4s, 3; 320 Apple iPod Touch;320 LG G5;360 LG G4;360 LG G3;360 LG Optimus G;384 Samsung Galaxy S8+;360 Samsung Galaxy S8;360 Samsung Galaxy S7, S7 edge;360 Samsung Galaxy S6;360 Samsung Galaxy S5;360 Samsung Galaxy S4;360 Samsung Galaxy S4 mini;360 Samsung Galaxy S3;360 Samsung Galaxy S3 mini;320 Samsung Galaxy S2;320 Samsung Galaxy S;320 Samsung Galaxy Nexus;360 Samsung Galaxy Note 8;360 Samsung Galaxy Note 4;360 Samsung Galaxy Note 3;360 Samsung Galaxy Note 2;360 Samsung Galaxy Note;400 LG Nexus 5;360 LG Nexus 4;384 Microsoft Lumia 1520;432 Microsoft Lumia 1020;320 Microsoft Lumia 925;320 Microsoft Lumia 920;320 Microsoft Lumia 900;320 Microsoft Lumia 830;320 Microsoft Lumia 620;320 Motorola Nexus 6;412 HTC One;360 HTC 8X;320 HTC Evo 3D;360 Sony Xperia Z3;360 Sony Xperia Z;360 Sony Xperia S;360 Sony Xperia P;360 Xiaomi Redmi Note 5;393 Xiaomi Mi 4;360 Xiaomi Mi 3;360 Lenovo K900;360 Pantech Vega n°6;360 Blackberry Leap;390 Blackberry Passport;504 Blackberry Classic;390 Blackberry Q10;346 Blackberry Z30;360 Blackberry Z10;384 Blackberry Torch 9800;360 ZTE Grand S;360 ZTE Open (Firefox OS);320

Apple iPad Pro;1024 Apple iPad Pro 9.7;768 Apple iPad 3, 4, Air, Air2;768 Apple iPad 1, 2;768 Apple iPad mini 2, 3, 4;768 Apple iPad mini;768 Samsung Galaxy Tab 3 10″;800 Samsung Galaxy Tab 2 10″;800 Samsung Galaxy Tab (8.9″);800 Samsung Galaxy Tab 2 (7″);600 Samsung Nexus 10;800 HTC Nexus 9;768 Asus Nexus 7 (v2);600 Asus Nexus 7 (v1);604 LG G Pad 8.3;600 Amazon Kindle Fire HD 8.9;800 Amazon Kindle Fire HD 7;480 Amazon Kindle Fire;600 Microsoft Surface Pro 3;1024 Microsoft Surface Pro 2;720 Microsoft Surface Pro;720 Microsoft Surface;768 Blackberry Playbook;600

Источник

Корректировка мобильной версии сайта

Тильда автоматически подстраивает сайт для просмотра на планшетах, смартфонах, нетбуках, ноутбуках и компьютерах.

Дополнительно можно изменить размеры отступов между блоками для мобильных, настроить диапазон видимости блока на разных устройствах, сделать свою адаптивную версию с помощью редактора Zero Block либо отключить адаптивность сайта.

Функция, которая определяет, на каких устройствах будет виден данный блок, а на каких нет. Есть в настройках каждого блока.

Зачем нужно и как это работает

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

Затем нужно скопировать этот блок и настроить его внешний вид специально для мобильных (поменять фотографию, размер шрифта и т. д). Этому блоку задайте диапазон видимости от 0 до 980px. Это будет мобильная версия блока.

Таким образом, на компьютере пользователь будет видеть десктопную версию, а на мобильных устройствах — мобильную.

Диапазон (разные значения параметров) нужен, чтобы при необходимости вы могли настроить внешний вид блока для какого-то конкретного устройства, выбрав разрешение. Например, если блок плохо отображается именно на планшете или на определенной модели телефона.

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

Источник

Мобильная версия сайта на Тильде

Начну с краткого экскурса.
Для чего нужна мобильная адаптация?

В первую очередь для того, чтобы посетителю с мобильных устройств было удобно просматривать ваш сайт. Ведь если он зайдет с мобильного, а ему покажется обычная версия сайта (под десктопы), то с огромной вероятностью, посетитель уйдет искать более удобный сайт. А в 2021 году, процент посетителей с телефонов и планшетов сильно обгоняет компьютерный трафик.

Почему же Тильда?

Я ярый приверженец конструктора Tilda Publishing. Потому что, ребята очень активно развиваются, сама платформа не глючная (я знаю, о чем говорю, у меня за спиной работа не в одном десятке конструкторов). Широчайшие возможности. Даже если что-то не удается реализовать в стандартном функционале, то есть энтузиасты, которые помогают пользователям с реализацией кода.

Из коробки в Тильде идет интеграция со множествами сервисами (оплаты, рекламы и аналитики от Яндекс и Google, CRM, email-рассылок и тд.)

Особенно хорошо продвигаются сайты на Тильде в поиске. Есть чек-лист проверки сайта под SEO, настройка переадресации и редиректов.

Есть прекрасный функционал мультилендинга, что значительно увеличивает конверсию с платного трафика.

Что-то я отвлекся. На самом деле, конструктор Tilda я могу расхваливать часами)))
Перейдем к адаптации.

Настройка диапазона видимости в Tilda

• От 1200 px и более;
• От 980 до 1200 px;
• От 640 до 980;
• От 480 до 640;
• От 320 до 480;
• И от 0 до 320 пикселей.

Мобильная адаптация стандартных блоковна платформе Tilda

Мало кто знает, но у стандартных блоков Тильды, можно настраивать отдельно отступ для мобильной адаптации. Сверху и снизу. Ну это логично)))

Но для этого надо нажать на иконку ноутбука, где настраиваются отступы.
Вообще, Tilda мне нравится еще и тем, что они лаконично и удобно вписывают настройки в интерфейс. То, что может навредить в дизайне сайтов молодому дизайнеру, они прячут.
А вообще, функционал стандартных блоков конструктора крайне ограничен и сложные проекты разработчику на них сложно создать. Для этого на помощь приходит Zero!

Мобильная версия на Зеро (Zero) в Tilda

Тут ты волен творить, что душе угодно. Главное не перемудрить. Если ты дизайнер с опытом, то этот блок точно для тебя.

Кстати, возможно, кто-то не знает, но в Тильде можно конвертировать стандартный блок в Зеро. Не все, но многие.

Только главное правило, сначала конвертируй, потом уже в нем создавай страницу или блок. Потому что можно подумать, что сначала я сделаю, то что мне нужно, а потом я сконвертирую в Zero и будет мне счастье, но нет. При конвертации, все ваше редактирование, слетит и блок превратится в базовую версию стандартного.

Вообще, для быстрой работы с Zero и настройки адаптации, нужен опыт. Я вспоминаю себя, начинающим пользователем Tilda, для меня адаптация превращалась в ад, я тратил на нее уйму времени, делая ее самостоятельно, без расширений и помощников в виде обычного shape. Я с калькулятором и направляющими считал отступы и в редакторе двигал элементы.
Я даже не думал о том, что отступы можно было измерить шэйпом и этот же шэйп использовать как измеритель расстояния других элементов.

Источник

Обучение на Тильда. Урок 8. (Настройка мобильной версии сайта)

Уроки предназначены для тех, кто хочет научиться работать в Tilda. А так же научиться создавать впечатляющий сайт для бизнеса и медиа. Поставь мне лайк и напиши на какую тему хотел бы видеть следующее видео. 🚀 Приложение в Google Play: https://play.google.com/store/apps/de . 4PDA: https://4pda.ru/forum/index.php?showt . Только начинаете знакомиться с Tilda? Эти видео для вас: 👉 Плейлист уроков по Тильда (видеогид по основным функциям) — https://clck.ru/T4GZc 👉 Создание блока сайта в Zero Block — https://clck.ru/T4GdC 👉Все необходимые настройки сайта — https://clck.ru/T4GgF Twitter: https://twitter.com/ProgramsArt Instagram: https://www.instagram.com/art_programs Вк: https://vk.com/art.programs Вам нужен веб-сайт, но нет финансовой возможности на старте проекта оплатить услуги web-дизайнера и web-программиста? При таких обстоятельствах, и не только, стоит обратить внимание конструктор сайтов «Tilda Publishing». Tilda – это конструктор сайтов с простым визуальным редактором, который дает возможность делать отличные сайты со слайдерами, изображениями на весь экран, эффектом параллакса и прочими, не менее красивыми вещами. Конструктор сайтов Tilda помогает делать лендинги и сайты-визитки, не привлекая web-разработчиков, а также позволяет без крупных финансовых вложений запустить бизнес в интернете, что весьма актуально, когда проект на старте. Подписывайтесь на канал Art Programs — здесь Вас ждет много полезных видеороликов из области web-дизайна и web-разработки! #artprograms #мобильник #мобильныйвид #адаптивность

Источник