Библиотека компонентов Bubble.io

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

С подобными компонентами вы могли работать в конструкторе Tilda: там они называются блоки. Похожие блоки придумал себе и Bubble, чтобы помочь с созданием UI цифрового продукта и ускорить разработку.

Попасть в библиотеку компонентов-блоков в Bubble.io можно по клику на кнопку «Components» с иконкой куба в верхней панели справа.

Вот что там есть:

По сравнению с той же Tilda вариантов немного — но верим, что это самое начало. Цитируем статью о библиотеке компонентов из блога бабла.

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

Открываем библиотеку компонентов. Начнём с создания хедэра. Берём в библиотеке компонентов хедэр, перетаскиваем его в рабочую область и устанавливаем наверху страницы. По умолчанию в шапке стоит логотип, ссылки в меню на другие страницы и части лендинга, кнопки для регистрации и бургер-меню.

Помянем логотип на свой, язык — с английского на русский, передвинем бургер-меню вправо, поменяем цвет. Используем красно-бордовой цвет 2023 года от Pantone (его код #BB2649).

Работать с компонентами из библиотеки удобно — там уже настроена адаптивность, и настройки эти сохраняются, если что-то меняется внутри компонента. То есть, если удалить лого — то хедэр схлопнется, и меню со ссылками сдвинется влево. Аналогично работают Auto Layuot в Figma.

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

Следом сделаем стартовый экран — с заголовком, призывом к действию и кнопкой. Опять надо только заменить шрифты, цвет — и поработать с отступами внутри контейнера. Для этого кликнем на контейнер, зайдём во вкладку Layout и поправим для каждого элемента отступы и расстояния — margins, padding, gaps.

Дальше по законам построения лендинга идёт экран с преимуществами продукта, которому посвящён лендинг. Такой компонент в библиотеке бабла есть!

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

Меняем картинки и закругления у них, прописываем тексты с преимуществами. Внутри изменим отступы между элементами, уменьшим отступ до главного заголовка. А потом, чтобы уменьшить объём пустого пространства, зайдём в настройки компонента Layout и поменяем параметр Н — размер компонента по высоте.

Если есть сомнения — проверяйте в режиме Preview.

Аналогично сделаем раздел «Как мы работаем» — тут можно скопировать предыдущий компонент и заменить тексты и картинки на новые.

Футер берём минималистичный, настраиваем внутри иконки и копирайт — всё!

Лендинг городской библиотеки готов! Можно ещё настроить изменение цвета кнопок на Hover — то есть при наведении. А чтобы лендинг получился и заработал, можно настроить логику регистрации для получения читательского билета.

Вот, что у нас получилось. Посмотреть лендинг посмотреть можно тут.

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