Welcome to the next stage of building your multi-tool platform! In our previous lessons, you've done the heavy lifting to create a scalable data and navigation structure, allowing users to move from the homepage to a category and finally to a specific tool. Now, it's time to focus on creating a consistent and professional user interface that ties all these pages together.
Today's lesson addresses a core principle of efficient web development: keeping your design consistent without repeating your work. You'll learn how to build a reusable header and footer for your site. By the end of this 60-minute lesson, you will have created a single header and a single footer that can be placed on every page of your app, ensuring a cohesive look and feel for your entire platform. Your experience with WordPress and Elementor's Theme Builder for creating global site parts will be conceptually similar to Bubble's "Reusable Elements" feature we're about to explore.
The "Don't Repeat Yourself" (DRY) Principle
Before we start building, it’s important to understand why we're doing this. A core concept in development is "Don't Repeat Yourself," or DRY. Imagine if you had to manually build your header on every single page. If you later decided to change a navigation link, you would have to edit every page individually. This is inefficient and prone to errors.
Reusable elements are Bubble's solution to this problem. You build a component once, and then you can use it anywhere. Any update to the reusable element is automatically reflected everywhere it's used.
To get a formal understanding of this concept, let's start with a quick read from the Bubble documentation.
This document provides the official explanation of reusable elements. It's the best place to start to understand their purpose and benefits.
Please read the introduction to understand what reusable elements are. Then, review the list of examples—you'll see "Navigation Bar" and "Footer" are prime candidates. Finally, read the section on the benefits, which highlights efficiency and consistency.
Building a Reusable Header
A header is one of the most common reusable elements. For a modern web app, you typically want the header to remain visible at the top of the screen even when the user scrolls down. In Bubble, we achieve this using a specific type of container called a Floating Group.
Let's begin by creating the header.
- From the top-left of the Bubble editor, click the page dropdown.
- At the bottom of the list, under "Reusable elements," click Add a new reusable element.
- Name your new element
Headerand click "Create". - You'll be taken to a new, blank editor canvas for your reusable element. Click the
Headerelement itself to open its property editor. - In the Layout tab, change the Container layout to Row. This will allow us to place elements side-by-side, like a logo on the left and links on the right.
- Now, to make it a sticky header, go back to the Appearance tab. For the Element type, select Floating Group.
- New options will appear. Set Float vertically relative to to Top. This locks your header to the top of the viewport.
Now you have the basic shell for your header. The video below provides two excellent strategies for arranging elements inside a navbar.
How to Build a Responsive Navbar in Bubble | New Responsive Editor
This video from Bubble's official channel demonstrates how to build a responsive navbar. We'll focus on the structural setup for now.
Watch from the beginning to see how to use the 'Align to Parent' layout for a simple structure. Then, pay close attention to the alternative method, which is more robust for responsive design, where the main container is set to a 'Row' layout. We've already set our header to 'Row', so this part is especially relevant.
For your multi-tool platform, a good starting point is a simple structure:
- A Text element on the left for your app's name or logo.
- A Group on the right that contains several Text elements for navigation (e.g., "Home", "Tools", "Login").
Inside your Header reusable element, use a Row layout and set the Container alignment to Space between. This will push your logo to the far left and your navigation group to the far right, a very common and clean layout.
Building a Reusable Footer
Next, let's create a footer. The process is similar, but a footer typically doesn't float; it sits at the very bottom of the page content. We can build it as a standard Group.
The following video is a complete walkthrough of building a reusable footer from scratch. It covers everything from creating the element to adding content and even a clever design trick for wide screens.
Reusable footer: Getting started with Bubble (Lesson 1.9)
This tutorial by Bubble expert Gregory John is a perfect guide to creating a high-quality, responsive footer.
Follow along with the video to build your footer. Key steps include: Creating the 'footer' reusable element and setting its initial layout properties and background color. Adding and grouping brand elements (like a logo and name) on the left. Adding and grouping link elements on the right, and using 'space between' alignment. Adding an inner 'Group container' with a max-width. This is an excellent technique to keep your footer content centered and readable on very wide monitors.
This idea of having a full-width background with centered content is a fundamental design pattern for modern websites.
Adding the Header and Footer to Your Pages
You've built your header and footer. Now for the final, satisfying step: adding them to your pages.
- Navigate back to one of your pages, for example, the
indexpage. - In the Design tab, look at the element tree on the left. Scroll down past "Standard elements" and "Containers" until you see the Reusable elements section.
- Click on your
Headerelement, and then click near the top of your page to place it. - Do the same for your
Footer, placing it at the bottom of the page. - Select the
Headerand in its Layout tab, set its Order to Make first. - Select the
Footerand set its Order to Make last.
The last step shown in the footer video is crucial for ensuring your page fits its content perfectly.
Reusable footer: Getting started with Bubble (Lesson 1.9)
Let's revisit the footer tutorial to see how to add the element to the page and adjust the page's height.
Watch the section from "how do we get this reusable onto the page?". Pay attention to how after placing the footer as the last element, the page's own min-height is set to 0. This tells the page to dynamically resize its height to fit the content, including the footer.
Now, repeat this process for your category and tool pages. Once you've added the header and footer to all three pages, try this:
- Go to the
Footerreusable element's editor. - Change the text of one of the links (e.g., change "Legal" to "Terms of Service").
- Preview your
index,category, andtoolpages. You will see the change is instantly live on all of them. This is the power of reusable elements!
Conclusion
Fantastic work today. You've moved beyond building individual pages and have started creating a cohesive, maintainable design system for your platform. This is a significant step toward building a professional-grade application.
Here are the key takeaways from this lesson:
- Reusable Elements are the key to applying the DRY ("Don't Repeat Yourself") principle in Bubble, saving time and ensuring consistency.
- A Floating Group set to float to the top is the ideal container for a sticky header.
- A standard Group is perfect for a static footer.
- Using container layouts like Row with Space between alignment is a powerful way to structure your header and footer content.
- Adding reusable elements to your pages allows you to manage site-wide components from a single location.
Now that you have the structural components of your UI in place, our next lesson will focus on aesthetics. We will dive into Bubble's Style system, where you'll learn to define and manage a consistent set of fonts, colors, and element styles across your entire application.