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.
Image without caption
  • Hero section - the button on the hero section contains an enroll button; which redirects to the user_account page.
  • Welcome to Fitly - this section contains 5 blocks of text and a photo. This content is displayed only for demonstration purposes and can be modified directly on the page.
  • Upcoming Classes - this section in 6 blocks displays the time for each category’s upcoming classes and a button that redirects to the classes page.
  • Meet our Trainers - this section in 6 blocks displays the time for each category’s upcoming classes and a button that redirects to the instructors page.
  • Happy Members - a section with 3 in a row testimonials from customers. This content is displayed only for demonstration purposes and can be modified directly on the page.
  • Subscribe - this block comes with a CTA button, that triggers a subscription popup. Pressing the “Subscribe” button will add the user’s email to the Mailchimp list for further sendings.
  • Choose a Membership Plan - a section with 3 in-row pricing plans for customers, and a button that redirects to the membership page.

about-us

This page shows all you need to know about the company.
Image without caption
It contains the following sections:
  • About Fitly - short block with general information and a photo.
  • Why do You need to choose Us - this section shares some facts to itemize why the company should be chosen by the users as their go-to gym/fitness place
  • Gallery - display photos sourced from “Photo” data type.
  • Get the latest news - this block comes with a CTA button, that triggers a subscription popup. Pressing the “Subscribe” button will add the user’s email to the Mailchimp list for further mailing.
  • Upcoming Events - this section in 6 blocks displays the time for each category’s upcoming classes.

admin

This page is designed to manage platform data, e.g. Users, Items, Payments… and others. Only users with admin rights can access this page (in read-only mode), and those users with access rights can edit or delete anything here.
Image without caption
💡
Admin: See the instructions on how to grant Admin Rights in your template.
☝
Note: Switching between tabs works by changing elements’ custom states.

classes

This page covers all the classes available and their instructors, it also has a hero section that can accommodate headers and details.
Image without caption
A list of all the classes is also displayed here and each class contains the class name, little details, the time the classes hold, and their respective trainers.
It also contains a button that links you to the class in question with its full details

contact-us

This page’s name speaks for itself. It is the page where your clients will get in touch with you or where they could find details about your company’s location.
Image without caption

instructors

This page starts with a hero section that takes a background picture, header, and details.
Next is the instructor section which contains the featured instructors in the gym with their social media profiles and a brief intro to the instructor and a button that when clicked shows the full profile of the instructor and all his/her classes.
Image without caption

membership

This page starts with a hero section that takes a background picture, header, and details.
Next is the pricing section for the packages the gym/fitness company offers and an enrollment button that shows a pop-up for paying for any of the packages.
Image without caption

schedule

This page starts with a hero section that takes a background picture, header, and schedule details. Next is the block that contains the schedule accompanied by a button that shows the schedule of any clicked class.
Image without caption
The schedule contains the name of the class, the instructor, the day the class is held, and a button “join” that opens the pop-up to enroll members and create an account for them simultaneously.
☝
Note: Switching between tabs works by changing elements’ custom states.

user account

Users/members that have enrolled have access to an account page once they log in.
Image without caption
This page gives an overview of their account details, their plan details, a button to edit information on the account details, upgrading or downgrading their package, canceling their membership, and out rightly deleting their account.
☝
Note: Switching between tabs works by changing elements’ custom states.

reset_pw

Here, users reset their password after accessing the link in the mail.
Image without caption

404

This is a page for 404 redirect errors, informing users that the web page they are looking for cannot be found.
Image without caption