The Bubble Visual Editor is based on the What You See Is What You Get (WYSIWYG) principle. You can position elements where you want, down to the pixel, and your app will look like that in run mode. There are a few key concepts to keep in mind when you are building an interface.
Some elements can be containers (found in the container section of the New Element palette), and all elements in Bubble belong to a parent. The page itself is the top parent, and all elements on the page will have the page as their parent. To draw an element inside a container, move your mouse over the container, and you'll notice the borders turn red. Once an element is inside a container, its behavior will follow the parent's behavior, both in edit and run mode. For instance, if you move an element in the editor, the children will stay at the same place relative to their parent. In run mode, if you hide a parent, any element inside the container will be hidden as well and, if you show a parent, any element inside it will become visible too. Dragging an element lets you change its parent.
The Elements Tree on the left lets you see the structure of your page, and also show/hide elements to better edit and organize them. Many elements will be hidden by default, and you will be able to access them clicking on the eye icon (this will show all parent elements that are also hidden, if necessary).
The Element Tree has two modes. You can either decide to show all elements on the page in a tree view, with parents and children, or only show hideable elements. Hideable elements are elements that are hidden on page load (from which you have unchecked the box 'This is element is visible on page load'). In other words, you will only see these elements in the list when the option 'only show hideable elements' is checked. This is a useful feature when editing a page because it lets you quickly show elements that aren't visible for editing purposes, while the other mode is useful to get a full view of the page.
Elements in Bubble are positioned absolutely, using coordinates (X, Y) that position the element relative to its parent. That way, you have full freedom to position elements wherever you want on the page. This is different from many visual HTML/CSS editors that constrain you to position elements inside some boxes on the page. While it offers more freedom, it also means you need to be careful to have a clean design, and will need to understand Bubble's responsive page settings.
Bubble pages are responsive. In other words, they will adjust to the width of the page so that they look great on mobile devices. Since you can position elements to the pixel, you may have to configure a few settings for your page to behave properly as its width changes. This is covered in the Building Responsive Pages section.
You add a new element on the page by clicking the type of element you want to add on the visual element panel on the left-hand side (the New Element Palette), and then drawing that element on the page (do not drag the element from the palette to the page). Once an element is drawn on the page, you can move it by dragging it around, and edit its properties by double-clicking on it. With a few exceptions, most elements are draggable and resizable; Popups are modal containers that appear on the top of the page, and are always centered on the page. Therefore, they are not draggable.
When you double click on an element, it reveals the Property Editor, which lets you modify the element fields. This manual does not cover every element and the different use cases and fields that apply to them. Please use the Element Section of the reference to get information on every element type.
While each element has its own fields (for instance, input elements have placeholder colors), most Bubble elements have some shared styling properties. These properties can be used to change the background, borders, shadows, font style, etc. You can see a description of each property in the relevant section of the reference.
Most of these general properties will be modifiable in the Styles tab. Styles let you define some shared visual properties for elements of a given type, and will be covered in a section of this chapter.
The Element Section of the reference covers each element type. However, there are a few main categories. Elements in Bubble are classified in three different categories: Visual elements, Containers, and Input forms.
- Visual elements are elements that display some information, or UI elements that users can interact with by clicking. However, users will usually not be able to type any information into them.
- Containers are elements that contain other elements, in the way described above. Their visibility will impact the visibility of their children, and they can have a defined type of content (see the relevant section of the Working with data chapter).
- Input forms are elements where users can enter information. The most common case will be an input form where one can type some text, but other examples include sliders, file upload elements, checkboxes, etc.
Reusable elements are a way to create groups of elements that can be used in more than one page. This concept will be covered in greater detail in the relevant section of the Structuring an Application chapter, but here is how you can use them when you're building your page:
If you want to access a sign-in popup from many pages, you will want to build it only once and reuse it. Similarly, if you want a footer and header that are uniform across pages, you should only build them once. You should, as much as you can, build elements as reusable elements, as it will make the app lighter and easier to maintain. Once a reusable element has been built, it will become another type of element that you can add to your page.