Littlebay Templates Documentation
  • Welcome!
  • Quick Links & Tips
    • Littlebay Forum
    • Support Email
    • Built-In Documentation
    • Navigating the Bubble Editor
    • Navigating this Documentation
    • List of Bubble Guides
  • Messaging Template
    • Release Notes
      • 05/28/21 Guide on How to Update the Template's Select Conversation Workflow
      • 09/05/20 Guide on How to Update the Template's Video Chat Service
      • 06/14/19 Guide on New Conversation Functionality
    • About this Template
    • Setup Guide
    • Development Guides
      • Built-In Workflow Notes
      • Pages Summary
      • Reusable Elements Summary
      • Passwords
      • Translating Your App
      • Mini Guides
        • How to Remove Group Conversation Functionality
        • How to show the Chat window after clicking "Message" on the Profile Page when a Conversation Exists
      • Pages & Reusable Elements (Organized by Folder)
        • 1. Marketing
          • index
          • landing
          • 404
        • 2. Navigation
        • 3. Logged In
          • account
          • admin
          • change_pass
          • confirm
          • messages
            • Pageload Design
              • 1. Responsive
              • 2. Mobile Pageload
              • 3. New User
              • 4. New Conversation (Parameter)
              • 5. New Conversation w/ User (Parameter)
              • 6. View Conversation (Parameter)
              • 7. Viewing/Editing the Colors of the Message 'Bubbles'
            • Built-In Functionality
              • 1. Start a Conversation
              • 2. View/Select a Conversation
              • 3. Search for a Conversation
              • 4. Delete or Leave a Conversation
              • 5. View More Messages in a Conversation
              • 6. View Unread Messages
              • 7. See Who's Typing
              • 8. See Who's Seen Each Message
              • 9. Send Images in a Message
              • 10. Send Files in a Message
              • 11. Send a GIPHY in a Message
              • 12. Send a YouTube Video in a Message
              • 13. Start a Video Chat
          • onboard
          • profile
            • 1. Follow/Unfollow the User
            • 2. Send a Message to the User
            • 3. View the User's Followers
            • 4. View Who the User is Following
            • 5. Edit Profile
          • reset_pw
        • 4. Legal
          • privacy_policy
          • terms
    • Design Resources
      • Design Overview
      • Design Guide
      • UI Components
      • Page Templates
  • Responsive Base Template
    • Release Notes
    • About this Template
    • Setup Guide
    • Development Guides
      • Built-In Workflow Notes
      • Pages Summary
      • Reusable Elements Summary
      • Passwords
      • Translating Your App
      • Pages & Reusable Elements (Organized by Folder)
        • 1. Marketing
          • index
          • landing
          • 404
        • 2. Navigation
        • 3. Logged In
          • account
          • admin
          • change_pass
          • confirm
          • onboard
          • profile
            • 1. Follow/Unfollow the User
            • 2. View the User's Followers
            • 3. View Who the User is Following
            • 4. Edit Profile
          • reset_pw
        • 4. Legal
          • privacy_policy
          • terms
    • Design Resources
      • Design Overview
      • Design Guide
      • UI Components
      • Page Templates
Powered by GitBook
On this page
  • Index
  • Account
  • Admin
  • The Grid and Graph Views
  • Change_Pass
  • Confirm
  • Design Guide
  • Landing
  • Onboard
  • Privacy Policy
  • Profile
  • Terms
  • UI Components ("ZComponents" Page)
  • Page Templates ("zlayout" Pages)
  • Reset_PW
  • 404
  1. Responsive Base Template
  2. Development Guides

Pages Summary

PreviousBuilt-In Workflow NotesNextReusable Elements Summary

Last updated 6 years ago

The index page is the home page of the application. When first opening the template in the editor, the index page describes the template's features and functionality. You won't need this page; .

The account page allows Users to edit their account information. After the Current User adds or edits their information using the forms on this page, it is then displayed on their profile page and wherever it's needed throughout the application.

The account page primarily uses standard input elements, aside from the combination of elements used to change/delete/save each User's profile picture. This combination of elements is used to improve the user experience, so Users can change and upload their profile picture as shown in the GIFs below:

Confirm New Profile Picture

Discard New Profile Picture

