Building Blocks – Exploring Bubble’s UI Components

In this chapter, we are going to continue learning about Bubble and user interface (UI) elements. We are going to dive deeper into the tool and each element category, so you can get familiar with all the existing components that can be used to build your page layouts. You will learn not only what the elements are but also what they do and what they can be used for.

This knowledge will be valuable to building any project using Bubble as you will know what exact components to use when building your own digital applications.

Let’s dive right in and start learning about visual UI elements inside Bubble. Here is what we will cover in this chapter:

• Presenting visual elements: Text, Button, Icon, Link, Image, Shape, Alert, Video, HTML, and Map
• Presenting containers: Group, RepeatingGroup, Popup, FloatingGroup, and GroupFocus
• Presenting form elements: Input, MultilineInput, Checkbox, Dropdown, SearchBox...

Diving deep into UI elements

At this point, you have learned where to find the components inside Bubble and how they are divided by category. Now, it is time to dive deeper and understand more about each one of them, so during your development process, you will already know what to use for each project you want to build. Let’s dive right in.

Visual elements

The UI elements available inside Bubble are divided into categories – the first one is called visual elements. These are the most used components to add visual content to your pages, so let’s learn a bit more about each one of them.

Text

With this component, you can add text to your page and play with the typography. You can draw a box and type the desired text on the property editor to add your copy. It is also possible to add dynamic data to the Text field, meaning the Text information can come from a database source.

The Bubble Editor window with Text elements on the page is shown here:

...

How to create a reusable element

A reusable element is a powerful feature in Bubble that allows you to create custom components or templates, which can be used across multiple pages of your app. Once created, these elements act as building blocks that you can easily insert into different parts of your app and can be easily maintainable. They are particularly useful for maintaining design consistency and functionality throughout your app, as any changes made to a reusable element are automatically reflected across all instances where it’s used. This feature streamlines app development, encourages modular design, and saves time by eliminating the need to recreate similar elements on each page.

To create a new Reusable component, follow the outlined steps.

There are two ways of creating reusable components – the first is by clicking on New Reusable, and following these steps:

1. Click the New Reusable link.

Figure 3.28: New Reusable...

Useful reusable elements – Header, Footer, Signup, and Login

When talking about reusable elements, if you are new to web development, I think it is important to know a few teams so you can get more familiar with the development world. If you are already an experienced professional, I am sure you can skip this part, but if you are not, I hope this can help.

Header

The Header component in Bubble serves as the top section of a web page or app interface. It typically contains navigation menus, branding elements, and key information that remains consistent across different pages or views of your app. Headers are essential for providing users with a clear and accessible way to navigate your app, ensuring a seamless and user-friendly experience.

Footer

The Footer component is located at the bottom of a web page or app interface. It often contains additional navigation links, copyright information, contact details, or other relevant content. Footers are valuable for providing...

How to install new components

By now, you already know that you can install new components on Bubble, meaning you can expand the possibilities of what you can build by using plugins developed by the Bubble community and Bubble developers out there.

Let’s learn how to add new components to your Bubble Editor – it is very simple:

1. First, click the Install More button, as shown here:

Figure 3.34: Install More

Note

There is no difference if you click the link under a specific category, it will open the same page (Plugins marketplace).

The Plugins Marketplace modal window is shown here:

Figure 3.35: Plugins marketplace

2. From that list, you can search for specific UI component names; for instance, if you are looking for Icon components, type icons into the search bar. You can also use some filters to sort results by name, usage, rating, date, or price.
3. If you already know the specific name...

Summary

In this chapter, we’ve covered a number of important concepts that will help you build a strong foundation while using Bubble. You learned about the Design tab and each category and UI component available inside Bubble under the sidebar and UI Builder, ranging from visual elements such as Text, Button, Icon, Link, and Image. You also learned about containers such as Group, RepeatingGroup, and Popup and form elements such as Input, MultilineInput, Checkbox, Dropdown, SearchBox, RadioButtons, Slider, Date/TimePicker, PictureUploader, and FileUploader.

You also learned what reusable elements are, how to create them, and how they work so you can take advantage of this useful feature to build faster and consistently maintain your applications.

This chapter also explained how to install new design components and how you can benefit from plugins to be able to extend the possibilities of what you can build with Bubble.

Understanding these concepts and properly knowing...