![]() ![]() The Element Section of the reference covers each element type. Styles let you define some shared visual properties for elements of a given type, and will be covered in a section of this chapter. Most of these general properties will be modifiable in the Styles tab. You can see a description of each property in the relevant section of the reference. These properties can be used to change the background, borders, shadows, font style, etc. While each element has its own fields (for instance, input elements have placeholder colors), most Bubble elements have some shared styling properties. Please use the Element Section of the reference to get information on every element type. This manual does not cover every element and the different use cases and fields that apply to them. When you double click on an element, it reveals the Property Editor, which lets you modify the element fields. 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. 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. 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). This is covered in the Building Responsive Pages section. 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. In other words, they will adjust to the width of the page so that they look great on mobile devices. Responsive designīubble pages are responsive. ![]() 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. ![]() This is different from many visual HTML/CSS editors that constrain you to position elements inside some boxes on the page. That way, you have full freedom to position elements wherever you want on the page. Absolute positioningĮlements in Bubble are positioned absolutely, using coordinates (X, Y) that position the element relative to its parent. 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. In other words, you will only see these elements in the list when the option 'only show hideable elements' is checked. 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'). You can either decide to show all elements on the page in a tree view, with parents and children, or only show hideable elements. 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 Elements Tree on the left lets you see the structure of your page, and also show/hide elements to better edit and organize them. Dragging an element lets you change its 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. For instance, if you move an element in the editor, the children will stay at the same place relative to their parent. Once an element is inside a container, its behavior will follow the parent's behavior, both in edit and run mode. To draw an element inside a container, move your mouse over the container, and you'll notice the borders turn red. The page itself is the top parent, and all elements on the page will have the page as their parent. Some elements can be containers (found in the container section of the New Element palette), and all elements in Bubble belong to a parent. There are a few key concepts to keep in mind when you are building an interface. ![]() You can position elements where you want, down to the pixel, and your app will look like that in run mode. The Bubble Visual Editor is based on the What You See Is What You Get (WYSIWYG) principle. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |