To use this click the link above
At the link scroll down to ‘Add to My Account’
Now go to your Bubble Home Page/Dashboard
Click the orange ‘+New App’ button in the top right
In the popup choose to use free-app as the template for creating a new app
You’re all set!
Quick peak of it in action…
It is a Mobile App design that features:
An animated loading page
App landing page (if user isn’t logged in)
Sign in page
Sign up page
and a 5 page app design - left wide open so you can easily put in your amazing app ideas!
For new users of Bubble, the showing and hiding of many groups, custom states, and conditionals can be confusing, so please ask any questions you have here
Hi - thank you for creating this great free template. This is much better than anything I’d be able to come up with on my own. I’d like to develop something using it and have run into a few snags, was wondering if you’ve found any fixes for this?
When I view the template on my phone (iPhone 7) on the login screen, do you know to make it so that the user can’t drag the page up/down? It exposes some white space at the bottom that takes away from the splash page
Same problem happens on the loading screen
I was able to fix this on my app, but FYI on the preview for the template on my phone the bottom toolbar gets pushed into two rows
In my experience unfortunately from a design/UI/UX point of view, developing on Bubble feels like a constant process of trying to hack elements to behave how I would have thought they would behave by default (i.e. how similar elements behave on other websites I use on my phone). It seems like the design starting point is so far away from what I actually want, vs. on some other platforms (e.g. Webflow) the starting point is much closer to a polished looking product. Perhaps this is why I just don’t see that many examples of really professional, polished looking products coming out of the Bubble design platform. On the other side though the Workflow functionality on Bubble is amazing and I haven’t seen that capability anywhere else
Thanks for the feedback Geoff and glad you like the design!
1 - The toolbar doesn’t show properly when in Debug_mode, I think it has something to do with the Toolbar I used being a Floating Group relative to the Bottom of the screen. Which when in debug_mode is extended
2 & 3 - Hmm, might need to play around with height of the groups a little - I’ll try to get back on that one.
I have limited experience with creating mobile designed apps, maybe @natedogg has some ideas on how to avoid scrolling and whitespace at bottom of an app? Or knows if when an app gets ‘wrapped’ to go to the app store what happens with some of the scrolling and sizing.
4 - thanks for the heads up - I fixed this in the template by switching the Icons from fixed with to being responsive
I definitely agree with you how good design does not seem natural in Bubble, that’s why I try to focus on it with my templates as it is one of the most time consuming parts of creating an app for me. But as you mentioned - it can seem a little ‘hacked together’ and with so many different screen sizes there needs to be constant monitoring and updating
I having problem using the Mobile template, how do you make a group separate from each other, I accidently group together the create account section with other and now it showing on all the pages.
The group J is above all the other groups when I hide or show, it display create account section and I don’t know how to separate them.
Unfortunately designing with all the invisible groups isn’t a very intuitive or simple process, but it is necessary for any single page app.
That being said, here is a way to move groups from one to another. Specifically removing Group U from Group J
Select Group U, and Cut it , you can use CTRL+X (removes it from Group J)
Now click the Eye to make Group J hidden
Then Select the group you want Group U to be in
Now Paste, you can use CTRL+V, Group U into the group
It certainly is. Once you have gone to This Page and added it to your account, then you can use the Template from your Dashboard using the following steps:
Go to your Bubble Dashboard and click New App in the top right of the page:
Now in the popup, ‘Freebie App Design’ should show up as an option in the Template dropdown, select it and then click Create A New App (shown below). Feel free to make any modifications to it that you wish, as you can always make another New App with the original template using these steps
Congratulations on making some very good looking templates !
I havea few apps which I am happy to share with the community too. I couldnot see any steps on how I could list my template. Would you be able to please suggest how I can do that ?
Emmanuel gets into the basics here in the first post, about halfway down. Essentially from the /your_plugins page you can turn one of your current apps into a template:
Firstly great template! I’ve just loaded it and am keen to get stuck in!
One question/issue I have - when I first load/preview the app, after the loading animation, it shows the Landing Page, but without any of the buttons, etc. But if I resize it at all, they all just appear, is this something I’m doing?
The Floating Group at the bottom of the page is only set to appear when certain workflows trigger if to become visible. I was not able to reproduce it becoming visible when the page gets resized. Maybe some screenshots or a link to your app and we could try to find why it is appearing.
Screenshot of running the app with Debug Mode - using the inspect element to see when the Floating Group is Visible
I’ve got some screenshots to illustrate what i meant, it wasn’t the floating group that was the problem, the actual elements on the landing page group don’t display when the app first loads, but when i resize it they appear? pic 1 is first load, pic 2 is after a small resize…
