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

Я стараюсь работать в Zero Block, но есть готовые блоки, которые собирать вручную нет смысла: это дольше, сложнее и иногда нужен код. Рассказываю про десять блоков, которые использую чаще всего, и почему.

Без каталога не обходится ни один интернет-магазин, а из всех вариантов я выбираю тот, где фильтры стоят колонкой слева. В остальных блоках фильтры идут узкой полоской над товарами — их легко проскроллить и потеряться в каталоге. Целую колонку слева мимо не пропустишь, так делают и большинство крупных магазинов.

Блок настраивается на 2, 3 или 4 колонки товаров, растягивается на всю ширину или встаёт в стандартную сетку 1160 px. Единственное, чего не хватает, — карточек с фоном: без него подпись между фото и кнопками иногда непонятно к чему относится. Решение — правильные пропорции фото и достаточные отступы между рядами.

Фильтры отдельной колонкой слева от товаров

Корзина в Tilda одна, и она незаменима. Настроек столько, что я от неё кайфую. Заказ можно оформлять в два этапа: по кнопке «Оформить заказ» открывается полноценное окно для ввода данных — это выглядит профессиональнее простого попапа.

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

Блок корзины на странице в редакторе

Незаменим на многостраничных сайтах. Делаете блок один раз, а на остальных страницах ставите Alias-блок с ID родительского — и он отображается везде без копирования.

Пример: блок контактов внизу каждой страницы. Поменяли телефон в родительском блоке на главной — он обновился на всех страницах, осталось только переопубликовать их. Больше приёмов с Alias-блоками — в статье лайфхаки Tilda.

Alias-блок подтягивает родительский блок по его ID

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

ME403 закрывает около 90% задач: работает с выпадающими многоуровневыми меню, у него настраиваются размеры и прозрачность, его можно закрепить или оставить на месте. Я ставлю его на 60–70% своих сайтов: велосипед изобретать незачем.

ME403 — готовый гамбургер для мобильной версии

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

ME301 умеет превращаться в гамбургер на мобильных, но настроек у него меньше, чем у ME403. Поэтому я ставлю ME301 на десктоп, а на телефоне — ME403. По соседству есть вариант с логотипом по центру, но привычнее, когда логотип в левом верхнем углу и ведёт на главную.

ME301: логотип слева, разделы по центру, контакты справа

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

Почему не большой футер? До него почти никто не долистывает, что подтверждают карты скролла в Яндекс Метрике. Если клиент настаивает на большом футере, я делаю: хуже от этого не станет.

FT102: меню в линию и строка с реквизитами

Самый обычный попап с формой стоит у меня на 80–90% сайтов. Хитрые попапы в Zero Block почти никогда не нужны: от посетителя обычно нужны только имя и телефон.

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

Стандартный попап: имя, телефон и кнопка

Когда товару нужна полноценная отдельная страница — ради кастомного вида или SEO, — я беру ST200. Он встаёт в 12 колонок, а главное — связывается с товаром в каталоге по ID. Текст, цена, артикул, варианты и фото подтягиваются автоматически, а цена при покупке сверяется с каталогом, так что подменить её не получится.

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

Товары в каталоге: отсюда ST200 берёт все данные

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

По прямому назначению он тоже хорош: цены, меню ресторана. Не смущайтесь, что он лежит в разделе «Тарифы и цены»: писать там можно что угодно.

PL310: параметр слева, значение справа

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

Так же с примерами работ. Если их сотни, даже отобранные 30 — это много. Часть блоков прячется, и посетитель не застревает на них, если ему неинтересно. Так устроено и моё портфолио.

Всё остальное — обложки, блоки преимуществ — я делаю в Zero Block: там больше свободы. А эти десять готовых блоков Zero Block не уступают, а часто выигрывают.

Что лучше: готовые блоки или Zero Block?
Для дизайна и адаптива больше возможностей в Zero Block. Но каталог, корзину, гамбургер и попап с формой удобнее брать готовыми.

Какое мобильное меню выбрать в Tilda?
ME403: он работает с многоуровневыми меню и гибко настраивается.

Что такое Alias-блок?
Блок, который показывает родительский блок по его ID на других страницах. Правите один раз — меняется везде.

Можно ли связать отдельную страницу товара с каталогом?
Да, блок ST200 связывается с товаром по ID и подтягивает текст, цену, варианты и фото.

Сколько полей делать в форме?
Обычно хватает имени и телефона. Чем больше полей, тем ниже конверсия.

Больше про магазины — в статье плюсы и минусы магазина на Tilda, а системно разобраться в конструкторе поможет мой курс.

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

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