Hey everyone,
While Bubble is not a dedicated website builder, creating a landing page in Bubble is nevertheless pretty easy - especially using our openBuild library with landing page building blocks. In just a few minutes you build your own custom Bubble landing page!
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.
In this post, I’ll walk you through creating your own custom Bubble landing page using openBuild.io. Let’s get started!
Step 1: Create a new Bubble app
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: Enable responsiveness
Create a new page in your Bubble app and uncheck ‘Make this element fixed width’ to enable responsiveness
Step 3: 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 4: 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 5: Pick a hero
Pick 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 6: 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 7: Modify content and change styles
Once all the sections are in place, start modifying the content and updating the styles.
Like mentioned in step 1, if your app is based on the openBase Starter Template you are able to use our style system. Simply, click on an element - such as text - and hit ‘Edit style’ to change the text properties on all places at once.
Step 8 (optional): Reduce whitespace for mobile view
To make the page look better on mobile, you can reduce the whitespace on the page with ‘collapsible elements’. You do this by adding a normal group element with no background that you set to a certain height (in my example I set it to a 100 px). Make sure the following settings are checked:
This element is visible on page load
Collapse this element’s height when hidden
Then go to the tab ‘Conditional’ and add the condition “When current page width <700px” (or choose another width that suits your design). Choose ‘This element is visible’ and make sure it’s unchecked.
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.
That’s it If you have any questions, let me know!
Cheers,
Jeroen
