52min

Pages Overview

This section states the purpose of each page.

✏️ Introduction

In this summary, we will describe each page and its content. The Page Element is the fundamental one that contains all the other elements.

Tip: See Bubble Reference for more information about Pages element https://bubble.io/reference#Elements.Page​ 🙂

​📄 Pages

index

This is the main page typically encountered first on the web app that usually contains links to the other pages of the site. A homepage includes a variety of menus that make it easy for users to find the information they need.

Document image
Document image

Design of this page consists of main hierarchy Group containers with branches in Elements tree for each container with different groups: "Group Hero", "Group About", "Group Classes", "Group Advantages", "Group Testimonials" and "Group Successful Stories" with elements inside. The footer and header reusable elements are also part of the design page.

Document image

Most of the workflow actions on this page were created for navigation to different pages and also combines actions working with data, by modifying and saving values inside database type User .

Tip: Be sure to check elements in both UI Builder and Responsive sub-menus to see the in-depth conditions setup 🙂

blog

A simple page is used for displaying blog posts and articles.

Note: This page is not filled with content but rather has placeholder elements. It can be customized to any style and content.

Document image

The design for this page consists of the main Group container ("Group General Content") used for text elements, alongside components like Header and Footer reusable elements on-page. There are no element workflows for this page.

category

This page populates a list of available courses under a given category. Each list item displays details about the course that includes class name, a brief headline, name of the instructor. In addition to this, each list item provides the signed-in user with the option to bookmark a particular course.

Document image
Document image

The design for this page consists of the main Group container ("Group General Content") used for text elements, alongside components like Header and Footer reusable elements on-page.

Document image

There are only 2 actions in workflow for this page one is for navigation to the class page and the other action working with data, by modifying and saving value inside database type User.

checkout

The checkout page populates a list of items selected by the user and ready to be paid for. The user has the option to remove some items from the bucket on this page and also to choose a payment method using either CC (powered by Stripe).Note: Stripe integration is made through a Free plugin. Please refer to the respective setup guide here.

Document image
Document image

The design for this page consists of the main Group container (Group Checkout Content) used for holding other Group elements, alongside components like Header and Footer reusable elements on-page. The main Group container contains "Group Heading", "Group Checkout Wrap", "Group buttons" and "Group info". These Group containers respectively hold text, group, and other elements for different sections of the page.

Document image

Most of the workflow actions on this page were created for navigation to different pages within the template and also combines actions working with data, by modifying and saving values inside database types User and Class. Here can be seen workflows for charging users using Stripe Plugin.

class

On this page the course is selected from the category page, the class page is viewed and it provides more information about the course. This information varies from the course outline with video tutorials, what the course is all about, course requirements, duration of the course videos to reviews the course has been getting from other users.

Document image
Document image

The design for this page consists of main "Group class content", used for holding other Group elements, alongside components like Header and Footer reusable elements on-page. A hidden pop-up, "Pop-up preview video" is also on the page which is used to preview video for the course. The main Group class content holds "Group Class Description" and " Group Class Heading" respectively.

Document image

Many of the workflow actions on this page were created for navigation to different pages and also combines actions working with data, by modifying and saving values inside database type User and Class . Also, there is an action to run js on page load.

class-details

Within this page, all the details of a particular class can be viewed. These details include the list of the curriculum, number of students, number of courses in the class, instructor rating, number of reviews, information about the class instructor, and an option to contact the instructor. In addition to this, the user can also share details about the class on their social media accounts, rate the class, write, and post reviews.

Document image
Document image

The design for this page consists of main "Group Class lessons", used for holding other Group elements, alongside components like Header and Footer reusable elements on-page. A hidden pop-up, "Pop-up Send Message popup" is also on the page which is used to send messages to the instructor. The rest of the groups like "Group Class Heading" and "Group Class wrap", are a part of the main group container and hold other elements on-page.

Document image

Most of the workflow actions on this page were created for navigation to different pages within the template and also combines actions working with data, by modifying and saving values inside database types User Review Conversations , Message and Class. Other actions include actions related set state values for showing different and hiding elements on-page.

contact

The сontact page provides the users with input forms to make inquiries or to ask for assistance. The form takes basic information such as name, subject for the message, email, and the content of the message.

Document image

The design for this page consists of main "Group General Content", used for holding other Group elements, alongside components like Header and Footer reusable elements on-page. "Group General Content" contains elements like "Group Content", where we find Text elements and other containers Groups, Mail, Name, Subject and Message with a Button Send the email.

Document image

There is one workflow event with action to Send Email and Reset relevant inputs.

dashboard

This page is designed to manage platform data, e.g. Users, Items, Payments… and others. Only users with admin rights are able to access this page (in read-only mode), and those users who have access rights can edit or delete anything here.

Tip: Initially, your design elements might be hidden in your editor.

Here is how to unhide 👀 them:

Document image

Admin: See the instructions on how to grant Admin Rights in your template.

Document image
Document image

The design for this page consists of a visible "Group wrapper" and a "Group Top Bar" on the page. Other elements on the page are hidden in order to not bloat the screen with lots of elements from floating groups, pop-ups, and other groups which are used to hold and display content on-page.

Tip: Hit the eye 👁 icon, to make the element visible and work with it.

Document image

Most of the workflow actions on this page were created for working with data, by modifying and saving values inside database types User Class and PlatformFee. Also, the page has actions for navigation to other pages within the template and actions that are related to set state values for showing different elements and hiding elements on-page.

Note: There is a disabled workflow event that checks on page load if the current user is not admin via user field userAdmin to redirect him to index.

help

This page is a simple placeholder page that can be used for help documentation and answers to frequently asked questions. It has no custom states.

Note: This page is not filled with content but rather has placeholder elements. It can be customized to any style and content.

Document image

The design for this page consists of the main Group container "Group Content" used for the title page with "Help and FAQ" text element as title, alongside components like Header and Footer reusable elements on-page. There are no element workflows for this page.

inbox

When a user has a message, the inbox page displays the conversations in two lists; the first one is populated with the recipient's name, and the second one is populated with the body of the message that is immediately visible once a recipient (list item) is clicked on the conversation list. While there are no messages, the page shows the user that there no messages using a placeholder image and text. Also within the list that shows the body of the conversation, the user has the option to send more messages.

Document image

The design for this page consists of the main Group container a hidden "Group Messages" used for displaying all related message content in groups, alongside components like Header and Footer reusable elements on-page. There is a "My conversations text" element used as a page title, with "Group Inbox Empty" which serves as a container for placeholder image and text when there are no messages to display.

Note: See the Things to Note section about the Router URL plugin. The plugin element must be on the page in order to use the actions/events.

Most of the workflow actions on this page were created for working with data, by modifying and saving values inside database types Conversations andMessages . Other actions include displaying data in groups on-page, reset input values, and navigation to the signup page if the user is not signed. Also for creating a pretty URL address, there is a plugin action to change the URL address.

instructor_profile

This page is designed for a user who is an instructor, the user can create new courses and this page provides a form to collect course details necessary for creating and submitting a course. The user can also view, edit, and delete already submitted courses and drafts.

instructor_profile page preview
instructor_profile page preview

The design for this page consists of the main Group container "Group Instructor Profile Wrap" used for displaying all content in groups: a hidden group "Group Welcome Instructor" is visible on-page only when the current user field userinstructor is no , "Group Instructor Wrap" which combines elements to start with new course creation "Group Start" and elements to modify the existing courses "Group Created Crouses" while the "Group Course Creation" container holds all the related elements to complete the form and submit the course to the platform. The page also contains hidden pop-up elements: "Pop-up Delete Section", "Pop-up Delete Lesson" and "Pop-up Delete Class" with actions to confirm or deny modifications of respective data, alongside components like Header and Footer reusable elements.

Document image

Most of the workflow actions on this page were created for working with data, by modifying, deleting, and saving values inside database types Сlass , User , Lesson , Category , SubCategory andSection . Other actions include displaying data in groups/pop-ups on-page, reset input values, and navigation to other pages. There are actions that are related to set state values for showing different elements and hiding elements on the page while using add pause before the next action in some workflows.

