Plugins
Templates
Blocks
Template Setup Guides

Eaty Template Setup Guide

Introduction

Hello, Bubblers!

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.

Landing Page

The landing page is the "index" page which is already set as (new index) in the page Edit settings which can be customized:

Landing Page (Index)

You can delete "index_old" page by click the (🗑️) trash icon which can be found when the page or reusable elements menu is opened:

Delete index_old

Next part we'll provide demonstration of Elements Tree and Workflows attached to elements present in this page.

FloatingGroup Header:

FloatingGroup Header is part of Landing page and is the Parent Group container which has inside Group Header consisting of Group Mobile menu button, Image Logo, and Group Desktop Menu

Group Mobile menu button

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:

Condition placed for Group

It has a workflow event with a Toggle GroupFocus mobile menu when button is clicked:

Toggle GroupFocus Mobile menu action, Workflow

Image Logo can be customized, in order to change the logo find the Image Logo element and change it to a Static or Dynamic value:

Image Logo for app

Group Desktop Menu

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:

Delete Group Desktop Menu

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:

Demo Buttons Header, Workflow Folder

Group Image and Content:

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

Group Image and Content, Static Image

Button GET STARTED

For the Button element there are conditions in place, on hover a color is changed and when button is not clickable

Button GET STARTED, Conditions

Also the Button has a Transition which offers a smoother way to color changes

Button GET STARTED, Transitions

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.

Button GET STARTED, Workflow folder

GroupFocus Mobile menu

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

GroupFocus Mobile menu, referencing Group Mobile menu button

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:

Delete Group Menu Mobile

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:

Demo Buttons Mobile, Workflow Folder

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.

Reusable Elements category, Login/Signup PopUp

Group Slider

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.

Group Fiend Food 1, 2 and 3

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 Image
Text Element
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:

Group Slider indicator

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.

Slider Buttons, Workflow folder

Group Partners

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.

Group Partners

Group Restaurants BG Image

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.

Group Text Content

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 Description content

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.

Group Test Demos
Group Test Demos, workflow

RepeatingGroup restaurants

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.

Repeating Group restaurants
Group restaurant item
Group Image
Text elements, representing Restaurant Name, Restaurant Description and Restaurant Location

Group Categories

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.

Group Categories Content

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).

Group Categories Content
Get Started Demo, Workflow Folder

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.

Group Footer Content

App Page

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: profile, restaurant, cart. Whenever a user is logged on the page the default value set is restaurant.

Set State action when User is logged in event occurs

The page app view when a user is logged can be seen like this with set state value restaurant :

Restaurant view

Going through the other 2 tabs Cart and Profile the respective set state values will be set cart and profile to display page views

Cart view with items
Empty cart view
Profile view

App_Driver Page

Profile Page

Restaurant Page

Restaurant_Select Page

Reset_PW Page

404 Page