Starter
Last updated
Last updated
The Starter template is a comprehensive landing page solution designed to showcase SaaS products effectively. With all the essential pages—Home, About, Contact, Pricing, Blog, Legals, Login, Sign up and an Admin dashboard—this template provides a complete foundation for any SaaS creator. It includes built-in features like user login and logout, ensuring a seamless and professional experience for both administrators and end-users. Whether you’re launching a new product or enhancing your existing platform, Starter equips you with everything you need to establish a strong online presence quickly and efficiently.
Beyond its structure, Starter stands out as the ultimate toolkit for SaaS entrepreneurs aiming to focus on their app’s logic rather than design. Its Admin dashboard empowers creators to dynamically manage customer data and content through an intuitive CMS, making it easy to scale and adapt. The template’s responsiveness ensures that your product shines on any device, offering a user experience that matches the quality of your service.
Ideal for startups, content creators, or developers building software-as-a-service products, Starter accelerates your journey from idea to deployment. By simplifying the technical and design challenges, this template allows you to allocate time and resources to building the core functionalities of your application.
⚡Functional Pages:
Home: A visually striking homepage to showcase your product or service.
About: Highlight your brand story and mission effectively.
Contact: Allow seamless communication with a dynamic contact form.
Pricing: Present your pricing plans in a clean and intuitive layout.
Blog: Engage users with articles and updates, complete with CMS integration.
Legals: Display terms, privacy policies, and other legal information effortlessly.
⚡Admin Page
Manage customer data and content dynamically.
Fully integrated CMS tools for easy updates and scaling.
⚡Why Choose Starter?
Time-Saving: Get started immediately with a pre-built, fully functional structure.
Customizable: Easily adapt the design to suit your branding and app needs.
User-Focused Design: Ensure your audience has a seamless experience on every page.
Unlock your creativity and let Starter handle the heavy lifting. Available now on the Bubble.io marketplace!
Main Page
Features
Pricing
Blog
Internal BlogPage
Contact
Privacy
Terms
Sign up
Login
Advanced Admin Dashboard
Beautiful SaaS landing page
Clean Design
This template is not the final product. Any part of the application can be modified for different needs.
This guide is the beginning of the documentation with the built-in Notes for the database. Will help you gain a better understanding of how the template and Bubble works.
Once you have bought or added a block to your account, you will see a dropdown in the New Application popup that lets you pick a template as the basis for the new application.
After you've selected a block you bought, complete the other fields with necessary data (i.e: Name of the new app, What kind of application you are building, etc) and press Create a new app.
Wait for Bubble to load the application with all the data. After the application has loaded, you'll see the Bubble assistant on the left side for New Application. You can close it or follow the assistant steps to adjust different settings. Now you're ready to go and dive into Bubble no-code development toolset.
This template comes with demo accounts and demo buttons for testing purposes, which do not require a full sign-up process in order to test the platform features. Feel free to delete these login options in your app.
To delete the conditional, follow the instructions:
on the loginpage, find the Group Demo Login button and delete it.
All buttons that have workflow actions are disabled for demo preview.
See if the conditional below appears on the buttons and remove it.
This is the core page of the template, that displays a stylish SaaS Landing page.
☝ All images and texts (except the repeating groups and reusable elements) are displayed for demonstrational purposes and can be changed directly on the page.
Here, users reset their password after accessing the link in the mail.
This is a page for 404 redirect errors, informing a user that the web page he or she is looking for cannot be found.
This page displays a description of the website's product or service.
This page contains the Contact Us form.
This page contains detailed information about a product/service pricing.
This page contains the blog posts.
This page contains detailed information about a blog. It displays images, title, and detailed content.
This page displays a description of the service offered by the website owner.
This page displays a description of the website owner's terms of employment.
This page displays a description of the website owner's privacy policy.
This reusable element is the footer of your app. It contains your portfolio page links, logo, and social links.
This reusable element is the desktop header and inludes the mobile navigation. It contains logo and navigation links through the app.
This reusable element is the CTA of your app. It contains call to action.
This reusable element is the blog card used on all pages.
Highlighting the workflow with color is a great way to separate actions in essence and significance. Below is the Gloria UI standard for the use of colors with a detailed explanation.
The standards below are for informational purposes only. Any discrepancy is not related to the functionality of the application.
Gray - All other actions.
Blue - The actions taking place on our screen do not utilize the application's resources. For instance, when an element is clicked and a popup is opened or closed.
Red - This action involves deleting or resetting values. For instance, "Delete a thing or a list of things," as well as "Reset a group" and "Reset inputs."
Green - These actions involve creating or modifying entries in the database. For example, "Create a new Thing," "Make changes to a thing or a list of things," as well as "Copy a list of things," and so on.
Orange - Actions related to your navigation. For example, "Navigate to a page," or "Do when a condition is true" – when you use specific values for checking, such as "When the current user is logged in," and so on.
Purple - The significance of this color is determined by the developer themselves, as it is done due to the fact that everyone has their own approach to development.
Cyan - Actions utilizing Custom Events – lengthy tasks that involve the creation, modification, deletion, and plugins within a single comprehensive workflow as steps.
Brown - Custom workflow, API workflow, and similar tasks.
This data type stores user-related information.
First Name
text
Stores the first username
Last Name
text
Stores the last username
Avatar
image
Stores the user image
Demo
yes/no
Stores the type demo
Plan
Plans (data types)
Stores the user's plan type data
User Type
User Type (options sets)
Stores the user type (Admin/Customer)
This type of data is used to store images from partner companies.
Image
Image
Stores the images companies
This data type is used to store plan proprieties.
Name
text
Stores the plan name
Meta Description
text
Stores the plan description
Price
number
Stores the price value
List-user
List User (data types)
Stores users corresponding to the plan
This type of data is used to store the blog post.
Title
text
Stores the blog post title
Meta Description
text
Stores the blog post meta description
Content
text
Stores the blog post content
Image
image
Stores the blog post image
This type of data is used to store the FAQ.
Question
text
Store the FAQ question
Answer
text
Store the FAQ answer
This type of data is used to store the legals terms.
Name
text
Store the of legal terms name
Content
text
Store the of legal terms content
Admin
Customer
This option set contains the type of the user.
Follow us:
Check all privacy settings by the following link before launch:
💡Tip: The User data type has the following fields: email, Modified Date, Created Date, and Slug. These fields' values can be used in workflows, conditional formatting, etc. To learn more, see the
The template is sold as is. Feel free to contact us with any questions and we will be happy to assist you –
Facebook:
Twitter:
