С инструментами 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.
Также с помощью программирования Денис реализовал интерактивная анимация в мобильной и десктопной версии лендинга. Карточки с товарами и отзывами, фотографии продуктов и кнопки приходят в движение, если на них навести курсор мыши или нажать пальцем на смартфоне. Этот эффект оживляет лендинг и вовлекает аудиторию. Для создания анимации использовали html и CSS.
Не нужно бояться интегрировать код в визуальные редакторы — это под силу даже новичкам. Для анимаций и многих других распространённых эффектов можно найти готовые скрипты — например, на Github. Достаточно их скопировать и вставить. А если хочется делать что-то уникальное, достаточно на базовом уровне вникнуть в JavaScript, html и CSS — это не займёт много времени.
Интеграция с Telegram-ботом и звонки
Люди всё больше общаются не по электронной почте, а в мессенджерах — поэтому форму обратной связи решено было привязать к Telegram-боту. Форма единая и для клиентов, и для потенциальных поставщиков.
Каждый может написать свой вопрос, а потом сотрудник в Telegram рассмотрит обращение и, при необходимости, направит его коллегам.
Для тех, кто предпочитает звонки, указан номер телефона. При клике на него можно автоматически начать звонок — клиентам не придется копировать и вставлять никаких цифр.
Настройки формы обратной связи и звонков легко сделать в Bubble — без каких-либо сторонних плагинов. Разработчик выстраивает логику, чтобы нажатие на иконку соцсети вело в аккаунт Lammi, а при нажатии на телефонный номер пользователь мог позвонить в один клик. Так выглядит настройка опций для обратной связи изнутри.
Результат
Разработка зерокод позволила решить все задачи бизнеса: увлекательно рассказать аудитории о продукте, привести ссылки на соцсети и организовать обратную связь. Кодом прописано только несколько строчек, и то без этого можно было обойтись: весь функционал реализован на Bubble, а программирование лишь усилило визуальный дизайн. Денис разрабатывает подобные одностраничники на фрилансе за 50-60 тысяч рублей.
Освойте Bubble и научитесь делать не только лендинги, но и полноценные веб-приложения и выйти на чеки 150-300 тыс. руб. за проект на курсе «Зерокодер на Bubble» в Университете зерокодинга.