Bubble – адаптивный. Продукты, созданные на Bubble, одинаково хорошо смотрятся на компьютере, на планшетах и на мобильных экранах. Но часто у начинающих ноукодеров так не получается. Всё потому, что над адаптивностью надо поработать отдельно – и знать, где и как это делать. В этом тексте на примере настройки простых элементов и простейшего продукта показываем принципы и лайфхаки адаптивного дизайна в Bubble.
В режиме Responsive с помощью серой линейки-ползунка, находящейся над страницей проекта, изменяются размеры экрана. Стандартные размеры экранов находятся на панели инструментов слева – стандартные декстоп, планшет, горизонтальный смартфон, вертикальный смартфон.
На лендинге-примере группы расположены так. Одна основная группа для лендинга. Группа с текстом. Группа с формой и кнопкой. Группа с изображением. Группы в отношении адаптивного дизайна нужны для двух вещей – группировать элементы, не давая расползаться, и настраивать через них на страницах поля, промежутки и расстояния друг от друга.
Тут двигать элементы нельзя. Зато настраивается порядок их отображения. Например, поставить или убрать фиксированную ширину, отцентрировать отображение элементов и увидеть детальную настройку расстояний от полей и промежутки. Как раз для тонкой работы тут и нужна настройка с сеткой – она выделяет каждый элемент и создаёт порядок.
Допустим, есть лендинг, как у нас – текст, картинка, форма с кнопкой. Важнее дать пользователю заполнить форму и нажать кнопку, чем показать картинку. Вы понимаете, что на мобильной версии получится показать что-то одно – картинку или форму с кнопкой.
Допустим, вы хотите другой порядок элементов для лендинга, который будет отображаться в мобильной версии. Сначала картинку, потом форму, потом текст. На второй странице с форматом под мобильную вёрстку всё это можно сделать сразу с учётом размеров мобильного экрана – и не использовать вкладку Responsive.
Учим работать с мобильной версией продуктов на Bubble и настраивать грамотный UI/UX-дизайн на курсе веб-разработки на Bubble.
Хотите узнать больше про No-code и разработку IT-продуктов без кода? Заходите на наш бесплатный вебинар от создательницы университета Code Breakers.