Visual elements
This section describes the visual elements that are available in the Bubble editor
Last updated
Was this helpful?
This section describes the visual elements that are available in the Bubble editor
Last updated
Was this helpful?
Visual elements are the elements you can place on that page that cannot contain other elements (groups) and cannot accept input (input elements). They usually serve two purposes:
To display information or contribute to the aesthetics of the page
To accept button clicks
In the illustration above, all elements are visual elements: text, an image and a button.
The visual elements category contains the following elements:
A non-editable text element. Both the header and the body copy in the image above are text elements.
A button is a shape with a text/icon that's optimized for click workflows. It can contain a text, an icon or both.
Icon elements let you pick an icon to display from several different .
The link element lets you set up a link with a custom text and destination. It can dynamically point to one of your internal pages (including sending data to that page) or point towards an static and/or external link.
Image elements allow you to place images in your app. The element supports all widely used image types such as png, jpg, svg, webp and gif.
The shape element adds a rectangle to the page which can be resized, rounded and styled in different ways.
The alert element adds a bar that can show a text message for a set amount of seconds before it disappears. It's used to display temporary messages such as success and error messages.
The video element lets you implement streaming video in your app. The element supports YoutTube and Vimeo.
The HTML element lets you place a snippet of HTML code on the page. It can be useful when you need to include custom HTML code in your app that cannot be achieved through Bubble's visual editor. This can be HTML code, CSS styles, and JavaScript code.
Typical use cases for the HTML element include:
Embedding third-party widgets
Using custom CSS to style or animate elements
Adding custom functionality with Javascript
The Map element lets you implement a Google Map on the page, fully navigatable by your users.
This element lets you add a small "Built without code: Bubble" logo to your app.
Video:
Video:
Article:
