Page Element (Legacy)
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 uer'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.
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.
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.
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.'
Title (for SEO / FB)
Enter the title you want social networks to crawl when looking at the page. This title is displayed by Facebook, for instance, when the site is listed. It should be approximately 50–60 characters including spaces. If left blank, the title entered in the SEO & Metatags section in the Settings Tab will be used.
Description (for SEO / FB)
Enter the meta description you want Google to crawl when looking at the page. This description is displayed by Google or Bing when the site is listed. It should be less than 160 characters including spaces. 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 HTML to include in the Header. For example, Google's or Facebook's tracking code for conversion. Warning: This is for advanced users only because it could break the page.
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.
Last updated