Visual elements

This section describes the visual elements that are available in the Bubble editor

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.

Video lessons


A button is a shape with a centered text that's optimized for click workflows.

Video lessons


Icon elements let you pick an icon to display from a large catalogue of different designs. Bubble uses the .

Video lessons

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.

Video lessons


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.

Video lessons and articles

Bubble also has a separate element for uploading images:


The shape element adds a rectangle to the page which can be resized, rounded and styled in different ways.

Video lessons


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.

Video lessons


The video element lets you implement streaming video in your app. The element supports YoutTube and Vimeo.

Video lessons


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

Video lessons


The Map element lets you implement a Google Map on the page, fully navigatable by your users.

Video lessons

Built on Bubble

This element lets you add a small "Built without code: Bubble" logo to your app.

Last updated