Headstart 2.0

Zeroqode Startup Kit is a responsive website template packed with 4 homepage variations, multiple subpage variations including contact us, blog and others.

Introduction

Zeroqode Startup Kit is a responsive website template packed with 4 homepage variations, multiple subpage variations including contact us, blog and others.This is a powerful and super flexible tool, especially designed for who wants to start their Business. Also it can be used for Company Website.This Kit is packed with great, re-usable features for your new modern, responsive website project! Easily pick the needed sections or elements and style them the way you want. It’s a clean, crisp and nice design that can easily be adapted and used for variety of websites. You will be able to showcase your content on mobile devices such as smartphones and tablets.

Modern and clean design

Reasonable use of UI elements and whitespace.

100% Fully Responsive

There is no limitation in viewing headstart on any popular device. Headstart is fully responsive from small smartphone screen to big desktop monitors.

Retina Ready

Headstart looks great even on Retina and high-resolution displays. Every graphic element is sharp and clean. No blurry images anymore!

UX ready

We have created Headstart theme with strong focus on User Experience in every detail. Every element is designed to work well on any popular device.

Features

Multiple page styles
Responsive design
Cross-browser compatibility
4 unique homepage layouts
3 variations of headers
3 variations of footers
Google web fonts
Clean and well organized groups
Responsive architecture of the layout
Well thought database
Highly robust and easy to use payment system
Different button styles
Powerful filter system
Customizable layouts
Powerful admin panel
Quick search product
Custom hover effects
Wishlist
Blog
Order history
Checkout
Admin page

Payments: See the documentation on how to set Stripe Payments in Bubble App.

Data structure

Down below you have listed all the data types from the application. Within the app in the Data tab, you can see the description for every field within every data type if you click the chat icon on the right of every data field.

Pages

Index

This is the main page for the template. It provides important information about the features you have while using this template. In a couple of those blocks you can see small previews of what we got, also there's a list with features available on the template.

Admin

Our admin panel is efficiency oriented and is divided in 3 sections. When you enter the admin panel, you will automatically see a list of User's that are registered within this platform . Here you can either delete a user's information or delete it. You also have the possibility of setting a temporary password to a user in case he forgot the account password.

Next tab is related to the products. Here you will see a list with your existing products. You can either edit or delete a specific product, or you can create one. You can also control the products that are published using a checkbox in the initial table.

Last one comes articles tab. Here you can also control what articles are visible on the blog page. You can either delete or edit an article, or you can create a new one.

Blocks_index

This page was intended for demonstration purposes. Here we laid out a summary of components that are demonstrated in more detail on the blocks page. This page can also be remodeled under your own preferences and used as a landing page for you project.

Blocks

Blocks page has within itself a wide range of components UI Elements that you can use in your project. They are fully responsive and ready to go onto your website, all you have to do is just connect the logics behind every action you need.

UI Elements tab has different kinds of panels, a variety of buttons of different shapes and colors and pagination examples. Next comes the actions tab that contains 2 Call to action blocks and notification alerts.

Blocks_forms

On this page are located all the components from the forms submenu. Forms submenu has 3 components which are Regular forms, Validation forms, Extended forms. They are also fully responsive and ready to go on the pages you need them most.

Blocks_components

Block components page holds UI Components that contains 3 options of every kind which i'm going to list here. It has Profiles, Pricing blocks, Login and Register examples, headers and footers. Every design presented there is unique and can fit a whole range of needs.

Article

On the article page you can read the article itself, also you have the possibility to leave a comment to the article and share it to social media if you liked it.

Blog

This is the place where you'll have an overview of all the articles created on your web page. There's two categories of lists with articles, one with all the articles together, and the other one with the latest posts. Also directly on this page you can create a new article.

Catalog

Catalog page is the home of all the products you've created. Here you will have a list of products, as well as the ability to sort them by the highest and lowest price and by the latest arrivals. Right next to the sorting dropdown you will see a search box that is self-explanatory, you'll be searching through the products available on the page.

Chat

The chat page consists of two active zones. The left side is a list of users you've initiated a conversation with, and the right side is the window where you're actually having a conversation with them. On the left side you have a search box that can help you out find the user you'd like to have a discussion with in case there's a ton of people there. You can also visualize this chat in two different formats, slack like and stretch to fit mode. This chat supports image attachments.

Checkout

On this page you can see a container on the left with inputs that collects information about the customer's billing details. On the right side of the screen you have information about your order and a button place order which will lead you to a popup where you will have to introduce personal information that will make this purchase complete. The payment system that is used in our app is stripe.

Contact

The name is self explanatory, contact page gives your users the opportunity to connect with you via email. Also on the top of the contact form there's information about how to localize you in case you have multiple offices around the globe.

Dashboard_index

This page was intended for demonstration purposes. Here we laid out a summary of components that are demonstrated in more detail on the dashboard page. This page can also be remodeled under your own preferences and used as a landing page for you project.

Dashboard

Dashboard page holds elements such as widgets, charts and tables. The elements are ready to go, just copy them to the pages you need and connect the logics behind them. Needless to say that they are responsive on mobile devices as well.

Header_footer

This page was intended to highlight the available design options for both headers and footers. We have three designs for each element, they are all responsive and ready to go on your web page, just copy them and setup the logics behind menu items and icons.

This is the page that logs you in onto our platform - Headstart. Also here you will see a link that will redirect you to signup form in case you're new to the platform.

Plugin_index

Plugins page is a demonstration landing, that will showcase our most used plugins. Here you will have the opportunity to see them in live action. We represented our pinterest plugin that gives you the opportunity to create a pinterest like layout using a repeating group. Second comes the content preloader plugin that creates a loading effect on your layout and keeps the users on the still loading page, without leaving them just with a blank screen.

Next there's the Rich Text Editor that has pro functionality together with another plugin called Bubble page to PDF convertor. You can test them directly on the page by typing some text into the Rich Text Editor input and convert it right away into a PDF.

Agora web conferencing plugin is the one that you will see coming next, here you'll have the opportunity to test it out. All you have to do is share this link with someone else and and enter the same room on both devices.

Video Player advanced features allow you to set the speed of the playback, enable auto-play, auto-replay at the end, workflows to play next, previous, first, last video. You can also customize the colors of the play button and the color of the playing bar.

DataTables is an advanced plugin that gives you the possibility to use data tables with your Bubble database. It includes search, filtering, sorting and much more.

The last plugin demonstrated on this page offers you the opportunity to integrate algolia lighting search as a service solution for your app.

Product_uploader

This page was designed for giving user the opportunity to upload products onto his store. It has all the necessary fields for description, also it has two uploaders one that uploads regular pictures and one for the main image that will serve as a presentation.

Wishlist

On this page a user will have a list of his favorited products.

Reusable Elements Description

dashboardheader

Dashboard header is a customized header for our dashboard page. We had to remove some elements to make it more suitable for this page, but overall the core element that is used within this reusable element, as well as many others is another reusable called headermenu.

header

This reusable is a generic header that will be used on most of the pages. Its core is also the reusable headermenu. You can navigate all over the template using the menus within headermenu reusable.

header 1

This reusable elements holds the first design option for the header element. This header is oriented more towards a fashion store, but it can be restyled and used in a lot of different variations. It can be used both on mobile and desktop apps since it is totally responsive.

header 2

This reusable elements holds the second design option for the header element. This header is oriented more towards an electronics store, but it can be restyled and used in a lot of different variations. It can be used both on mobile and desktop apps since it is totally responsive. It can be set up so that it catches both scenarios, when a user is and is not logged in.

header 3

This reusable elements holds the third design option for the header element. This header can be primarily used for a tech web page, but it can be restyled and used in a lot of different variations. It can be used both on mobile and desktop apps since it is totally responsive. It can be set up so that it catches both scenarios, when a user is and is not logged in.

footer 1

This reusable elements holds the first design option for the footer element. It can be used both on mobile and desktop apps since it is totally responsive. It has links to social media and a couple of menu's which can be changed according to your needs. This is a perfect footer in case you need to have some contrast at the end of your page because of its size and color.

footer 2

This reusable elements holds the second design option for the footer element. It can be used both on mobile and desktop apps since it is totally responsive. This is a tinier footer, used for cases when you don't want a lot of attention on to it.

footer 3

This reusable elements holds the third design option for the footer element. It can be used both on mobile and desktop apps since it is totally responsive. This is a more contrasty footer, used for cases when you need to catch some attention to it. It has social media icons as well as an input that can collect customer's emails that are interested in a particular service you can provide.

footer_new

This is the reusable element used on most of the pages. It's the main footer used for this template.

leftmenublocks

This reusable element was created to make possible navigation between a couple of pages: blocks, blocks_components, blocks_form.

profilemenu

This reusable element is basically an icon and a menu that comes up whenever you click on it. Because it's such a generic option, it was created as a reusable so that we can use it on multiple pages within the template.

storeHeader

This reusable element was created so that it can be used on pages that are related to the shop part of the template. Its core is another reusable used in other headers called headermenu. Besides the core, what makes it so specific, is the wishlist and cart icons. It is used on catalog, checkout, product_details and wishlist pages.

Specific Reference

Payments

Card payments on the platform are powered by Stripe using the default card checkout providing a secure environment for users.

API Keys

Several plugins require you to add your own API keys for them to work properly. You would need to get your own API keys for the following plugins:

Agora Video Conferencing - Web RTC
Algolia Search V 2.0
Stripe

Notes

‌This template comes with explicit notes for Database fields, Workflow Folders, States etc which will guide you with modification process.Database notes.

Custom Code

Blocks_index

On this page you see some html code attached in the Page HTML header. That code will affect Group circle container, and it will apply a multiply blending mode, this was done for design purposes.