13min

Reusable Elements Overview

This section states the purpose of each reusable element.

✏️ Introduction

Reusable Element - an element that contains other elements, like a group, that can be used in more than one place. This is useful when reusing the same elements often.

Tip: See Bubble Reference for details https://manual.bubble.io/core-resources/elements/reusable-elements​ πŸ™‚β€‹

​♻️ Reusable Elements

The footer reusable element is located at the bottom of a page. It provides an example of how it can include external links, such as company's social media, navigation and copyright notices. A great website footer design keeps people engaged and moving through the website. This reusable element is customizable, so it is possible to change styles and content of element while keeping workflows or using as inspiration for your own.

Document image

This reusable element is designed to be used on most pages, and contains the main "Group Footer Wrap". The "Group Footer Wrap" is used for all other group elements which hold the content inside. Also, there is "Group Collapse" used for responsive design with conditional when Current page width is < 450 px the element is not visible.

There are no element workflows for this page.

Tip: Add Privacy and Terms links here, as well as create separate pages for these links. It will help you go through App Store and Google Play approval procedures, in case you convert your Bubble app into native iOS and Android apps. These links are also important for Facebook login.

Header

The header reusable element sits at the top of each page and serves a few very important purposes. It does provide a place for company's logo, navigation and page title which are part of a consistent user experience that all good websites share.

Other common header features are, search, shopping cart (for ecommerce), login/logout, user profile and notifications (if applicable). The workflows included with this element are pretty straightforward to follow.

This reusable element is customizable, so it is possible to change styles and content of element while keeping workflows or using as inspiration for your own.

Document image

This reusable element is designed to be used as a header for all pages and it contains the main "FloatingGroup header" and hidden group elements like: "GroupFocus Category", "GroupFocus SubCategory", "GroupFocus user notification", "GroupFocus Search Class" and "GroupFocus user menu"

Document image

The workflows on this element are mostly of navigation actions to different pages, setting state values for showing and hiding elements inside the reusable and animation effect on the Group focus element.

πŸ“œ Table of Contents

In order to properly configure the template please read the *required sections of this documentation.

ο»Ώ

Updated 22 Apr 2022
Did this page help?
Yes
No