Build a Bubble Landing Page in 5 minutes
Bubble is one of the best platforms to build your app. While it’s not a dedicated website builder, creating a landing page in Bubble is nevertheless pretty easy.
Especially using our library of landing page components. In just a few clicks you build your own custom Bubble landing page in minutes!
We developed openBuild, a chrome extension for Bubble that gives you access to hundreds of UI components and widgets to build beautiful apps on Bubble. Learn more about it here.
Today, I’ll walk you through creating your own custom Bubble landing page using openBuild.io. Let’s get started!
Before actually creating the landing page, it’s helpful to first think about the components that it will need. For example, do you want to describe specific features of your app, do you want to share testimonials? What about your team, pricing, an FAQ?
Gain some inspiration from other landing pages, but try to keep yours as lean as possible. Don’t overdo it and consider your landing page as a first prototype that you will improve over time as you gain a better understanding of your audience.
Once you know what your landing page needs, it’s time to start building!
Step 1: Create a new app in Bubble
If you haven’t already created an app, we recommend to start your app on our openBase Starter Template. This will allow you to work with our style system.
To add the openBase Starter template to your templates, go to this link and hit ‘use template’.
Did you already create your app without the template? No worries, it will only take you a bit more time to modify the styles later.
Step 2: Create a new page
Create a new page in your app and name it as you like.
Step 3: Enable responsiveness
Double click on the page to open the property editor and uncheck ‘Make this element fixed width’ to enable responsiveness.
Step 4: Add openBuild as a collaborator
If you haven’t already, open the openBuild extension and add ‘sync@openbuild.io’ as a collaborator to your project (this connects the library to your app).
Not an openBuild user yet? Click here to get the extension and sign up as a user.
Step 5: Pick a header
The ‘Landing Page’ collection in openBuild contains dozens of sections to build your landing page. To build the landing page in this tutorial, I made sure all sections are available for free. Go to the ‘Browse free components’ collection to find them. Pick a header and paste it on the page!
Not an openBuild premium user yet? Sign up - there are lots of great components in the library that help you build apps faster and more professionally!
Step 6: Pick a hero
Start by picking the right hero for your landing page. Paste it on the page and move it down to make sure it touches the header.
Tip: Before modifying or styling the content, I’d recommend first creating the entire structure of the landing page.
Step 7: Complete your landing page with other sections
Pick other sections that you need in the right order. The types of sections that are available in our collection are:
- Headers
- Hero’s
- Features / Benefits
- Testimonials
- Call to Actions (CTA’s)
- Footers
Tip: don’t forget to include sufficient whitespace between each section (e.g. 200px), this will make the page look nicer.
Step 8: Modify content and change styles
Once all the sections are in place, start modifying the content and updating the styles.
Step 9: Hit preview and tweak result
Hit preview to see the result, don’t forget to check the mobile view — tweak where necessary :) Check out my result here (username = username, password = password.
Did you like this article? Make sure to follow Ideable for more tips & tricks to speed up your bubble app design & dev or to learn more about no-code.
Need help developing your app? Contact us here.
