С инструментами zero-code можно создавать многостраничные сервисы и даже мобильные приложения. Но если в разработке сложных штук визуальные редакторы ещё конкурируют с кастомным кодом, для лендингов zero-code — почти всегда оптимальное решение. В продвинутых программах — Webflow или Bubble — можно делать посадочные страницы любой сложности. Для заказчика это будет в разы быстрее и дешевле, чем работа программиста.

Лендинги делают не только для рекламных акций и спецпроектов. Они могут служить основным веб-ресурсом для малого и среднего бизнеса. Мы разберём именно такой сайт, разработанный Денисом Быковым на Bubble.

Денис начал изучать зерокодинг на последнем курсе вуза, записавшись в буткемп. У разработчика уже был опыт программирования на JavaScript, но его заинтересовал Bubble — ведь зачем много кодить, когда можно оптимизировать работу. Денис начинал с отдельных заказов, а теперь работает зерокодером в штате британской компании TheUpstarters. Но мы посмотрим на один из его фрилансерских проектов — сайт бренда бытовой химии Lammi.

Задачи

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

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

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

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

Удобный лендинг с оригинальным дизайном

Сайт состоит из 5 разделов: описание компании, продукция, магазины, отзывы и контакты. По мере повествования пользователю предлагают много ссылок: на конкретные посты в соцсетях Lammi, а также на Ozon и Wildberries — для покупки чистящих средств.

На главной странице представлены разные линейки средств

Посмотреть лендинг целиком можно по ссылке. А мы остановимся на нескольких технически интересных моментах.

Плагины

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

1. Page Loader

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

2. Яндекс.Метрика

Это плагин, без которого бизнесу никуда. Он позволяет следить за поведением пользователей по разным показателям. Так в Lammi будут понимать, откуда люди приходят на лендинг, сколько времени на нём проводят, какими продуктами интересуются.

3. Toolbox

Этот инструмент нужен, чтобы добавить в zero-code немного программирования на JavaScript. Такая потребность иногда есть: можно восполнить недостающие функции визуального редактора и не быть зажатым в рамки.

Немного кода

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

В мобильной версии удобная карусель с товарами

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

Вот так выглядит фрагмент кода на Bubble

Также с помощью программирования Денис реализовал интерактивная анимация в мобильной и десктопной версии лендинга. Карточки с товарами и отзывами, фотографии продуктов и кнопки приходят в движение, если на них навести курсор мыши или нажать пальцем на смартфоне. Этот эффект оживляет лендинг и вовлекает аудиторию. Для создания анимации использовали html и CSS.

Не нужно бояться интегрировать код в визуальные редакторы — это под силу даже новичкам. Для анимаций и многих других распространённых эффектов можно найти готовые скрипты — например, на Github. Достаточно их скопировать и вставить. А если хочется делать что-то уникальное, достаточно на базовом уровне вникнуть в JavaScript, html и CSS — это не займёт много времени.

Интеграция с Telegram-ботом и звонки

Люди всё больше общаются не по электронной почте, а в мессенджерах — поэтому форму обратной связи решено было привязать к Telegram-боту. Форма единая и для клиентов, и для потенциальных поставщиков.

Контактная информация размещена в конце лендинга

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

На Bubble процесс создания формы заявки выглядит так

Для тех, кто предпочитает звонки, указан номер телефона. При клике на него можно автоматически начать звонок — клиентам не придется копировать и вставлять никаких цифр.

Настройки формы обратной связи и звонков легко сделать в Bubble — без каких-либо сторонних плагинов. Разработчик выстраивает логику, чтобы нажатие на иконку соцсети вело в аккаунт Lammi, а при нажатии на телефонный номер пользователь мог позвонить в один клик. Так выглядит настройка опций для обратной связи изнутри.

Так выглядит настройка опций для обратной связи изнутри

Результат

Разработка зерокод позволила решить все задачи бизнеса: увлекательно рассказать аудитории о продукте, привести ссылки на соцсети и организовать обратную связь. Кодом прописано только несколько строчек, и то без этого можно было обойтись: весь функционал реализован на Bubble, а программирование лишь усилило визуальный дизайн. Денис разрабатывает подобные одностраничники на фрилансе за 50-60 тысяч рублей.

Освойте Bubble и научитесь делать не только лендинги, но и полноценные веб-приложения и выйти на чеки 150-300 тыс. руб. за проект на курсе «Зерокодер на Bubble» в Университете зерокодинга.