Design tab (Legacy)

This core reference entry covers a depricated subject, and is only visible to apps on older plans. Please see the entry below for updated information.

Reference: 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.

For more information to get started, see the "Building a user interface" guide.

UI Builder

The UI Builder subtab is where you can add new elements to the page and modify any existing elements. Bubble is generally 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, though there are many features to help you design your app exactly how you want it.

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.

Elements Tree

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 top-down ordering of the elements tree corresponds to the vertical positioning of elements on the page (note: not the z-ordering). Greyed out items in the list are currently hidden; you can click on these in the elements tree to make them visible and select them.

Element palette

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.

Element Inspector

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.

Responsive

You can switch the Design tab to the Responsive sub-tab. This is where you control the responsive settings of the page and all the elements within. Responsive settings refer to the configuration of how the page is displayed on varying screen widths - how the layout 'responds' to changing widths.

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.