Назад к курсу

Приложения и сайты на Bubble с нуля

0% завершено
0/0 шагов
  • Подпишись, чтобы первым получать уведомления о новых статьях и бесплатных курсах!

    Обещаем не спамить!

Модуль 2, Тема 1
В процессе

Вкладка Design: визуальный редактор и элементы

Прогресс модуля
0% завершено

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

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

Давай, например, добавим элемент Текст:

После того, как элемент был добавлен на страницу, появится окно с настройками. Чтобы отредактировать текст, просто добавь его в поле вместо стандартного …edit me…

Кстати, окно с настройками можно вызвать с помощью двойного клика на элементе.

Давай, например, введем слово “Поиск”, а затем добавим поле ввода тем же способом – перетащив элемент Input. Обрати внимание, что Bubble автоматически подсказывает как выровнять элемент один относительно другого. Попробуй разместить элемент Input справа от текста.

Чтобы изменить размер элемента, просто потяни за один из краев его формы.

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

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

Кроме этого, в этом меню можно изменить дизайн повторяющихся элементов (reusable elements), таких как шапка сайта (header), подвал сайта (footer) или, например, окно регистрации пользователей.

Теперь ты знаешь как добавлять элементы на страницы и как создавать страницы своего приложения. Попробуй самостоятельно добавить кнопку (Button), поменять текст на “Искать”, расположить ее справа от окна ввода и выровнять по горизонтали.

Для предпросмотра страницы нажми на кнопку Preview в правом верхнем углу.

Итак, подведем итог – вкладка Дизайн отвечает за внешний вид твоего приложения, т.е. здесь ты строишь фронт-энд. Но пока что все эти формы и кнопки не выполняют никаких функций, и для того, чтобы заставить их работать, мы переместимся на вкладку Workflow.

Комментарии

Ваш адрес email не будет опубликован. Обязательные поля помечены *