The page
The page is the blank canvas on which you design your app's user interface.
Last updated
Was this helpful?
The page is the blank canvas on which you design your app's user interface.
Last updated
Was this helpful?
At the core of everything related to design and user interface in Bubble is the page.
This is the canvas on which you place , text, images, icons, videos and everything else that your users need to make use of your app.
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.
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 index page is the main page of your app (more on that below).
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:
The 404 is an that is used to tell your browser that the page doesn't exists.
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 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:
Development
https://appname.bubbleapps.io/version-test
Live
https://appname.bubbleapps.io
Development
https://www.mydomain.com/version-test
Live
https://www.mydomain.com
If your app has any custom set up in version control, the version-test part of the URL is replaced by the 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:
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:
Development
https://mydomain.com/version-test/page-name
Live
https://mydomain.com/page-name
If your app has any custom set up in version control, the version-test part of the URL is replaced by the 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 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 . Any non-URL safe strings you provide will automatically be .
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 duplicate a page:
By selecting Add new page...
... or by having the page you want to duplicate open in the editor and selecting Edit - Duplicate this page:
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:
Double-click with the left mouse button anywhere on the page itself (avoid clicking on another group or element
Clicking on the page in the page's
For the full list of all the settings for the page, see our page settings core reference.
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 and background styling if one or more certain 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)
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).
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 r and store them there.
To send a user to another page, you can use the Go to page action or the link element.
It helps to see it in a schematic form:
In the Property Editor, navigate to the Appearance tab and scroll to the bottom:
