Build a professional landing page in Bubble: header, hero and feature cards

A landing page looks like the simplest thing you could build in Bubble: a header, a big heading, three cards. But it’s exactly where new builders learn habits that either carry them through a whole app or haunt them later. The difference between the two comes down to containers: which groups exist, what layout each one uses, and where the spacing lives.

This tutorial walks the build the way we teach it in the bootcamp: working from a professionally designed Figma file, translating it into Bubble groups one section at a time. Header, hero, then feature cards.

A container-first build means every section of the page is an outer group that spans the full width and carries the padding, plus an inner container capped at a maximum width that holds the actual content. Get that skeleton right and alignment, spacing and responsiveness become configuration rather than surgery.

Before you build: five minutes in the editor

If Bubble is new to you, orient yourself first (the editor introduction covers this in full). The habits that matter for this build:

• Work from the elements tree. Every element you add appears there, nested inside its parent, so you can always see the hierarchy. If you lose an element on the canvas, “reveal in elements tree” takes you straight to it.
• Turn on the helpful view settings: snap to grid, show element borders, show element labels, and show distances on hover. That last one lets you check your build against the Figma measurements as you go.
• Rename everything. Keep Bubble’s convention (a group is called Group, a text is called Text) but make the rest meaningful: Group Header, Group Container, Group Nav. Text elements name themselves from their content, which helps.
• Keep the issue checker at zero. Incomplete expressions show red; complete ones turn blue. To leave a dynamic expression, click on the edge of the properties panel beside it. That’s just how Bubble wants you to work.
• Learn three shortcuts: Cmd/Ctrl+click toggles down through stacked elements; right-click opens the contextual menu (copy, paste, replace element type, group elements into a container); Cmd/Ctrl+C and V copy and paste as you’d expect.

One more note: Bubble has a Figma import option, and we don’t use it. How designers structure a Figma file is not how developers should structure a Bubble app. Read the design, then build it properly.

Read the design before you touch the editor

In Figma, click an element, hold Option (Alt), and hover outside it, and the padding and spacing measurements appear. That’s how you’ll pull every number in this build. Our header is 1440 wide and 64 high, with 156 pixels of padding on each side and 24 pixels between the nav links.

Step 1: configure the page

1. Click the index page and set its container layout to Column, aligned to the top. Sections will stack down the page.
2. Set the page width to 1440 to match the design.

Build the header

1. Drag a Group onto the page. It snaps to the top, because the page is a column. Name it Group Header. While you’re building, give each group a temporary background colour so you can see what’s happening; you’ll strip these out at the end.
2. Set Group Header to a Row with a fixed height of 64, and add 156 padding on the left and right.
3. Add another group inside: Group Container, also a Row, vertically centred. Leave a minimum height on it for now; if you fit it to content while it’s empty, it collapses and you can’t see it.
4. For the logo, add a Shape placeholder, fixed at 168 × 27. Later, right-click it, choose replace the element type, change it to an Image, and upload the logo. The dimensions carry over.
5. Add Group Nav on the right: a Row that fits its content, containing three text elements (About, Testimonials, Contact) with spacing between elements of 24.
6. Preview. Everything is bunched to the left, which is where container alignment comes in. On Group Container, the options are left, centre, right, space around (equal space at the edges, double in the middle) and space between. Choose space between, which pushes the logo and the nav out to opposite sides. Centre-align the contents vertically, both here and in Group Nav.
7. Once elements are inside, remove the minimum heights so Group Header and Group Container fit to content vertically.
8. Styling: the header background is #FEFEFE, with a drop shadow. In the Appearance tab under borders: outset, horizontal 2, vertical 7, blur 12, colour #222222 at 8 per cent. That’s what lifts the header off the page.
9. The nav text is Inter 400, size 16, line height 24. Bubble takes line height as a ratio, so 24 ÷ 16 = 1.5. Click the grey text colour in Figma to copy the hex code, and paste it into the editor.

The hover underline, without the jump

The design shows a 4-pixel line appearing under each nav link on hover. The naive version bounces: when the border appears, the text jumps up. Here’s the stable version.

