Design tab
This is where you design the visual appearance of the app. Draw elements on the page, drag and resize them, and adjust their properties and appearance. For new users, we recommend starting here.
To add a new element, click an element type in the Palette on the left, then click and drag on the page to insert it. Double-clicking on an element reveals the Property Editor, where you can customize the element's appearance and behavior. Right-clicking on an element displays a drop-down menu with additional editing options.
The UI Builder subtab is where you can add new elements to the page and modify any existing elements. Bubble pages are by default a "what you see is what you get" (WYSIWYG) editing experience - whatever you create in this tab is generally what an end-user of your app will see. Containers and Visual elements also have layout settings, which control a page or element's responsive behavior. When designing responsive pages, your page's layout will scale gracefully as the end user's screen gets larger or smaller.
Your app can have multiple pages, and in fact comes by default with a few pages: the 404 page which end-users see if they visit a URL on your app that doesn't exist, and the reset_pw page which end-users use to reset their passwords. You can create new pages or switch to editing other pages (or reusable elements) via the dropdown in the upper left, in the top bar.
The elements tree shows all the elements that currently exist on the page. Indentation signifies a relationship between a container and the contents of that container - remember that there can be multiple levels of nesting (e.g. groups within groups within ...)
The elements tree also allows you to re-order and re-parent elements on the page by dragging and dropping items where you want them. Elements inside a group are ordered differently depending on the container layout type selected (more below).
- Clicking and holding an element will allow you to drag, and a line will appear to indicate where you will be dropping your element.
- Groups will highlight when hovered to indicate that you are dropping within that group.
- If you hover over a collapsed group for more than one second, it will expand automatically.
- If you drag into a collapsed group, the element will default to be the last child in the list
- Elements can be re-ordered within a parent container.
- Fixed and Align to Parent containers sort their children by ascending z-index. Reordering within a Fixed or Align to Parent will change z-index.
- Row and Column containers sort their children by ascending order. Reordering within a Row or Column will change the order of an element.
- Elements can be moved from one parent container to another.
- Into Fixed: The element that is dropped in will respect z-index and default to top left position.
- Into Align to Parent: The element that is dropped will respect z index and default to top left position.
- Into Row: The element that is dropped will respect the existing order.
- Into Column: The element that is dropped will respect the existing respect order.
- Draggable elements include containers nested within a parent container.
- We have disabled drag and drop for popups, group foci, and floating groups, as they rest above the page and cannot be nested into other groups. You can, however, drag other elements into these containers.
- You may not drag a group into itself.
- For now, you may only drag one element at a time, but the ability to select multiple is planned for the future.
Below the elements tree is the palette of all elements that you have access to for building your app. Bubble comes with many built-in element choices; you can also gain access to new elements via plugins.
The element palette is divided into a couple of sections for organization. Visual elements are ones that generally simply display something on the page. Container elements are elements that can contain other elements, including other containers. Input form elements generally allow the end-user to provide some kind of input, whether it be text, files, or something else.
Below that is the section of reusable elements available in the app. And at the bottom is a section of two special element templates: tab element and signup login form, which are two common user interfaces that might be helpful in your app.
This slidable inspector shows a view of how the selected element is used on the page. Since an element can be used in many different places, such as in events, actions, or other elements, this centralized view is helpful. The Element Inspector shows the element's custom states and allows you to modify, delete, and add a new state. The element's events and actions are also shown along with the other page elements referring to the current element. Clicking on an entry takes you to the appropriate place in the Bubble Editor.
You can switch the Design tab from UI Builder mode to the Responsive sub-tab. Responsive settings refer to the configuration of how the page is displayed on varying screen widths - how the layout 'responds' to changing widths. As such, the Responsive tab allows you to quickly get a sense of how your page layout will respond depending on the screen size without previewing it live.
At the top of the left flyout of this sub-tab, there are shortcuts to snap the page width to different common screen widths, e.g. mobile portrait, mobile landscape, tablet and laptop. You can also change the page width to any arbitrary width using the ruler at the top.
Last modified 4mo ago