privacy

This is the page where users see the legal statement that specifies how the company manages the collected user data.

Document image

The design for this page consists of the main Group container "Group Content" used for the title page with "Privacy Policy" text element as title, alongside components like Header and Footer reusable elements on-page. There are no element workflows for this page.

Tip: The text on this page is a placeholder and should be modified according to your own privacy policy.

Tip: Also, make sure you have Terms page in your app. This will help you go through App Store and Google Play approval procedures, in case you decide to convert your Bubble app into native iOS and Android apps. These links are also important for Facebook login.

profile

On this page, the user can view and make changes to user information. Purchased courses, wishlist, and created courses if any are also displayed on this page. In addition to this, the profile page views course details such as the number of students, number of courses the user is enrolled in, number of reviews, and user ratings. There is also the option of sharing to social media accounts.

Document image
Document image

The design for this page consists of main Group container "Group General Content" used for displaying all content in groups: group "Group Profile information" is used to show User data with possibility to modify it, "Group Profile Wrap" which combines "Group profile edit" , "Group user" and "Group profile wrap" containers hold all the to all the rest The page also contains 2 hidden pop-up elements: "Pop-up Delete Class", and "Pop-up Send Message" with actions to confirm delete class and send message to instructor alongside components like Header and Footer reusable elements.

Document image



Most workflow actions are related to set state values for showing different elements and hiding elements on-page. The page also has actions working with data, by modifying, deleting, and saving values inside database types Сlass , User , Lesson , Conversation , Messages andSection . Other actions include displaying data in groups/pop-ups on-page, reset input values, and navigation to other pages.

signup

The signup page contains three different views, one view is visible at a time. There is the signup form, the login form, and the pop-up dialog for resetting the password. Each view's visibility is triggered when a given action is performed.

Document image
Document image

The design for this page consists of a visible Group container "Group Logo" and Text element "Please login". The Group logo has an image that is part of the container with the template logo. There are also 2 hidden group elements "Group Login Form" and "Group Signup Form" both containers used to display respective form elements for users to either login or signup. Also, the page has a hidden pop-up "Pop-up reset password" which contains input and text with button instructions for the password reset feature.

Document image

Most workflow actions are related to set state values for showing different elements and hiding elements on-page. The page also has actions for navigation to other pages.

Tip: This page comes with demo logins that have been placed for testing purposes. They may be removed from your app.

sub-category

This page is similar to the category page. The page is populated with a list of available courses under a given category. Each item displays details about the course that includes class name, a brief headline, name of the instructor, price.

Document image



The design for this page consists of Group container "Group Hero Content" used for displaying title for page also group "Group Classes by SubCategory" is used to show Class data in a repeating group with a container nested "Group Class" alongside components like Header and Footer reusable elements.

Document image

A couple of workflow actions on this page are related to working with data, by modifying and saving values inside database types User . Also a navigational go to a page action.

terms

This is the page where users see the agreement act between both sides: the company that has the web application and users who access the web application.

Document image

The design for this page consists of the main Group container "Group General Content" used for the title page with "Terms and Conditions" text element as title, alongside components like Header and Footer reusable elements on-page. There are no element workflows for this page.

Tip: The text on this page is a placeholder and should be modified according to your own terms of service.

Tip: Also, make sure you have Privacy page in your app. This will help you go through App Store and Google Play approval procedures, in case you decide to convert your Bubble app into native iOS and Android apps. These links are also important for Facebook login.

reset_pw

This page is for resetting the password.

Document image

The design for this page consists of the main group "Group Content" which has a form for resetting the password using different elements inside the container alongside components like Header and Footer reusable elements on-page.

Document image

The workflows on this page are related, to reset password and navigation.

404

This is a custom-designed page for 404 redirect errors, informing a user that the web page he or she is looking for cannot be found.

Document image

The design for this page consists of the main "Group 404 Content", alongside components like Header and Footer reusable elements on-page. The main container holds the rest of the content which is roughly text elements and back a button element.

Document image

The workflow for this page is set only on a button action to navigate to a page on button click event.

📜 Table of Contents

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