Sections
Last updated
Last updated
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.
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.
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.
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.
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 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.
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.
A frequently asked questions section.
Footers are placed at the bottom of your page and contain an index of your app links as well as external social media links
Beautifully designed authentication, onboarding & password reset forms that can be repurposed into any for that you need.
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 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.
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.
Display your products pricing options within this section.
Fully responsive repeating groups from 2 columns up to 7 columns. Includes text, icons and buttons.
Coming soon
Champions your product achievements here.
Highlight your team members in this section.
This section enables you to display customer feedback.
Bold titles to draw attention to your message. Centred options as well as 2 column layouts with buttons.
