The Difference between Popups, Floating Groups & Group Focus in Bubble.io

💥 Want to build your MVP in 12 weeks using our exclusive training content and one-on-one support? We're now accepting applications for Built to Scale, the development accelerator program helping founders and CEOs build custom software designed to scale.

Apply here for our next enrollment date: https://coachingnocodeapps.com/built-to-scale

_______________________________

Want more help?

👉 Self-paced learning: https://www.coachingnocodeapps.com/resources
👉 Done-for-you services: https://www.coachingnocodeapps.com/services

_______________________________

Pop ups and notifications can be like gold for an app; they keep users active, engaged, and informed.

The thing is, there are more ways to create "containers" (i.e. pop ups, notifications, etc) than by simply using Bubble's pop up element itself.

Bubble actually has a few different container elements with behaviors that might not seem obvious at first.

You might turn to one of these elements when you:

-Want a full screen overlay
-Want specific positioning of a container
-Want specific sizing of a container
-Have specific requirements for when to show/hide the container

To clarify when to use what, check out the breakdown below of the Popup, Floating Group, and Group Focus elements.

*Pop ups

-Description: This is an overlay element that takes over the entire page.

-Visibility: Popups are hidden by default and must be shown with a workflow. A button click or even a Page Load event can trigger the "Show Element" action. Popups can be closed via workflow or by clicking anywhere outside the popup. If you want to force users to only close through a workflow (i.e. an X or "close" button), then check the box "This popup cannot be closed by pressing 'Esc'" in the popup's settings.

-Positioning: The popup as a whole will always be positioned on top of everything else on your page. When you design a popup, it'll always be positioned at the top of the page, but don't worry, the user can be scrolled further down to open the popup. In run mode, the popup will be where the user is; the user will not be scrolled up the page.

-Sizing: The popup's main content area (the white group you see when you first add it) can be sized to any dimension. The background of the popup is always full screen, which you can re-design to your needs.

-Design: The main content area of a popup can be designed like any regular group. The background has a few options for color, transparency, and blur.

-Example: Confirmation actions to submit a form or delete a Thing are a popular use case for popups because they require the user's full attention before moving forward.

*Floating Groups

-Description: This element can "stick" in place as you scroll through the page so it's always visible.

-Visibility: Floating Groups can be visible on page load, and you can also show/hide via workflows.

-Positioning: Floating group can either "stick" to the top or bottom of the page if you place them at those boundaries of your page. For example, a floating group header needs to be placed at the very top of your page. Play around with the settings to see what works best for you.

-Sizing: Floating groups can be sized to any dimension.

-Design: Floating groups can be designed like a regular group.

-Example: Headers are the most popular use case for floating groups because they keep your app's navigation actions at the top of the screen at all times, even as you scroll down.

*Group Focus

-Description: This element is "attached" to a reference element (another element on the page). Primarily used for showing temporarily.

-Visibility: Group Focus elements are hidden by default and must be shown with a workflow. Clicking anywhere outside of the Group Focus will close it.

-Positioning: Group Focus elements require a "reference" element, which essentially attaches them to that element. If you need to move the positioning a bit, you can adjust the offset settings.

-Sizing: Group focus elements can be sized to any dimension.

-Design: Group focus elements can be designed like a regular group.

-Example: Tooltips are a great use case for the Group Focus element. A help icon serves as the reference element, and when clicked, the Group Focus will display in a position adjacent to the icon.

Now that you know the difference between each element, watch this video to learn how you can put them to use, depending on your specific needs.

Видео The Difference between Popups, Floating Groups & Group Focus in Bubble.io канала Coaching No Code Apps