Thank you for purchasing and using Zeroqode's Eaty Template to build your web app.
This Setup Guide is not a step by step customization document, however it is a guide for helping you gain a greater understanding of how the template is set and works and overall how Bubble works.
If you have general questions regarding template or setup guide we will happily answer them and provide guidance through our forum.
The landing page is the "index" page which is already set as (new index) in the page Edit settings which can be customized:
You can delete "index_old" page by click the (🗑️️) trash icon which can be found when the page or reusable elements menu is opened:
Next part we'll provide demonstration of Elements Tree and Workflows attached to elements present in this page.
It is designed for mobile responsive UI. It comes a condition written for it to appear when current page width is less when 450 px, which is basically mobile devices:
It has a workflow event with a Toggle GroupFocus mobile menu when button is clicked:
In header there are 4 buttons which are placed for demonstration purposes in order to redirect to each application page for test demo: Button APP DEMO, Button RESTAURANT DEMO, Button DRIVER APP DEMO and Button ADMIN PANEL DEMO. These demo buttons can be deleted from landing and should be deleted in order to create a personalized User Experience, by searching the Group Desktop Menu in search element bar and right clicking on the group will trigger additional actions which will have Delete action to delete this group of buttons:
Deleting this group will delete all workflow actions assigned to respective buttons which can be found in the Demo Buttons Header folder under Workflow tab:
Group Image and Content is part of Landing page and is the Parent Group container which has a background set as a Static Image or Dynamic Image can be defined. Inside the group can be seen Group Text Content consisting of elements: Text Are You Hungry, Text Discover restaurants, and Button GET STARTED
For the Button element there are conditions in place, on hover a color is changed and when button is not clickable
Also the Button has a Transition which offers a smoother way to color changes
The Button also has a workflow setup on click which can be found in GET STARTED workflow folder, which will show a popup Login/Signup.
Is a Group (Focus) part of Landing page and is the Parent Group container which is attached to a reference element, in current setup you could find it referencing to Group Mobile menu button, containing Group Menu Mobile consisting of elements 4 buttons which are placed for demonstration purposes in order to redirect to each application page for test demo: Button APP DEMO, Button RESTAURANT DEMO, Button DRIVER APP DEMO and Button ADMIN PANEL DEMO
These demo buttons can be deleted from landing and should be deleted in order to create a personalized User Experience, by searching the Group Menu Mobile in search element bar and right clicking on the group will trigger additional actions which will have Delete action to delete this group of buttons:
Deleting this group will delete all workflow actions assigned to respective buttons which can be found in the Demo Buttons Mobile folder under Workflow tab:
It is a reusable element throughout the template as well part of Landing page and is the only reusable element which must be placed on page in order to use it. However if it requires to be edited, open Reusable Elements category, choose the element and start editing it.
Group Slider is part of Landing page and is the Parent Group container which has inside 4 Groups: Group Fiend Food 1, Group Fiend Food 2, Group Fiend Food 3 and Group Partners.
The Groups Fiend Food 1, 2 and 3 are designed to work as a part of sliding effect on landing in respective block. They contain the elements Group Image, Text and Group Buttons
Group Buttons is an element which contains the Button > 3, Button > 2, Button > 1 and Group Slider indicator elements required for actions inside the slider.
Group Slider indicator contains the 3 groups for each slide in respective category First, Second and Third categories:
For Buttons > 1, Buttons > 2, Buttons 3 and two out of three Group Slider indicator elements have actions on click to slide through and show slides. All actions are placed in Slider Buttons workflow folder.
This group contains placeholder logos which are placed inside a group (Group Logo 1, Group Logo 2 and Group Logo 3) and can be customized or removed entirely.
Is a Group part of Landing page container for the Group Text Content and RepeatingGroup restaurants. It is mostly used for displaying content like text description.
It is the group which contains the Group Content to display the Text description with font size 40, inside there is Group Description content used as container for Text description and Group Bar as a style element.
Group Test Demos element is designed primarily for navigation to Demo links inside the categories group which will be described later. The group contains the MaterialICon and Text as visual representation. It comes with action workflow to scroll to respective group element.
Repeating Group element is primarily designed to display list of things from database, for that we use additional containers to display different fields like Group restaurant item for restaurant, Group Image for image and Text elements which represent Restaurant Name, Restaurant Description and Restaurant Location.
Group which is part of Landing page, a container for the Group Categories Content. It is used for displaying content like text and links to demonstration pages.
The group contains the text description and demo links with respective workflow found in the Get Started Demo workflow folder within 4 Groups (Group Owner, Group Users, Group Driver, and Group Restaurants).
Part of Landing page, the group is primarily designed as footer with copyright, logo information. The parent Group Footer Content comes with Group Content Logo, Link and Text. All the elements can be replaced with owns ones.
The app page is primarily mobile designed in terms of UI/UX. The layout contains 3 tabs which you can scroll between. The tabs are visible via 3 Custom Set States:
cart. Whenever a user is logged on the page the default value set is
The page app view when a user is logged can be seen like this with set state value
Going through the other 2 tabs Cart and Profile the respective set state values will be set
profile to display page views