How to design a landing page in Bubble.io: Step-by-Step Guide

Open your Bubble editor and go to the Design tab. Click on the index page (or create a new page called 'landing'). Select the page itself and in the Layout section of the Property Editor, set the container layout to Column. Set the page width to Max width 1200px with center alignment. This creates a vertically stacked layout where each section sits below the previous one. Remove any default elements on the page.

Click the + icon in the Element Palette and drag a Group element onto the page. Set its layout to Column, width to 100%, and add 80px top and bottom padding. Inside the group, add a Text element for your headline (set font size to 48px, bold, centered). Below that add another Text for your subheadline (20px, regular weight, centered, max width 600px). Add a Button element below with your CTA text like 'Get Started Free'. Style the button with a bold background color, 16px font, 16px vertical padding, and rounded corners (border radius 8px).

Below the hero group, add a new Group with Column layout and 60px vertical padding. Add a Text heading like 'Features' (32px, bold, centered). Below the heading, add a Repeating Group. Set its type of content to empty (we will use static content). Set layout to Row with 3 columns (fixed number of columns: 3), min height of 200px. In each cell, add an Icon element, a bold Text for the feature title, and a regular Text for the description. Use the Repeating Group's data source as a static list or create a Feature Data Type with title, description, and icon fields.

Add another Group below the features section with a subtle background color (like #F3F4F6) and 60px vertical padding. Add a centered heading 'What Our Customers Say'. Below it, add a Repeating Group set to Row layout with 3 columns. Create a Testimonial Data Type with fields: quote (text), author_name (text), author_title (text), and avatar (image). Populate sample data in the Data tab under App data. In each Repeating Group cell, add an Image element for the avatar (64x64px, rounded to a circle), a Text for the quote in italics, and Text elements for name and title.

Add a new Group with Column layout and 60px padding. Add a heading 'Pricing'. Below the heading, add a Group with Row layout containing two Text elements styled as toggle tabs: 'Monthly' and 'Annual'. Create a custom state on the pricing group called billing_period (type text, default 'monthly'). Add workflows to each tab text: when clicked, set the custom state to the appropriate value, and use conditional formatting to highlight the active tab. Below the toggle, add a Repeating Group in Row layout with your pricing tiers, showing the plan name, price (conditional on billing_period state), feature list, and a CTA button.

Add a final Group with a contrasting background color and 60px vertical padding. Add a centered headline like 'Stay in the Loop'. Add a Group with Row layout containing an Input element (placeholder: 'Enter your email') and a Button element ('Subscribe'). Create a Data Type called Lead with an email field. Add a workflow: when the Subscribe button is clicked, create a new Lead with email set to the Input's value. Add an Only when condition to check that the Input is not empty and contains '@'. After creating the lead, reset the input and show a success message using an Alert element or a hidden Text element that becomes visible.

Click the Responsive tab in the top toolbar to enter responsive preview mode. Test your page at mobile (320px), tablet (768px), and laptop (1024px) widths. For the features and pricing Repeating Groups, set them to wrap rows so that 3-column layouts collapse to 1 column on mobile. Reduce hero headline font size on mobile using conditional formatting: when Current Page Width is less than 768, set font size to 32px. Check that all Groups have Min width set to 0 and Max width set to 100% so they scale properly. Adjust padding values at smaller breakpoints.