1. On the text’s Appearance tab, tick define each border independently.
2. Give the text a default bottom border: solid, 4 pixels, coloured the same as the header background (#FEFEFE). Invisible, but occupying its space.
3. Add a conditional: when this Text is hovered, bottom border style solid, width 4, colour #411AB6.

Because the border exists in both states, nothing moves; only the colour changes. Copy and paste the finished link for the other two, and just change the text.

Finally, protect the layout: set a maximum width of 1128 on Group Container. On screens wider than 1440, the header background stretches but the content stays aligned to the same imaginary line as every other section.

Build the hero

The hero is the first element visible on page load; it sits above the fold. Structurally it’s the same pattern: outer group, inner container, then a left side (text and buttons) and a right side (an image placeholder for now).

1. Add Group Hero below the header: a Row, fit to content in height, no maximum width, with padding of 64 top and bottom and 156 on the sides.
2. Add Group Container inside, then Group Left and Group Right inside that. If they stack on top of each other, your container is still a column; change it to a Row and they’ll sit side by side.
3. Group Right: fixed at 552 × 600, with a roundness of 16 and a placeholder background colour. The image comes later, in high fidelity.
4. In Group Left, add the heading text (Inter 700, size 56, line height 68 ÷ 56 ≈ 1.2) and the subheading (Inter 600, size 24, line height 32 ÷ 24 ≈ 1.3). Copy the copy straight from Figma.
5. On Group Container, apply a spacing gap of 24 and centre-align Group Left vertically.

The design has two different vertical gaps on the left: 24 between heading and subheading, but 48 above the buttons. One container can only have one gap, so nest another group. Shift-click both text elements, right-click, and group elements in a column container. Name it Group Text, give it a gap of 24, and set Group Left’s own column gap to 48.

6. Add a Button. If it lands inside Group Text, go to its Layout tab and click next to drop it down a level, directly beneath. Label it Learn More, then copy and paste for Contact Us.
7. Shift-click both buttons, right-click, and group elements in a row container: Group Buttons, with a column gap of 24, fit to content.
8. Style the buttons (detach the default style for now; styles get set up properly in Module 3). Learn More has the purple background with white Inter 600, size 16 text at line spacing 1.5. Contact Us is off-white with purple text and a 1 pixel solid purple border. Both take a roundness of 4.

Make the header float

Preview the page and something’s wrong: the shadow has gone and the header reads as plain text sitting at the top. Two fixes:

1. Right-click Group Header, replace the element type, and choose Floating Group. Now it sits in front of the page: the shadow reads properly, and it follows the user down the page as they scroll.
2. A floating group no longer pushes content down, so the hero has lost its breathing room. Add the header’s 64 pixels to the hero’s top padding: 128 total.

Build the feature cards

The services section is heading text plus three cards, each with an icon, a title and a description.

1. Add Group Services below the hero (use Layout, next again if it drops inside). Same padding as the hero: 156 sides, 64 top and bottom.

A word on why this is padding and not margins: padding pushes in, margins push out. Set padding once on the parent and everything inside is positioned; with margins you’d need settings on every child element. Keep it simple and avoid margins where possible.

2. Inside, add Group Container: a Column (content flows down), centre-aligned, with the maximum width of 1128 and a spacing gap of 48.
3. Add the heading: “Our services” in Inter 600, size 32, line height 40 ÷ 32 = 1.25, centred. Below it, the intro paragraph in Inter 400, size 18, grey, line spacing 1.3; the placeholder copy is yours to personalise. Group the two into Group Heading, a column with a gap of 16, fit to content. Check the elements tree: if it landed outside the container, drag it in.
4. Build one card, then copy it. Group Card is fixed (tick the fixed checkbox) at 355 × 264, light grey background, roundness 16, padding 24 top and bottom, 16 left and right, row gap 24.
5. The icon placeholder: a Shape, fixed at 56 × 56, with roundness 28, half the width, which is how you cut a circle. Centre it horizontally.
6. The card title, such as “Product strategy”, is Inter 600, size 24, grey 700, line height 1.3. The description below is Inter 400, size 18. Group these two into Group Text, a column with a gap of 8. One subtlety: centring a paragraph takes both the group’s horizontal alignment and the text element’s own centre alignment in Appearance.
7. Preview, then copy and paste the card twice. Because the container is a column, the three cards stack. Select just the cards (collapse the tree and make sure nothing else is highlighted), right-click, and group elements in a row container: Group Cards Row.
8. Figma shows 32 pixels between cards, and a fixed row gap of 32 would work at exactly 1440 wide, and nowhere else; on any other width a card spills out. Instead, set the row’s alignment to space between: the spacing stays even and absorbs small changes in page width. It’s also the setup that makes this section easy to make responsive later.

Strip out the temporary background colours, double-check the real ones against Figma, and preview. You’ve built the full first pass of a professional landing page: structured, aligned, and ready to move into high fidelity.

Try it yourself

Rebuild the three sections from scratch without looking back at the steps. Page as a column, then for each section: outer group with the padding, inner container with the max width, content grouped by spacing. If you can name every group before you create it, the lesson has landed.

This skill in the AI era

Container thinking is the part of this tutorial that never expired. When we build pages now, Claude Code writes the flexbox, but it still needs to be told the structure: what’s a section, what’s capped at a content width, where the padding lives, what spaces between. Builders who learned that vocabulary in Bubble give better instructions and catch structural mistakes in seconds, which is exactly how visual-builder skills transfer to AI-assisted development. It’s the same discipline we apply when we build websites and apps with AI in Sydney: the machine handles the syntax, the human owns the skeleton.