Comment on page
The page
The page is the blank canvas on which you design your app's user interface.
At the core of everything related to design and user interface in Bubble is the page.
This is the canvas on which you place input elements, text, images, icons, videos and everything else that your users need to make use of your app.
The page gives you a blank canvas on which to build your vision.
No matter what kind of application you want to build, from a simple website to a complex eCommerce platform, the page remains the starting point for all your design and development efforts. You can see the page itself as the lowest level in the hierarchy of a page's structure, where every element you add to it is contained within that page.
A Bubble page is composed of three types of components:
- The page The page is the top-level component of a webpage and is responsible for organizing the groups and elements on the page. The page is the top container for all elements
- Groups: Groups are used to group elements together and control their layout. They can be thought of as "boxes" that hold other elements. They can be styled or they can be invisible to the user and can contain Elements and even other Groups to create a hierarchy. Groups are a major part of your page's design as they determine how your other elements behave. Groups are containers for elements and for sub-groups
- Elements Elements are the actual content that your users see and interact with to work with your app, such as buttons, links, images, icons and input fields. Elements are the things that users interact with on the page
The way in which these components are organized and styled determines the overall layout and design. From a technical viewpoint they make up the page's hierarchy structure.
It helps to see it in a schematic form:
In a way, the hierarchy above is how your browser "sees" the page before rendering the results on the screen.
You can read more about the element hierarchy in the article below:
When you create a new Bubble application, a few pages are included by default. These pages have a few traits in common:
- They are always present when your app is created
- You cannot change their names
- You cannot delete them
The 404 page is where your users are taken if they type in an URL in the URL bar that includes your domain, but the page name they enter doesn't exist:
https://appname.bubbleapps.io/non-existing-page
The 404 is an http error code that is used to tell your browser that the page doesn't exists.
The 404 page can be edited freely just like any other page – but it can't be deleted.
You can use this page to tell your users that the page couldn't be found and point them in another direction.
This is the page to which your users are directed if they need to reset their password. They will most likely follow a link in a reset password email to this page.
The reset_pw page is a special page that lets your users reset their password safely. It's part of Bubble's core functionality and can't be removed or renamed.
The index page is the main page of your application – the first page that will load when a user types in your app's domain in the browser's URL bar. It's also the only page that can be displayed without showing the page's name.
For example, the below URL's would take you to the index page even if you are not including the page's name in the URL:
Version | URL |
|---|---|
Development | https://appname.bubbleapps.io/version-test |
Live | https://appname.bubbleapps.io |
Version | URL |
|---|---|
Development | https://www.mydomain.com/version-test |
Live | https://www.mydomain.com |
If your app has any custom branches set up in version control, the version-test part of the URL is replaced by the ID of the currently active branch.
When you create an app in Bubble, the index page is created automatically. You cannot name another page index, but you can replace it by using the Make this page the new index function.
The old index page will be named old_index.
Every page that you add automatically has a unique URL assigned that your users can access to visit that page, just like any other website. All pages follow the same URL pattern: by combining the root URL of your application with the name of the page:
Version | URL |
|---|---|
Development | https://myapp.bubbleapps.io/version-test/page-name |
Live | https://myapp.bubbleapps.io/page-name |
If you have connected your app to a custom domain, the URL will look like this:
Version | URL |
|---|---|
Development | https://mydomain.com/version-test/page-name |
Live | https://mydomain.com/page-name |
If your app has any custom branches set up in version control, the version-test part of the URL is replaced by the ID of the currently active branch.
To create a new page, click the dropdown in the upper left corner of the Bubble editor, right next to the Bubble logo. In the dropdown, click Add a new page...
You will be asked to provide a name for the new page and whether you want to clone an existing page.
You can give your page any name you want, as long as it's URL safe and unique in this application.
You can create as many pages in your app as long as they have unique names. Keep in mind when naming pages that they need to be URL safe. Any non-URL safe strings you provide will automatically be URL encoded.
A simple rule of thumb for page names is to only use the english letters a-z and numbers 0-9 and replace spaces with dashes. During URL encoding, Bubble will:
- change the text to lowercase
- replace spaces with -
- replace special characters with _
Cloning a page means to create an exact copy of that page under a new name. The entire page, including all elements and workflows will be copied.
There are two ways to clone a page:
By selecting Add new page...
To clone a page, you can use the Add new page... menu item
... or by having the page you want to clone open in the editor and selecting Edit - Clone this page:
You can also clone the page by selecting Clone this page while having the page you want to clone open in the editor.
Regardless of the method you choose, you will be asked to provide a name for the clone and confirm which page to clone in the page dropdown marked below:
Each page can have their own individual settings configured that affects how that page looks and behaves. Settings are available in the Property Editor.
There are two ways to access the page settings:
- 1.Double-click with the left mouse button anywhere on the page itself (avoid clicking on another group or element
- 2.Clicking on the page in the page's element tree:
Using the element tree you can easily access the Property Editor of the page – or any other element.
The page's settings are available in the Property Editor, as illustrated below:
The Appearance tab lets you control the visual properties of the page, such as the background style and colors, as well as what kind of data the page should hold and its SEO metadata.
The Layout tab lets you control the page's responsive properties, or how it's layout is structured and changes across different screen sizes. You can read more about layouts in our guide on responsive design.
The Conditions tab lets you change the Page title and background styling if one or more certain conditions are true. You can read more about this in our article on Conditions.
Pages can be organized into folders in the Bubble editor to make them easier to find.
Organizing pages into folders makes it easier to find the pages you need to open in the editor, but they do not affect the URL or navigation experience of the page in your app.
To move a page into a specific folder, do the following:
- Open the Property Editor for the page by double-clicking anywhere on the page itself (not on another group or element)
- In the Property Editor, navigate to the Appearance tab and scroll to the bottom:
- Pick a folder, or create a new one. You can leave the dropdown blank to remove it from a folder.
You will find all the folders you create in the upper right corner of the page navigator (which is located in the top left corner of the Bubble editor).
Folders let you organize the pages in your app to make them easier to find. Folders do not affect the URL of the page in your Bubble app.
Bubble does not support page folders in your app's URL's. As such, all pages follow the same structure as described above.
All pages are public, meaning that as soon as you have created one, they can be accessed in your app. Keep in mind that changes need to be deployed before they are visible in your live app – this applies to pages too.
If you'd like to keep the elements on a page but not make the page available to your users, you can convert the contents of the page into a reusable element and store them there.
Last modified 2mo ago