The Basics (Legacy)
This page covers educational material relevant to the Legacy Bubble Editor.
Last updated
This page covers educational material relevant to the Legacy Bubble Editor.
Last updated
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. These are the basics 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.
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. 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.
You can edit the name of your element in the top of its Property Editor. Select the existing name and start typing. Conventions for naming your elements is entirely up to you. For example, you could simplify each element name and write what it does next to it, such as “btn submit," or you could capitalize the first word all together or use underscores. Whichever convention you pick, make sure to use it throughout your app. The consistency will help you locate your elements and debug your design as your app grows.
By default, Bubble names new elements by its type. If we add a button, Bubble will name it "Button A" if there are no other buttons on the page, or "Button B" if there is a button already. If you change the contents of that element to include text, Bubble will take that text and change the name of the element for you. For example, if we change this button's text to "Submit," the name will update to "Button Submit." You might have several "Submit" buttons throughout your application, so it's a good practice to name your elements as you go along so that you can keep track of each.
There are three main types of elements: 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. Their visibility will impact the visibility of their children, and they can have a defined type of content.
Input forms are elements where users can enter information. The most common case will be an input form where one can type some text.
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. Most of these general properties will be modifiable in the Styles tab too.