To view these picture uploader elements in the editor, select the Group Picture Uploader Container element, and reveal it in the Elements Tree. Then click to make the Group Save/Cancel Buttons (Profile Photo) element visible in the editor:

More information on this custom picture uploader can be found in the "D. Change Profile Picture" workflow folder.

The admin page allows admin users to modify Users' information, delete accounts, and designate other Users as admins. All elements are hidden on page load, and contain conditional formatting to become visible when the Current User's "Admin" field (type: yes/no, list:no) is yes.

The Grid and Graph Views

On this page, there are two views -- the "Grid" view and the "Graph" view.

The "Grid" view is the Group Users Grid Container element and the "Graph" view is the Group Graph of Users Container element:

Each group is shown conditionally, depending on whether the "Grid" or the "Graph" toggle was just clicked.

For more information on how these groups are shown, please refer to the B. Grid and Graph Views workflow folder.

The change_pass page allows Users to change their passwords. This page is not really needed in the template, but it could be useful if you create functionality that assigns temporary passwords to new Users. If a User logs into the application with a temporary password, they will be navigated to this change_pass page automatically, in order to change their password.

The design guide is used to keep the application's design consistent as you build new pages.

Immediately after a new User signs up for your application, they will be navigated to this onboard page. The onboard page contains four 'step' groups, that welcome the Current User, asks the Current User to upload a profile picture, asks the Current User for their website link, and asks the Current User to write a few sentences about themselves. After the Current User completes these steps (or skips them), the last onboard card shows a 'continue' button which navigates them to the messages page.

A page where you can include your application's privacy policy.

The profile page allows Users to view their own profile information, and the profile information of other Users in the application.

The Follow/Unfollow Button on the Profile Page

When the Current User is viewing someone else's profile, the Button Follow/Edit Profile element is shown to the Current User:

When the Button Follow/Edit Profile element is shown, and the Current User isn't yet following the person whose profile they are viewing, the Button Follow/Edit Profile element's text will be "Follow":

When the Button Follow element is clicked, the Current User is now following the person whose profile they are viewing. As a result, the button's text conditionally changes from "Follow" to "[checkmark] Following".

When the "[checkmark] Following" text is hovered, its text will conditionally change to "Unfollow":

If the "Unfollow" text is clicked, the Current User will no longer be following the person whose profile they are viewing.

The Edit Profile Buttons on the Profile Page

When the Current User is viewing their own profile page, the Button Follow/Edit Profile element will be visible if the current page width is greater than 725 pixels; the button's text will be "Edit Profile". If the page width is less than or equal to 725 pixels, the Button Edit Profile (Mobile) element will be visible instead.

Editor

Desktop:

Mobile:

Preview

Desktop

Mobile

These buttons' texts are "[pencil icon] Edit". When clicked, these buttons' workflows navigate the Current User to their account page, in order to edit their profile information.

A page where you can include your application's Terms of Use.

The UI components page consists of pre-built, responsive elements that you can copy+paste onto new pages (shown in the video below).

Within the template are four 'page template' designs. These are pre-built, responsive pages (without data/workflows) that you can duplicate anytime you create a new page to save some time.

This page allows Users to reset their password incase they've forgotten it. After a User requests a password reset link be emailed to them, the link in that email will navigate them to this page. On this page the User will type and confirm their new password.

The "page not found" page.

By default, the template doesn't send confirmation emails to new Users, and it doesn't restrict any functionality for Users without a confirmed email. To send new Users confirmation emails, please read the .

The landing page is a responsive page 'template' that allows you to fill in the information about your application. The page utilizes free, MIT-licensed illustrations from .

As described in the Setup Guide's , you should set the landing page as the new index page, and then delete the "old_index" page.

There is a demo workflow that should be deleted on this page. Please refer to of the Setup Guide for instructions.

.

Admin
Change_Pass
Confirm
confirm page section
Design Guide
Landing
Undraw
"Set the Landing Page as the new Index Page, and Delete the Old_Index Page" section
Onboard
this section
Privacy Policy
Profile
Terms
UI Components ("ZComponents" Page)
Page Templates ("zlayout" Pages)
View the 4 page template designs here
Reset_PW
404
Index
set the "landing" page as the new index page, then delete the "old_index" page
Account