Navigating the UI Builder Components Tab

The process of building a web app consists of adding components to a blank canvas (the editor) using drag-and-drop features and making sure you have the right building blocks added to the page to build the perfect layout to achieve your desired goals.

In the previous chapter, you learned how to create your account and what are the main areas of the Bubble editor. In this chapter, you will take a closer look at the UI Builder components tab available inside Bubble. You are going to learn the key areas and features, what they are, and how they work.

This knowledge is valuable because it will allow you to understand the core features of Bubble and how to use and interact with the UI sidebar and its components, allowing you to build your own applications with ease.

This chapter will cover the following topics:

• Presenting the UI Builder components tab and the sidebar
• Understanding the structure of the UI Builder tab
• Learning...

Presenting the UI Builder components tab and the sidebar

Let’s break down the components by category so that you can follow the Bubble editor as it is from top to bottom. We are going to start on the Design tab, which is the main tab you see selected when joining your Bubble editor. We are going to start with the sidebar items, making sure the UI Builder tab is selected at the top of the Visual Elements sidebar.

The Design tab and sidebar UI Builder tab are selected, as shown here:

Figure 2.1: Design tab – UI Builder

Before we talk about UI components, it is important that we understand what the Elements Tree is; this is the first area on your component’s sidebar, as shown here:

Figure 2.2: UI Builder – Elements Tree

Under the Elements Tree section, you will see each component that was applied to your page, meaning if you drag a new component to the canvas, it will show up there.

The UI Builder...

Presenting UI components

You learned all about the Elements Tree; now, let’s dive into UI components. It is important to notice that the visual components are divided by categories, inside the Bubble editor. Let’s break down each section so that you can learn what they are and what types of components you will be able to find in each category.

Visual Elements

These UI elements, as the name of the category suggests, are visual little blocks you are going to use to build pretty much any application. We can call this section the basic elements that will help you build web apps; it is very unlikely that you are not going to use a text component or a button on your application. Let’s say these are the most used and essential components for any project you are going to build using Bubble. Inside the Visual Elements category, you will find Text, Button, Icon, Link, Image, Shape, Alert, Video, HTML, Map, and Built on Bubble elements. These UI components are called...

Summary

In this chapter, we explored UI Builder components and the sidebar, getting familiar with their structure and functionality within Bubble. This foundational understanding helps you navigate Bubble’s interface effectively while working on your applications.

You also learned about the Elements Tree and how it can help you control component visibility, along with using conditional settings efficiently. These insights enable you to manage components accurately, enhancing your application’s usability.

Additionally, you learned important concepts such as container components, input forms, and the benefits of reusable elements. You also discovered how to expand your toolkit by installing additional components from the Plugins Marketplace, opening up new possibilities for your application development journey.

Throughout the chapter, you gained practical insights into best practices and efficiency tips for managing and utilizing components effectively. With this...