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

hey everyone in this tutorial I'm just going to go through the differences between these three elements the pop up the floating group and the group focus to point out some important differences so that you understand which one you need to use when you're working with your application because they all offer a few different things so let's start with the pop up the pop up is a full-screen overlay so if I grab a pop-up element here and add it to the page you can immediately see that the background is taking up my entire screen that's how it'll look like when you preview the page here too now you can actually adjust how that background looks so if I remove the preset style that's added to the pop-up you have control over the color of the background so I can actually change that you can also change the transparency so if I don't even want to see a background at all I can pull down the transparency a bit down to zero and there's no background you can see the whatever's on your page more clearly there if you do want to have a little bit of a distinction between what's on your page and the content of the pop-up which is this square here you can um you know increase the color increase the transparency there but you can also blur it out a little bit which you know helps you keep that distinction between the background and the foreground so if I set this to 2 you can see my text back there gets a little bit blurry now the users attention is here and this pop-up is great for many things one of the most common things is alert messages confirmation dialogs anything where you need the user to pay attention to whatever is happening here before they can move on to something else if they're deleting something important you can use a pop-up to show hey are you sure you want to delete this as a secondary confirmation step and have you know buttons and other text and things happening inside of this container here the pop-up has to be shown through a workflow so pop-ups don't show automatically they're invisible by default so when you add a pop-up you'll want something to trigger it to display so for example a button like this you would start edit a workflow and use the element action show to show your pop up and that way when you click on the button it'll pull it up on the page and will preview it here real quick so you can see show pop-up and there it is okay you can hide a pop-up a few different ways you can do a button inside of the content area here to hide the element so the opposite of show or you can click anywhere outside of this main content area so anywhere in this background space I can click and it'll close automatically if you want to prevent users from doing that from clicking anywhere to close you there is an option here too to not allow the pop-up to be closed it you so you can press the escape button on your keyboard to also close it but that's the same as clicking out anywhere when you check this clicking outside will also be prevented alongside preventing any keyboard keys from closing the pop-up one quick thing to note about designing a pop-up is when you have the element open here in your editor you'll see that the element is placed at the very top of your screen but that doesn't necessarily mean that the user is going to be scrolled up to the top when they see a pop-up it's just where you're designing the the element so for example if I were to move the button way down at the bottom of the page and let me actually turn this off and I were to open the pop-up while I'm at the bottom of the page the pop-up will still show here in the same place you can see that I'm not being scrolled back up like it might seem because when you're editing a pop-up it's up here but it actually will show wherever you are on the page when you trigger it ok let's talk about the let's talk about the floating group next so the floating group is a sticky type of group it sticks to the page so that when you scroll the page you will still see the floating group a very good use case example here for this is your page header so I'm going to add a floating group to the top of my page here this is very popular with websites and apps in general going to give it a background so that we can see it a little bit better okay and let's just say that this is you know our header with buttons and maybe a logo things like that will give it some styling so that we can see that all right so we want to be able to see this header at all times at the top of the page no matter how far down we are have scroll to the page so what you want to do is number one place it if you want it to be floating at the top of the page place it at the very top of the page that top boundary of the floater floating group element needs to meet the top boundary of your page and you want to set the float relative to the top if this is a full width element then you don't really need to worry about horizontally how its floating but if you know you have a specific width to it and you want it to be stuck more to the right or more to the left then you can choose left or right there you have a floating z-index so most times you're going to want these things to float on top of everything else but you do have the option to have them float beneath other elements on the page so playing around with these settings will let you see how the behavior changes you can also float things to the bottom of your page you can have it float in relationship to both so you can have it in the middle of the page for example and it would still stick there as you scroll it'll just kind of float in space or you can have it float to nothing the benefit of having a floating group that is not actually floating relative to anything is that it's an independent element that sits on top or below everything without affecting changing widths on the screen and responsive design doesn't really affect it because the elements around it aren't actually on the same plane as it it's kind of its own thing you can sort of think of it like a pop-up in that way and that it's completely independent it's not something you'll use too often but there are cases I've seen where to make the responsiveness work well with overlapping elements you sometimes want to put stuff in a floating group or it's relative to nothing because you don't want responsiveness changing things up so I'm going to refresh the page here so that we can see what the floating behavior looks like and you can see as I scroll up and down my header content is stuck at the top there so that's what the floating group does now let's talk about the group focus group focus one of the best use cases for that is tooltips so the group focus is also something that by default is not going to be visible you have to show it in a workflow so I'm going to add a group focus to my page and you'll see what happens immediately the first thing that happens is it immediately jumps to the top left corner upper left corner of your screen that's because it needs a reference element this requires another element to be attached to it so if you think of a tooltip usually you'll click like a little eye icon or a little help icon that would be the reference element to the group focus so let's say that our button here to show group focus is our reference element and once I choose that you can see that it snapped over to the reference element and if you need to give it a little bit more spacing or adjust its positioning a little bit you can offset these things by adjusting these values here so if I do offset by 10 pixels it's going to move it down 10 pixels or left by a hundred pixels it's going to offset the left side of it by a hundred pixels like that so and you can still you know change the sizing if you want this can be whatever sizing you decide there and inside of the group you can add whatever information you want so if this is a tooltip you can add a text and say this is sound extra info about the future right and again in order to show this group you want to do it through a workflow this isn't going to be visible by default so when we show group focus I will use the element action to show group focus and I'm going to preview the page so that you can see how this works the group focus element can be hidden with the hide action as well so if I click you can see it's hidden are shown there but you can also hide the group focus by clicking anywhere outside similar to a pop-up and that's not something that you can lock off and prevent that will always happen if you click outside of the group focus it will hide it if it's visible of course but showing it you do need to do that with a workflow you can hide the group focus like I said through a workflow as well - you know if you have a button inside of the group focus that's set to hide you can do that as well right now those are the differences between those three elements hopefully that makes it a little bit more clear to you about which is going to be appropriate to use depending on the feature that you're building if you like this video please give it a thumbs up and make sure you subscribe to the channel to get updated anytime there is a new tutorial thanks so much for watching

Channel: Coaching No Code Apps

Views: 16,678

Keywords: Bubble, Coaching Bubble, Bubble Lessons, code free, bubble.is app, bubble app builder, bubble app builder tutorial, build an app without coding, how to build an app without programming, apps without code, visual programming, no code app development, popup, floating group, groupfocus, tooltips, header, pop ups bubble.is, bubble.io, no code apps, bubble.io tutorial, bubble.io app, how to use bubble.io, learn bubble.io, bubble.io course, bubble.io bootcamp, buildcamp, bubble bootcamp

Id: MXW2831eBLA

Length: 9min 43sec (583 seconds)

Published: Wed Nov 07 2018