Top & Context Menu Options
Undo the last change. You can undo all changes made since the last page load.
Redo an undo change.
Edits the current selection, e.g., element, action, event.
Navigates the design editor to edit the currently selected reusable element.
Edits the current page.
Deletes the current selection, e.g., element, action, event, style.
This action replaces an element/action/event by another element/action/event of a different type. For example, change an element from a checkbox to a toggle or from a group to a popup.
Note: This operation may lead to inconsistencies if the data type changes and a different input is needed. Review the Issue checker to ensure no issues were introduced. Undo this change, if necessary.
This option takes a group of elements and converts them into a reusable element.
This option takes a reusable element and converts them to a group that contains the same elements and workflows as the original reusable element.
The Detach reusable element function comes with a few limitations:
- Once a reusable element that contains a workflow event is detached from a repeating group cell, the workflow belongs to the page and cannot reference a specific cell's data. This limitation applies specifically to workflow events that are not attached to an element, such as "Do every 5 seconds" as opposed to "When button is clicked," in a reusable element within a repeating group cell.
- Once a reusable element containing a popup, group focus, or floating group is detached within a repeating group cell, any data that is inherited from the repeating group cell will not be automatically passed to the detached container since they are now a part of the page. A workflow will need to be set up specifically to send the data to the detached group.
- If a reusable element within a repeating group cell contains a group focus, and the group focus references an element within the reusable element, detaching the reusable element will result in the group focus being unable to reference the element within the repeating group cell, since the container is now a part of the page.
- If a reusable element inside a repeating group cell that includes an element linked to an action to display a group focus is detached, the action will lose its reference to the group focus and no longer be able to display it.
Our Academy quick tip on how to group elements together
This option takes the selected elements and creates a new group. You can choose with container layout type you'd like to group the elements in. The options are as follows:
Our Academy quick tip on how to ungroup elements
This option moves the elements outside of the group that contains them, leaving the elements in the same position. This does not delete the group container, so delete it if no longer needed.
Creates a new page from a blank template or by cloning an existing page.
Creates a new page with the same elements/actions/events as the original page.
Our Academy quick tip on how to set a new index page
This function replaces the app's existing index and uses the current page as the new index. An index page cannot be deleted, so use this option to replace it. The previous page will be renamed old_index.
Creates a new reusable element. Choose an existing element or clone a reusable element.
Creates a new reusable element with the current element's properties.
This page is for editing the different backend workflows used in the app - the common characteristic of all backend workflows is that they run on the server, i.e. they are not tied to a specific page of the app. There are three types of backend workflows you can define:
- API workflows: a general workflow that can be initiated from elsewhere in the app or via the Workflow API (see Workflow API)
- Database change trigger: a workflow that runs when any change of any thing of a specified data type happens (see Trigger Event)
Cuts the current selection, e.g., element, action, event, style.
Copies the current selection, e.g., element, action, event, style.
Pastes the current clipboard onto the current page. If the pasted element came from a different page or a different app, relative references to elements on the initial page will be removed.
Copies the current selection and pastes it onto the current page.
Selects all the elements on the page.
Selections the immediate parent of the selected element. This is convenient when an element is contained by a group with the same dimensions.
Copies the selected elements and the associated workflows.
Pastes the elements and the associated workflows from the clipboard. If the pasted element came from a different page or app, relative references to elements on the initial page will be removed.
Copies the design options of the current selection.
Pastes the design options from the clipboard.
Copies the style of the current selection.
Pastes the design options from the clipboard. The style itself is also copied.
Copies the layout settings of the selected element.
Applies the layout settings from the clipboard to the selected element. A full list of settings that can be copied and pasted is included below.
Note: Not all elements have compatible layout settings. When the elements are incompatible, this option will be disabled in the menu. Below are instances where element layout settings are not compatible:
- Visual Elements and Containers
- Form Inputs and Containers
- Elements with different parent container layout types
Global
- Make this element fixed width
- min width
- max width
- fit width to content
- Make this element fixed height
- min height
- max height
- fit height to content
- Padding
- Margin
Specific to Row Parent
- Vertical Alignment
Specific to Column parent
- Horizontal Alignment
Specific to Align to Parent parent
- Nonant
Specific to Container
- Container Layout Type
- Container Alignment
- Row gap
- Column Gap
Layout Settings that cannot be copied pasted
- Order (Row & Column)
Copies all conditional expressions of the currently selected element.
Pastes all the conditional expressions from the clipboard.
This function copies a condition of an element (when editing it in the Property Editor). It can then be pasted for the same element or another element.
This function pastes a condition to an element.
This function copies a dynamic expression that was built with the Composer.
This function pastes a dynamic expression from the clipboard. Access it when editing an expression, even if it is empty.
This clears the dynamic expression.
This function pastes a text dynamic expression from the clipboard and appends it before the currently edited expression.
This function pastes a text dynamic expression from the clipboard and appends it after the currently edited expression.
This function copies the selected element(s) or reusable element(s) so that it can then be pasted into another app. It includes associated data such as styles, font/color variables, and reusable definitions across the apps.
When copying reusable elements:
- All elements within the reusable elements, as well as associated styles, will be copied.
- If the reusable uses default default font or color variables they will take on the properties of the second app
- If the reusable element contains one or more reusable element, they'll be inserted as standard elements, not as reusable ones
Clears the entire dynamic and text expression.
Moves an element to the forefront.
Moves an element behind all other elements.
Make all direct children visible in the editor.
Make all direct children invisible in the editor.
Delete recursively all children in an element.
Our Academy quick tip on how to center elements
Centers an element horizontally relative to the group that contains it or to the page.
Centers an element vertically relative to the group that contains it or to the page.
When applied to several elements, this option arranges all the elements so that the left borders line up.
When applied to several elements, this option arranges all the elements so that their horizontal centers line up.
When applied to several elements, this option arranges all the elements so that the right borders line up.
When applied to several elements, this option arranges all the elements so that the top borders line up.
When applied to several elements, this option arranges all the elements so that their vertical centers line up.
When applied to several elements, this option arranges all the elements so that the bottom borders line up.
When applied to several elements, this option ensures that the horizontal space between the elements is equal.
When applied to several elements, this option ensures that the vertical space between the elements is equal.
Our Academy quick tip on how to swap element positions
Swaps the positions of two elements.
This option shows where the element is in the Elements tree box, which is located in the Palette.
Use this function to either create a workflow or display the existing workflow for the selected element.
Inserts an action before the action you're currently editing.
Use this function to see which element is used by the selected event or action.
Shows the action a dynamic expression is referring to.
For new users, a short video is shown the first time you draw each type of new element. Click here to disable this feature.
Show less options in the Property Editor for visibility and clarity purposes.
Add a gift icon to your toolbar to stay up to date on new features and fixes that we add to Bubble. Clicking here opens a popup that lists the changes since the last time you visited the application editor.
Open a popup that lists keyboard shortcuts for common actions, such as CTRL+P to preview your application just like you had clicked on Preview in the toolbar.
A link to our educational library, including video courses, tutorials, and quick tips.
A link to our online community, where many expert Bubble users spend time helping other users out.
Watch our Academy quick tip on what to include in a bug report
A link to a bug report form, where you can share steps for our team to reproduce and investigate an unexpected behavior on Bubble.
Customize a grid on the background of your page to help with your design. Choose the grid's color, step size, gutter size, and horizontal lines.
Auto-align elements to the edges of other elements, for example, to make sure two buttons are left-aligned.
Auto-align elements to the edges of the grid on your page, for example, if you wanted to design your page in thirds.
Auto-align elements to each other and columns or rows within you grid.
Manually position elements only, without preference for the edges of other elements or alignment with the grid.
Add an outline around the edges of your elements when designing in the application editor. Change the color in the View menu to help it stand out.
Cut a column from a table element.
Copy a column's content in a table element.
Copy a table element column along with any associated workflows.
Cut a row from a table element.
Copy the contents of a row in a table element.
Copy a row along with any associated workflows in a table element.
Paste a previously copied column to the right of the current column in a table element.
Paste a previously copied column to the left of the current column in a table element.
Paste a previously copied row above the current row in a table element.
Paste a previously copied row below the current row in a table element.
Paste a previously copied column along with its workflows to the left of the current column in a table element.
Paste a previously copied column along with its workflows to the right of the current column in a table element.
Paste a previously copied row along with its workflows above the current row in a table element.
Paste a previously copied row along with its workflows below the current row in a table element.
Select all cells in a table element.
Add a new column to the left of the current column in a table element.
This action adds a new column to the right of the current column in a table element.
This adds a new row above the current row in a table element.
This action adds a new row below the current row in a table element.
This action allows you to copy the content of a cell in a table element.
This copies the content of a cell along with any associated workflows in a table element.
Last modified 2d ago