Как настроить зеро блок под мобильную версию

Zero Block: отзывчивый дизайн

Grid Container — основная рабочая область . В Grid Container используется та же сетка, что и в Тильде, 12 колонок (1200 px). Если мы располагаем элементы внутри Grid Container, то независимо от размера экрана они будут находится внутри сетки из 12 колонок.

По оси X Grid Container всегда позиционируется по центру.

То же самое происходит с версиями для разных устройств: при переключении между экранами ширина Grid Container становится 980, 640, 480, 320 px, он остается неизменным и всегда по центру.

Высоту Grid Container можно задать в настройках артборда или потянув контейнер вверх / вниз с помощью мыши. Ее можно задавать для каждого разрешения свою. Высота Grid Container является высотой блока.

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

Для этого нужно открыть настройки элемента и поменять тип контейнера на Window Container. Начало координат сместится в левый верхний угол Window Container.

У каждого элемента в рабочей области есть координаты — положение относительно начало координат по оси X и по оси Y.

Выделите объект, откройте панель настроек (клавиша tab) и в самом верху вы увидите координаты объекта.

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

Например, мы хотим, чтобы половина экрана всегда была желтая. Добавим фигуру и в настройках элемента зададим контейнер — Window Container , а для ширины и высоты поменяем единицы измерения на проценты вместо пикселей и зададим 50% ширины экрана и 100% высоты. Также в процентах можно задавать значения осей — если нужно, чтобы элемент всегда занимал правую половину экрана, поставим значение для оси X — 50%.

По умолчанию все элементы привязаны к Grid контейнеру — это прямоугольник с шириной 1200 пикселей на десктопе, он всегда расположен по центру экрана и имеет одинаковый размер, независимо от размера монитора.

С помощью функции автоматического масштабирования можно масштабировать все элементы, которые принадлежат Grid контейнеру, пропорционально ширине экрана или браузера. Grid контейнер будет занимать не фиксированную ширину 1200 пикселей, а растягиваться на всю ширину экрана. Все добавленные элементы будут пропорционально увеличены, чтобы занять весь экран.

Чтобы включить автоматическое масштабирование, откройте настройки артборда и найдите параметр Scale Grid Container. Выберите параметр Autoscale to Window Width и сохраните изменения.

Данная настройка позволит дизайну сайта адаптировался под любое разрешение, в том числе для HD-экранов. Настройка поможет избежать лишнего пустого пространства на экранах с высоким разрешением, а также ускорит работу дизайнера — не придётся тратить время на резиновую вёрстку.

При необходимости, вы можете установить автоматическое масштабирование для всех типов экрана или, например, только для мобильных устройств, установив настройку только в определенном диапазоне ширины экрана. Контейнер десктопной версии увеличивается от 1200px до 1920, 4К или даже 6К. В мобильной версии размер увеличивается от 320px.

Высота блока будет динамической: она будет изменяться пропорционально ширине при масштабировании блока.

Чтобы кнопка оставалась на нужном расстоянии от границ окна браузера, но не масштабировалась на разных разрешениях, задайте для неё координаты в Window Container. Используйте привязку к разным контейнерам, чтобы некоторые элементы в рамках одного блока масштабировать, а некоторые оставлять с фиксированным расстоянием от краёв браузера, но без изменения размера.

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

Используйте векторные изображения в формате svg для иконок, а фоновые изображения и фотографии загружайте с запасом. В Тильде при загрузке большого изображения оно по умолчанию уменьшается до 1680 пикселей, но если вы нажмёте на иконку шестерёнки при загрузке, появится возможность загрузить изображение с размером 1920px по большей стороне. Переключите тумблер “Разрешить загрузку до 1920px”, а затем загрузите файлы. Изображения больше 1920px загрузить не получится, потому что такой размер будет влиять на производительность браузера и скорость загрузки сайта.

Источник

Как настроить зеро блок под мобильную версию

Tilda Publishing запись закреплена

Масштабирование блока под ширину экрана в Zero Block

Теперь в Zero Block есть настройка автоматического масштабирования блока на 100% окна браузера. Это позволяет дизайну сайта адаптироваться под любой размер экрана.

С помощью новой функции можно масштабировать все элементы, привязанные к Grid Container, пропорционально размеру браузера. Настройка поможет избежать лишнего пустого пространства на больших экранах, а также ускорит работу дизайнера — не придётся тратить время на резиновую вёрстку.

Настройка работает с элементами, привязанными к грид-контейнеру. Включить масштабирование можно в настройках рабочей области → Scale Grid Container.

Смотрите демо-версию страницы с автоматическим масштабированием: http://autoscale-in-zero-block-demo.tilda.ws

Другие примеры сайтов с настроенным автоскейлом:
https://rim360.ru
https://jobtohelp.ru
https://tiui.ru/autoscale

Подробнее о масштабировании экрана в Zero Block https://help-ru.tilda.cc/zero-block-advanced#scale

А вы уже попробовали новую функцию? Поделитесь в комментариях

С помощью новой функции можно масштабировать все элементы, привязанные к Grid Container, пропорционально размеру браузера. Настройка поможет избежать лишнего пустого пространства на больших экранах, а также ускорит работу дизайнера — не придётся тратить время на резиновую вёрстку.

Настройка работает с элементами, привязанными к грид-контейнеру. Включить масштабирование можно в настройках рабочей области → Scale Grid Container.

Источник

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

Зачем нужна мобильная версия сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отключение адаптивной верстки

Расширение-помощник для работы в адаптацией в Тильде

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

Разработчики дали возможность сами выбрать, сколько оплатить. Цена в месяц. Минимальная стоимость около 250 руб.

С этим расширением легко массово настраивать выравнивание и сетку (Grid Window контейнер). Для текстовых элементов, есть возможность (как в Фигме) одной кнопкой сделать все буквы с большой или маленькой буквы.

Есть возможность предпросмотра штрифтов из Google Fonts. Именно предпросмотра. Для этого вы в Зеро в Тильде включаете определенный штрифт, расширение его подтягивает из Гугл шрифтов, для предпросмотра, а при выходе, он сбрасывается. Это сделано для того, чтобы вы могли быстро перебирать штрифты и выбирать понравившиеся. А потом, подключать в Тильде.

Лично я этой функцией не пользуюсь, потому что я все сайты сначала делаю в Фигме, а потом переношу в Тильду.

Также, можно массово включать и копировать sbs-анимацию.

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

В Zero, лучше делать все по порядку.

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

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

Не уделяйте много времени всем разрешениям, которые настраиваются в Тильде!

Уделяйте много времени только трем разрешениям:
— от 0 до 320 px,
— от 320 до 480 px,
— от 1200 до ∞

Почему так? Потому что это самые популярные разрешения, с которых заходят пользователи на сайты.
Нет смысла прорабатывать планшеты и разрешения маленьких старых мониторов, просто потому, что максимум 5% людей зайдут именно с них.
То есть, прорабатываем мобилки и компы (ноуты). Остальное, просто должно все вмещаться в видимую зону.

Однажды, я потратил несколько дней на настройку сложной анимации в Тильде для всех разрешений. Просто анимацию — 2 дня. Хотя можно было забить на промежуточные разрешения и сделать только на мобильных и десктопных за полдня.

Верстка текста и заголовков в Zero (на мобильных)

Для тех пользователей, которые верстают текстовые блоки в редакторе зеро в Тильде.

Многие замечали, наверное, что если мы чередуем стандартный блок и зеро, где есть текст или заголовок, то у них разные отступы на телефонах.
Частое сочетание, когда стандартный блок заголовка, а текст сверстанный в зеро. У стандартных блоков стоит отступ 20 пикселей от края экрана (Window), а в зеро, стандартно на мобильной версии 10 px по Grid.

Чтобы это исправить, нужно просто в Zero задать отступ 20 px и поставить Window контейнер.
Так как разрешения мобильных экранов, пестрят разнообразностью, то текст нужно выровнить аккуратно по всей ширине экрана телефона. Для этого надо в настройках ширины текстового контейнера, переключить с пикселей на %. (На скрине ниже показано) и отрегулировать чтобы текст занимал всю ширину экрана, но и были отступы примерно по 20 px от левого и правого края экрана.

Есть минусы этого способа верстки, но они не значительные, поэтому об этом не будем (Если кому интересно, пишите в комментах, отвечу). Ну и в любом случае, другого способа выравнивания контента в Zero относительно стандартных блоков в Тильде я не нашел.

Мобильное меню в Тильде

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

Как правило в мобильной версии используется меню бургер. На мой взгляд, самое универсальное это ME403.
В него можно добавить все популярные элементы для лендингов, интернет-магазинов, сайтов услуг и создания любых страниц:

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

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

Как правило, меню у меня разделено на три функциональных элемента:

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

Все эти элементы можно менять местами, добавлять, убирать, в зависимости от дизайна, функционала. Так получается уникальное меню, не похожее на стандартные тильдовские 😉

И всю эту информацию, надо уместить потом в мобильной версии.

Логотип, телефон, почта и кнопка меню, прекрасно умещаются на телефоне, а вот остальное нужно «упаковать» в моб меню и его надо выбирать из возможностей и данного проекта, над которым работаете.

Кнопку бургера можно использовать стандартную из блока, можно нарисовать свою уникальную с помощью шэйпов в Тильде, а потом сгруппировать эти слои (кстати, совсем недавнее обновление в конструкторе Tilda) и поставить ей ссылку на меню.

Рассмотрим преимущества использования блока ME403.

• На него можно поставить ссылку с любого элемента, то есть мы его можем использовать по разному.
• Он не занимает весь экран в развернутом виде, а аккуратно выезжает слева или справа
• Много полей для заполнения
• При фиксации он аккуратно располагается в любом углу, а также ему можно задать прозрачность

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

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

• ME301
• ME302
• ME303A
• ME403
• ME405

Если хотите создавать меню в Зеро, то по моей инструкции, а также видео, можно попрактиковаться в этом. Не переживайте, если с первого раза ничего толкового не получится.

Если есть вопросы по Тильде, задавайте в конце этой страницы, после видео.

Источник