logo
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

addLanguage

This reusable element is used for searching and selecting an available language. Used for adding a language to a job or freelancer profile.
Image without caption
The language type is set in this workflow, by changing the Language Type field based on the Current cell's item that is clicked:
Image without caption

addLanguageProficiency

This element is used for selecting language proficiency. Used for adding a language proficiency to a job or freelancer profile.
Image without caption
The proficiency is set here, by changing the Language Proficiency field based on the Current cell's item that is clicked:
Image without caption

Footer

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. 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.
The footer offers a bit less than the header. It's used for basic navigation through the platform.
Image without caption
It comes with a single workflow only - go to your homepage when clicking on Uplance logo:
Image without caption
But feel free to add any workflows you prefer.
πŸ’‘
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.
Most of the Header design elements may be hidden in your Bubble editorbut this is how you can unhide them (don't tell anyone!):
Image without caption
You can also see the separate workflow folder for the **mobile menu **design:
Image without caption
As well as for the search functionality:
Image without caption
πŸ’‘
Tip: This page comes with demo logins that have been placed for testing purposes. They may be removed from your app.

searchCountries

This element is used for searching and selecting an available country. Used when searching for jobs or freelancers.
Image without caption
There are only three workflows here:
Image without caption
πŸ’‘
Tip: We are using a plugin called Search & Autocorrect. You can check the property editor settings of the plugin element to see how it works. Click on show documentation below each field, to expand the instructions.

searchLanguages

This element is used for searching and selecting an available language. Used when searching for jobs or freelancers.
Image without caption
The workflows and plugin setups for this Reusable Element are the same as for Countries, except for this one is looking for Languages.

Helpful?