Skip to main content
Introduction to Elements

Elements are things you draw on pages. They display images, text, and other information and enable users to interact with the app.

Sofia Maconi avatar
Written by Sofia Maconi
Updated over a week ago

Experience level

This core reference entry is suited for beginner-level builders.

In-depth articles (11)

To learn about this topic more in-depth, we recommend reading the suggested articles below:

Elements

In this article series, we cover how to work with different element types:


The design tab

In this article we cover the different tools available in the design tab.


Design

Article series focusing on design in general, explaining terminology and offering resources to help you set up a user-friendly, good looking design.

  • Article series: Design

    • Building pages that work on all devices, such as a laptop and a phone.


Previewing your app

In this section about how to preview your app in the development environment.

Videos (1 playlist)

Bubble Academy: Element videos (list of videos related to elements)


Elements are things you draw on pages. They display images, text, and other information and enable users to interact with the app. Elements have properties that are controlled in the property editor in the Bubble editor.

Elements are classified into three categories:

  1. Visual elements Used to display information and trigger workflows when users interact with them (such as clicking a button)

  2. Containers: Elements that contain other elements.

  3. Input forms: Elements that users use to enter information.

Elements are either part of Bubble's core library or added with plugins.

Sections

This section covers all of the elements in the core library, respective parameters, and shared properties.

General properties

An element's general properties determines what they look like and how they behave.

If you are unfamiliar with what elements are, you can explore the more in-depth article series below:

User manual article series: Elements

Conditional formatting

Conditional formatting means to change the visibility or appearance of an element based on specific conditions.

If you are not familiar with what conditional formatting is and how dynamic expressions work, we recommend exploring the more in-depth user manual articles below:

User manual article: Dynamic expressions

User manual article: Conditions

States

States (not to be confused with custom states) are situations the element can find itself in, such as being hovered or visible.

Page element

The page element is the fundamental element that contains all the other elements. Each page gets assigned a custom URL in your app.

If you want to learn more about how the page element and its hierarchy of elements work, we recommend viewing the in-depth article series below:

User manual article series: The element hierarchy

User manual article series: The page

Visual elements

Visual elements are the elements you can place on that page that cannot contain other elements (groups) and cannot accept input (input elements), such as text, images and icons.

If you are unfamiliar with elements and would like to know more about how they work, you can check out or more in-depth guides below. You can also extend the number of available elements with plugins.

User manual article series: The element hierarchy

User manual article series: Elements

User manual article series: Visual elements

User manual article: Plugins

Containers

Containers are an element type that contains other elements.

There are a few different types of container elements that each serve different purposes. If you want to know more about these different types we recommend checking out the articles below:

User manual article series: The element hierarchy

User manual article series: Container elements

Input forms

Input forms are elements that accept some sort of input from the user, such as text, numbers, dates and file uploads.

There are many different types of input forms, and to learn more about the different types we recommend checking out the more in-depth user manual articles below. You can also extend the number of different input forms with plugins.

User manual article series: Input forms

User manual article: Plugins

Reusable elements

Reusable elements are collections of elements that can be re-used across your app. For example, if your app has a footer section, you can set that up as a reusable element and use across every page that needs that footer.

If you're unfamiliar with reusable elements and how they work, you may be interested in checking out our more in-depth user manuel article below:

User manual article: Reusable elements

Did this answer your question?