Блог дизайнера · Tilda

Собираю в Zero Block четыре виджета с учётом последних обновлений Tilda: кнопки мессенджеров, интерактивную карту, меню-гамбургер с картинками и мобильное меню для магазина. И объясняю, зачем нужна каждая настройка.

Виджет — это Zero Block, закреплённый поверх сайта: кнопки мессенджеров, карта, меню. В отличие от готовых блоков, его можно сделать под стиль конкретного сайта и с любой анимацией.

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

Сайт авторских экспедиций, на котором собирались виджеты

Кнопки собираются из круглых шейпов 60×60 px с иконками. Иконки удобно брать на Flaticon: там их можно сразу перекрасить в нужный цвет перед скачиванием. Для сайта туров главная кнопка — Telegram: именно туда люди пишут с запросом на путешествие.

В разделе Link каждой кнопки ставьте открытие в новой вкладке и rel="nofollow": это ссылки на сторонние сервисы.

Кнопки мессенджеров из круглых шейпов в редакторе Zero Block

Position fixed. Чтобы виджет висел поверх страницы, в настройках Zero Block включите Position: Fixed и выберите привязку — к верху или низу окна. Забыть про эту настройку — самая частая ошибка: после публикации меню или виджет просто стоит посреди страницы.

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

Pointer-events. Если у элемента стоит none, клик проходит сквозь него. Так декоративные подложки и подписи не перехватывают нажатие на кнопку под ними.

Иконки виджета на полотне Zero Block

Для офлайн-бизнеса карта очень важна. На сайте московского ресторана в правом нижнем углу есть виджет: Telegram, телефон и локация. По клику на локацию выезжает карта, которую можно покрутить и закрыть.

Виджет с локацией на сайте ресторана

Карту с подложкой и кнопкой закрытия прячем за краем экрана и задаём анимацию On click: за 0,3 секунды с плавным изингом. Проверьте, чтобы кнопка закрытия не наезжала на интерфейс карты, а виджеты не мешали друг другу.

Карта и подложка в редакторе: анимация по клику

Настройка Autoscale to window width растягивает Grid container до ширины окна — именно до ширины, а не высоты. Для виджетов и меню важно понимать, что все элементы тоже будут немного увеличиваться: шрифт 12 px на большом мониторе станет крупнее.

Работайте с сайтом по единой сетке: тогда гамбургер, пункты меню и виджеты встанут ровно по направляющим. Как выводить в Zero Block целые списки данных, я рассказываю в инструкции по Потокам 2.0.

Панель меню делаем из шейпа с тем же скруглением, что и на сайте, и собираем анимацию On click: за 0,3 секунды она выезжает по нажатию на гамбургер. Все части меню объединяем в группу (Cmd/Ctrl + G), делаем её объектом и задаём пошаговую анимацию сразу всей группе.

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

Панель меню с картинками в редакторе

Чтобы меню не сливалось с сайтом, добавьте фон: чёрный шейп за пределами экрана, прозрачность около 20% и эффект Background Blur в районе 7. По клику на те же элементы он выезжает вместе с меню — анимацию можно просто скопировать.

В само меню можно добавить декоративные элементы с анимацией при появлении на экране: так оно выглядит живым, а не шаблонным.

Полупрозрачный фон с размытием под меню

В магазине на телефоне нужно всего несколько пунктов, и первый из них — корзина. Панель внизу экрана с кнопками «Меню» и «Корзина» удобна для большого пальца. У подписей под иконками ставим pointer-events: none, а диапазон видимости блока — до 480 px, чтобы панель была только на телефонах.

Проверка мобильного меню магазина после публикации

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

Меню магазина с анимацией выезда справа

Почему виджет в Zero Block не закрепляется при скролле?
Скорее всего, в настройках блока не включён Position: Fixed. Включите его и выберите привязку к верху или низу окна.

Что делает pointer-events: none?
Клик проходит сквозь элемент. Это нужно для декоративных подложек и подписей, чтобы они не перехватывали нажатие на кнопку.

Как сделать меню, которое видно только на телефоне?
В настройках Zero Block задайте диапазон видимости на устройствах, например до 480 px.

Как сделать выезжающее меню?
Соберите панель за краем экрана, объедините в группу, сделайте объектом и задайте пошаговую анимацию On click на иконку гамбургера.

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

Хотите делать такие сайты сами?

Базу Tilda, Zero Block и автолейаут можно освоить на моём курсе. А если времени нет — сделаю сайт за вас.