Sections

You can think of sections as blocks that span the width of the page, such as a header, hero section, pricing or footer section to name a few. They include elements such as text, buttons, images and icons and are grouped together in a group that works responsively.

Once you start stacking sections vertically, you're building a page from top to bottom.

Be careful not to move the elements within the sections as this will disrupt the responsive settings.

How it works

With the panel open, click on the sections icon in the header and browse to a section category. You can preview a section by clicking on the magnifying glass. Once you find the section you need, click on the copy icon.

You have 2 paste options:

1. Paste using your keyboard shortcut: The section will be pasted at the top of the page.

2. Click on 'edit' in the Bubble editor, then select Paste from Frames: This will paste the icon within your current viewport. (recommended). You can also use the standard Bubble paste command but this will paste the section at the top of the page.

Editing sections

We designed Frames so that all you need to do is add your copy (text), images, colours and icons etc.

The sections are designed using pixel perfect responsive settings. Avoid editing the positioning or responsive settings, as the sections won't behave as intended. We cannot provide support for sections that have been repositioned in this way.

pageVideo Tutorials

Section types

Blogs

These are card layouts that work perfectly for blogs but could be used for any section of your app where a card layout is suitable.

Brands

This section enables you to highlight brands that you have worked with or that endorse your product. Replace the grey placeholder images with images. It's best practise to format the logos consistently so that they are a similar shape. The best place to find logo consistently is on a brands social media page.

Content

Content sections are sections to draw attention to your products leading features. You probably want to make use of your main product images or screenshots here.

CTAs

A CTA or a 'call-to-action' and it's an important section for any landing page to convert your customers in some form or another. Either sign them up to your product or subscribe them to a mailing list etc.

FAQs

A frequently asked questions section.

Footers

Footers are placed at the bottom of your page and contain an index of your app links as well as external social media links

Forms

Beautifully designed authentication, onboarding & password reset forms that can be repurposed into any for that you need.

Galleries

A range of image gallery layouts in a grid structure. Replace the grey boxes with images. If the images are static, edit them first so that they are in a 4:3 aspect ratio. This is ensure the best behaviour.

Use WEBP format to achieve the best size vs quality result.

Headers

Headers contain your logo on the left and buttons to take actions such as sign up or log in. Some of the header variants contain icons for mobile. This is just an icon, you will need to build the menu yourself.

Heros

A hero is undoubtedly the most important part of any page, as it's the section that is seen first on page load. Paste your hero section directly beneath your header.

Pricing

Display your products pricing options within this section.

RG Lists

Fully responsive repeating groups from 2 columns up to 7 columns. Includes text, icons and buttons.

RG Grids

Coming soon

Stats

Champions your product achievements here.

Teams

Highlight your team members in this section.

Testimonials

This section enables you to display customer feedback.

Titles

Bold titles to draw attention to your message. Centred options as well as 2 column layouts with buttons.

Last updated