Page Element
This core reference entry is suited for beginner-level builders.
The Page Element is the fundamental element that contains all the other elements.
Type of content
This property defines the type of thing the page should expect. Once set, you can refer to the Current page thing in the Bubble Editor. A typical use case of this feature is to create a profile page. Set the type of content to 'user,' and in each element of this page, you can refer to the Current page user's email, Current page user's picture, etc. If you set a type of content to a page, all links pointing to that page should define a thing to send.
Time zone selection
Overriding timezones in the backend requires that you activate the advanced setting Enable timezone override controls in your app's general settings.
Reference: Application settings: Advanced
Select a type from this dropdown menu to define the timezone type with which you are parsing data. By default, data will be parsed using the client's timezone (Current User's current timezone). If needed, you can override this setting by selecting a static timezone as an alternative.
Backup field for readable URL
This page represents a thing of the type defined as Type of content.
If the current page's thing does not have a value for its Slug field then the field chosen here will be displayed in the URL. URLs for things without a value for their Slug field usually look like example.com/page/1449154312665x293260311940684900.
To make this URL readable, select a field to define what to display in the URL. Usually, it will be a short text field, like a name or title. For example, choosing the field 'location' with a value of 'work,' the URL becomes example.com/page/work-1449154312665x293260311940684900.
Page title
This property defines how the page will be displayed in the browser. It can be dynamic by using the 'Insert dynamic data' button. The page title represents the <title> in the page's HTML.
This page is a native app
Check this box to build a native app and if you want this page to be the app submitted to the app stores. Clicking this checkbox displays a popup listing tips for building a native app. Note: This feature is in beta.
Native app name
Enter the name of the app to be displayed on the homepage of a user's phone.
Mobile version
To have a specific design for the page when loaded on a mobile device, select a page from this dropdown menu. Because the URL remains the same, this is transparent to the user.
Container Layout
Select the container layout type for the page (Fixed, Align to Parent, Row, or Column). Since the page itself is a container, all child elements on the page will inherit different layout controls depending on your selection. More on this can be found in the Containers section.
Preset page width
Select a preset width for the page from this dropdown menu so that the page fits the target device, e.g., laptop, mobile, or tablet. Changing the page width or height dimensions in the Bubble Editor changes this setting to 'Custom.'
Width for UI Builder
Set a specific pixel value for the width of the screen while you are building. When designing responsively, this value is used to determine the dimensions of child elements that might rely on having knowledge of the page width. This value can be updated by setting a custom value or selecting a Preset page width.
Title (for SEO / FB)
This field defines the OpenGraph <og:title>, which is used by social media platforms like Facebook and X to set a header when you share a post. This field is also used by search engines like Google to understand your page's content, and will sometimes be used as a title in search result.
We recommend a length of 50-60 characters for this field.
Description (for SEO / FB)
This field defines the OpenGraph <og:description>, which is used by social media platforms like Facebook and X to set a description text when you share a post. This field is also used by search engines like Google to understand your page's content, and will sometimes be used as part of the search result entry.
We recommend a maximum length of 160 characters (including spaces) for this field.
If left blank, the description entered in the SEO & Metatags section in the Settings tab will be used.
Image (for FB)
Choose a dynamic image for Facebook to display.
Page HTML Header
Enter any or to include in the header of the page.
Adding custom header code to the page header will only add it to that specific page. If you want to place custom code to the header of all pages, you may consider adding this to the Script/meta tags in header setting in Settings - SEO / metatags instead. This will add it to all pages in your app.
Core reference: SEO / metatags | Script/meta tags in header
Note that adding details to the header of the page can potentially break the page. We recommend using this feature with caution.
Background style
Select a background style from this dropdown menu to apply a backdrop. Choose from None, Flat color, Gradient, Image, and Video.
Background color
Choose the background color for the page.
Note: The background color only applies to the page element itself, not the true (browser html) page background. In certain instances, like a popup that is longer than the page element, this html page background color (default: white) will be exposed. Coming soon: Ability to set this html background color.
Gradient style
Choose either Linear or Radial from this dropdown menu.
Gradient direction
Choose the orientation of the gradient from this dropdown menu. Selecting 'Custom' displays a Direction degrees field to set the direction in degrees.
Direction degrees
Enter a number between 0 and 360 for the direction of the gradient.
Gradient shape
Choose Ellipse or Circle from this dropdown menu to define the shape of the gradient.
Gradient base
Select a screen location from this dropdown menu to determine where to base the gradient. Choose from Closest-side, Closest-corner, Farthest-side, and Farthest-corner.
X Center Position (%)
Enter a percentage to offset the gradient from the gradient base horizontally. 50% will center the gradient horizontally.
Y Center Position (%)
Enter a percentage to offset the gradient from the gradient base vertically. 50% will center the gradient vertically.
Starting color
Select the starting color of the gradient.
Ending color
Select the ending color of the gradient.
Intermediate color
Select an optional middle color of the gradient. If the input is empty, no intermediate color will be applied.
Background image
Upload or choose a dynamic image to use for the background. Tip: Use an image from our royalty-free library.
Center the image
Centers the image when the user resizes the browser window.
Make image as wide as parent element
If the parent element is wider than the image selected, the image will automatically resize to cover the entire element.
Repeat the image vertically
Repeat the image vertically if the image is smaller than the page's height.
Repeat the image horizontally
Repeat the image horizontally if the image is narrower than the page's width.
Background color if empty
When using a dynamic image, it may take a few milliseconds for the image to load. This color displays until the image loads. The default is transparent.
Apply a parallax effect (desktop only)
Check this box to scroll the background image more slowly than the elements on the page. This gives an impression of depth.
Parallax speed
Choose a number from this dropdown menu to control the depth effect of the parallax. With a value of 0, the image will not scroll. With a value of 1, the image will scroll at the same speed as the elements.
Video file
Upload an mp4 file or choose a dynamic video to use for the background.
Fallback image
On mobile devices, videos are not displayed due to data usage limit concerns. Upload an image to use in this case.
Play video silent
Check this box to show the video without sound.
Stripes (deprecated)
Define screen-wide stripes for the page.
Other ways to learn
Last updated