Отправить заявку
Мы свяжемся с Вами в билжайщее время и обсудим все детали вашего бедующего сайта
Отправляя свои данные, вы соглашаетесь с условиями Политики конфиденциальности
Разработка сайтов
Перенос сайта
Продвижеине сайтов
8 фишек по верстке в Zero-блоке на Tilda
Zero-блок — это мощный инструмент Tilda для кастомной верстки. Разбираем скрытые возможности, лайфхаки и неочевидные приемы, которые сделают ваш сайт уникальным.
1. Дополнительные разрешения в адаптивах
Помимо стандартных брейкпойнтов, которые предлагает Тильда при верстке Zero-блока, рекомендуем также добавить разрешения экранов 1920 (FullHD) и 2560 (2K). Примерно 55−60% пользователей используют мониторы с разрешением 1920×1080 (FullHD), около 15−20% — мониторы 2560×1440 (2K), а многие довольствуются ноутбучными экранами с разрешением 1366×768. Это касается только ПК и ноутбуков. Для планшетов и смартфонов можно оставить стандартные брейкпойнты Тильды — их достаточно.
2. Главный экран
Чаще всего главный экран занимает 100% высоты. Для этого в Zero-блоке есть специальное поле. Чтобы было удобнее выполнять верстку, я обычно ставлю параметр Stretch.
Размеры при верстке для всех типов устройств (при 100% высоты экрана):
Иногда при верстке Zero-блока на главный экран я еще добавляю отдельную версию 1440 — там высота 730−750px (ширина контейнера 1160px (как на разрешении 1200), отступы справа-слева 140px).
- Большие компьютеры — 1920x1080px
- Десктоп — 650-680px
- Перевернутый планшет — 620-650px
- Обычный планшет — 830px
- Перевернутая мобильная версия — 700px
- Мобильная версия — 580-600px
Иногда при верстке Zero-блока на главный экран я еще добавляю отдельную версию 1440 — там высота 730−750px (ширина контейнера 1160px (как на разрешении 1200), отступы справа-слева 140px).
3. Autoscale всему голова
Это технология, при которой все элементы страницы пропорционально масштабируются в зависимости от размера экрана. Благодаря этому сайт сохраняет единый визуальный стиль и правильные пропорции — от компактных ноутбуков до широкоформатных мониторов.
Все элементы сайта растягиваются по ширине, увеличивая или уменьшая свой размер в процентном соотношении от стандартной ширины. Все это происходит автоматически. Контент подстраивается под ширину экрана, а все элементы в нем остаются на своих местах, просто масштабируя в большую или меньшую сторону.
Хотя autoscale (пропорциональное масштабирование) технически расширяет возможности верстки, в коммерческих проектах его применение не всегда оправдано.
Проблема при верстке на практике:
На широкоформатных экранах (27"+ 4K) контент, растянутый на всю ширину, часто становится неудобным для восприятия — пользователю приходится «бегать глазами» из стороны в сторону. Гораздо комфортнее работа с централизованным макетом (с полями по бокам), где:
Кейс из опыта:
Для одного проекта мы изначально выбрали Auto-Scale, зная, что заказчик использует 32-дюймовый монитор. Однако после тестирования получили фидбек: «Сайт выглядит пустым, контент «расползается». Решение — переход на ограниченный Grid-контейнер (макс. ширина 1440px)
Проблема при верстке на практике:
На широкоформатных экранах (27"+ 4K) контент, растянутый на всю ширину, часто становится неудобным для восприятия — пользователю приходится «бегать глазами» из стороны в сторону. Гораздо комфортнее работа с централизованным макетом (с полями по бокам), где:
- Текст сохраняет оптимальную длину строки (45−75 символов).
- Интерактивные элементы (кнопки, формы) остаются в зоне фокуса.
Кейс из опыта:
Для одного проекта мы изначально выбрали Auto-Scale, зная, что заказчик использует 32-дюймовый монитор. Однако после тестирования получили фидбек: «Сайт выглядит пустым, контент «расползается». Решение — переход на ограниченный Grid-контейнер (макс. ширина 1440px)
- Фиксированными боковыми отступами.
- Плавным увеличением только отдельных элементов (фонов, декора).
- Результат: заказчик отметил, что навигация стала интуитивнее.
Где можно использовать Auto-Scale при верстке?
- Лендинги с визуальным уклоном (фотогалереи, портфолио).
- Фуллскрин (hero-секции с фоновым видео).
- Админ-панели с табличными данными.
4. Зоны видимости при верстке в Zero блока
Очень часто бывает, что когда используешь стандартные блоки, необходимо учитывать при верстке Zere-блока поля видимости и выдерживать отступы от краев экрана при адаптиве.
Разумеется, можно делать все в Zero и добавлять коды, чтобы все работало; вопрос в том, что вы потратите много времени на это, а заказчик может даже не обратить внимания. Поэтому при прочих равных я обычно использую стандартный блок, но если что-то не нравится, всегда есть возможность переделать в Zero.
5. Расположение элементов при адаптации
Очень часто бывает, что когда выполняешь верстку, его нужно в будущем адаптировать под другие платформы, и случаются неожиданности.
И вот ты выполнил верстку для декстопной брейкпойнта
Но вот уже на остальных брейкпойнтах при верстке получается все в куче. И чтобы все растянуть и расположить на своих местах, уходит очень много времени.
Что если я вам скажу, что верстку в Zero-блоке можно реализовать быстрее?
Что если я вам скажу, что верстку в Zero-блоке можно реализовать быстрее?
На этот случай Тильда дополнила свой функционал для быстрой верстки. Сброс настроек элементов адаптивов в Zero Block (Clear adaptive design)
И после сброса настроек элементов адаптивов в Zero Block, нам уже легче выполнять верстку.
Это решение позволяет нам верстать Zero-блок до 2 раз быстрее.
6. Система размеры шрифтов и заголовков
При верстке Zero-блока, необходимо соблюдать размера заголовка, мы обычно используем следующие размеры для заголовков H1, H2, H3 и DIV
В таблице указаны только размеры заголовков. Начертания и цвет всегда индивидуально рассмариваеться при верствке Zero-блока
7. Проверка адаптивов на разных устройствах
На этом этапе выявляется большинство проблем с версткой, если таковые имеются.
У браузера Google Chrome есть мощный набор инструментов — DevTools. С его помощью можно проверить адаптивность сайта.
Для этого нужно открыть нужный сайт, выбрать в меню «Дополнительные инструменты → Инструменты разработчика» и нажать на кнопку «Toggle device toolbar» в левом верхнем углу.
Либо вызвать нужное окно комбинацией клавиш Ctrl+Shift+I → нажать на кнопку «Toggle device toolbar».
У браузера Google Chrome есть мощный набор инструментов — DevTools. С его помощью можно проверить адаптивность сайта.
Для этого нужно открыть нужный сайт, выбрать в меню «Дополнительные инструменты → Инструменты разработчика» и нажать на кнопку «Toggle device toolbar» в левом верхнем углу.
Либо вызвать нужное окно комбинацией клавиш Ctrl+Shift+I → нажать на кнопку «Toggle device toolbar».
У Google также есть специальный инструмент, чтобы проверить оптимизацию сайта для мобильных устройств — Маяк (Lighthouse).
Нужно открыть сайт, вызвать в меню «Инструменты разработчика» и открыть Lighthouse. Маяк даст ответ, насколько оптимизирована страница и проведет аудит 4-х основных показателей: производительность, доступность, прогрессивность веб-приложений, SEO.
Нужно открыть сайт, вызвать в меню «Инструменты разработчика» и открыть Lighthouse. Маяк даст ответ, насколько оптимизирована страница и проведет аудит 4-х основных показателей: производительность, доступность, прогрессивность веб-приложений, SEO.
8. Облегчение картинок и видео
Очень важно при верстке Zero-блока не перегружать страницу. Если фото весит более 3 Мб, его стоит сжать. Иногда бывает, что фото с расширением 7680×4320, в этом случае лучше всего уменьшить в пикселях, а затем сжать. Мы тем самым снизим размер картинки более чем в 6−8 раз, иногда это бывает с 10Мб до 400−800 Кб.
Григорий
Руководитель студии NO-code
Оставьте заявку на бесплатную консультацию
Заполните форму ниже
и получите бесплатную консультацию
и получите бесплатную консультацию
Нажимая на кнопку «Получить» вы соглашаетесь на обработку персональных данных
И мы в течеине 15 минут перезвоним