Гранд Базар

Логотип Дизайн Вёрстка Кастомизация JS

Итоги года в восточном стиле

15.09.2026

Grand Bazaar для Selecty: как мы превратили Tilda в цифровую сценографию события

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

С Grand Bazaar задача была другой.

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

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

Получился проект на стыке веб-дизайна, digital-сценографии и кастомной frontend-разработки.

Задача

Для Selecty нужно было создать лендинг корпоративного мероприятия Grand Bazaar.

Страница должна была решать сразу несколько задач:

— презентовать концепцию мероприятия;

— передавать атмосферу ещё до офлайн-события;

— последовательно раскрывать программу вечера;

— рассказывать о тематических станциях и активностях;

— работать как полноценная страница мероприятия, а не просто информационная афиша;

— одинаково убедительно выглядеть на большом экране и смартфоне.

Основным техническим ограничением была платформа.

Проект собирался на Tilda, но визуально не должен был выглядеть как типичный Tilda-лендинг.

Концепция: сайт как пространство мероприятия

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

Grand Bazaar должен был ощущаться как отдельный мир.

Поэтому композиция строилась слоями.

Фотографии, персидские ковры, золотые рамки, растительность, текстуры, маски, фонари и мелкие декоративные элементы не существовали сами по себе. Вместе они создавали визуальную глубину и ощущение театральной декорации.

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

При этом одной из главных задач было не перейти грань между атмосферностью и визуальным шумом.

В подобных проектах очень легко добавить слишком много декора.

Поэтому часть элементов приходилось убирать, упрощать или перераспределять, чтобы текст и структура страницы оставались читаемыми.

Не один фон, а целая система графики

Для лендинга была создана большая библиотека отдельных элементов.

Часть графики использовалась непосредственно внутри композиции, часть — как фоновые слои, а некоторые элементы подготавливались отдельно с прозрачным фоном, чтобы их можно было свободно перемещать внутри Zero Block.

Например:

— декоративные рамки;

— растительность для левой и правой стороны композиции;

— персидские ковры;

— маски;

— фонари;

— золотые декоративные элементы;

— текстурные изображения;

— отдельные фоновые сцены для разных секций.

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

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

Первый экран

Первый экран должен был сразу задавать настроение проекта.

Вместо стандартного hero-блока с фоном и текстом мы построили многослойную композицию.

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

Декоративные элементы поэтому работали скорее как окружение основного контента, а не конкурировали с ним.

Отдельное внимание уделили тому, как композиция ведёт пользователя дальше по странице.

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

Блоки мероприятия как отдельные сцены

Дальше структура сайта строилась по тому же принципу.

Каждый значимый раздел получал собственную композицию.

Например, для блока со станциями мероприятия была разработана отдельная визуальная система.

Одним из центральных элементов стала маска, которую пришлось несколько раз перерабатывать. В итоге она превратилась в камеру с фотографиями.

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

Когда обычный background-attachment: fixed не работает

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

На десктопе нужный эффект реализовывался достаточно просто.

Но мобильные браузеры — особенно Safari — обрабатывают фиксированные фоновые изображения иначе. Стандартное background-attachment: fixed либо работает нестабильно, либо вообще отключается.

Для нескольких блоков Grand Bazaar нам было важно сохранить ощущение неподвижного фонового пространства, поверх которого движется контент.

Стандартными средствами Tilda получить необходимый эффект не удалось.

Поэтому решение пришлось переносить непосредственно на внутреннюю структуру Zero Block.

Вместо работы с самим блоком мы работали с:

.t396__carrier

и отдельно управляли поведением фонового слоя.

Для нужных секций была задана увеличенная высота carrier-элемента — около 2000px.

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

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

Адаптив — не уменьшенная версия десктопа

Большое количество декоративных объектов сделало адаптацию проекта отдельной задачей.

Просто пропорционально уменьшить десктопную композицию было невозможно.

На небольшом экране:

— элементы начинали перекрывать текст;

— декоративные объекты становились слишком мелкими;

— фон терял глубину;

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

Поэтому мобильная версия фактически собиралась как самостоятельная композиция.

Некоторые элементы меняли положение.

Другие уменьшались непропорционально.

Часть декора полностью исчезала.

А наиболее важные элементы, наоборот, становились крупнее относительно экрана.

Так удалось сохранить характер Grand Bazaar, не пытаясь буквально перенести десктоп на смартфон.

Почему мы не сделали всё одной картинкой

Технически можно было собрать каждую секцию в Photoshop и загрузить её на сайт единой фоновой картинкой.

Это сильно упростило бы разработку.

Но одновременно появились бы другие проблемы:

— плохая адаптивность;

— огромные изображения;

— сложности с изменением текста;

— невозможность независимо перемещать элементы;

— потеря качества на разных экранах;

— ограниченные возможности дальнейшей анимации.

Поэтому большая часть оформления была разбита на независимые объекты.

Это потребовало больше работы на старте, зато дало значительно больше свободы при адаптации и дальнейшем развитии страницы.

Tilda как основа, а не ограничение

В Grand Bazaar мы использовали Tilda скорее как инфраструктуру проекта.

Zero Block отвечал за базовую раскладку, управление контентом и адаптивы.

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

Использовались:

— кастомные CSS-стили;

— работа с внутренними элементами Tilda;

— нестандартное позиционирование фонов;

— отдельные графические слои;

— адаптивные композиции;

— собственные декоративные ассеты.

В результате пользователь видит цельный визуальный продукт и не должен понимать, на какой платформе он собран.

Для нас это и есть правильный подход к работе с no-code: использовать скорость платформы там, где это удобно, и дописывать собственную логику там, где стандартных возможностей уже недостаточно.

Что получилось

В результате Grand Bazaar стал не просто страницей корпоративного мероприятия.

Получилась полноценная digital-среда со своей визуальной системой.

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

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

Это позволило совместить удобство управления контентом с практически неограниченной визуальной кастомизацией.

Что было сделано

В рамках проекта мы:

— разработали визуальную концепцию лендинга;

— собрали многоуровневые композиции для разных экранов;

— создали и подготовили отдельные декоративные ассеты;

— реализовали сайт в Zero Block;

— разработали собственные CSS-доработки;

— адаптировали сложные композиции под мобильные устройства;

— реализовали нестандартное поведение фоновых изображений;

— обошли ограничения мобильных браузеров и Tilda;

— оптимизировали количество и расположение декоративных элементов;

— сохранили визуальную целостность проекта на разных разрешениях.

Главное

Иногда задача сайта мероприятия — не просто сообщить пользователю дату и программу.

Он может стать первой частью самого события.

В Grand Bazaar мы старались добиться именно этого: перенести атмосферу будущего вечера в браузер ещё до того, как гости окажутся на площадке.

И одновременно показать, что даже внутри Tilda можно создавать проекты, которые совсем не похожи на шаблонные страницы конструктора.

{{title}}