Welcome to part two of our Bubble tutorial series looking at how to build a no-code CRM using Bubble.io. In part two, we're going to be looking at a lot of design to do with building a dashboard page for your CRM. And we're going to be using a Figma design and incorporating that into the design of our Bubble app.

Now, if you're learning Bubble, you need to check out our website, planetnocode.com, where we've got hundreds of Bubble tutorial videos, many of which you cannot find on YouTube. They are exclusive to our members at planetnocode.com.

But let's launch into this video by, first of all, going to our dashboard. Now, our previous video was about login and registration. I think it makes sense to have that on the index. And then when someone's logged in or they've registered, they arrive at the dashboard just like this. So first thing I'm going to do is set up my page on my canvas to be the width of the UI kit that I've purchased. I'm a big fan of using UI kits. You can find some amazing ones at ui8.net. But for this one, the width I'm going for is 1440.

This tutorial is going to include a lot of tips and tricks for working with columns and rows to get that perfect layout. So this is going to be set to a row, and I'm going to add in a floating group because this is going to be my sidebar. And my sidebar width is going to be, say, 280, and it's going to be a column. Then the rest of my page is going to be nested in two groups. I'm doing a floating sidebar because I want the sidebar to stay static even when I scroll the rest of the page. Here's one way that you can make this work. I've got my background group, and I'm just going to call this one Body, and it's going to be of type Column and 100% width. Then I'm going to add in another group inside the body that you can see here, and I'll call this one main container. And this is going to also be a column and width 100 %. But with body, remember, the width of my floating group is 180. So my body is going to have a padding on the left hand side of say, 300.

Creating a Stat-Filled Dashboard for Your CRM

Now, let's add in some content into here. I think first of all, I'll add in a header. Now, there will be a follow-up video where we improve the design of this. But right now, I'm just going to make it functional. I'm going to say dashboard. In my main container, I'm actually going to add in padding here of 20 all around. Oh, I put it in margin. I meant to put it in padding. That's why it's not working. Padding left 300. I just noticed that it had gone off the side of the page there, but that's fine. Right.

Crafting a Floating Sidebar

Now, sidebar, I'm going to make this a different color just so that it stands out a bit. Let's go for a nice gray and then dashboard. Let's create a row which contains different stats, different elements. I'm going to use a group. Basically, to get your layout of rows and columns, you want to be using nested groups, not any more than you need. But you might find that you need to add in quite a few nested elements to get that layout. When you're laying out elements in Bubble, it's so tempting to try and use fixed layout. I mean, that's the default. And you think, Oh, this gives me infinite freedom of where I can put things on my page. But when it comes to making it responsive, it causes real headaches. So you want to be using rows and columns 90 % of the time, 5 % of the time Align to parent. There are some situations where I think Align to Parent is the best option. And then, yeah, fixed. If you can avoid using Fixed, avoid using Fixed.

So this is going to be my row of stats. And so I'm going to make it of type row and then 100% width. I'm going to add in a group because this will be what contains one of my stats. And going back to the UI kit that I'm using… I'm going to add in a border. This is going to be a column, border, solid, pasting. Okay, pasting doesn't work. Now I write in… That's a Hex code for the color. Then the border radius is 12. Okay, and then there's going to be some internal padding of 24. And I'll add in a title for it. It's getting roughly the size that I want. In fact, I'm going to use a custom style here. So the title I want to use is 16. Now the font app here, this is the default one from creating this app, is OpenSans.

I'm going to change that to Inter. So I go... Actually, I'll go into styles and I change the default to Inter. Here we go. And it's going to be 500. And then I'm going to add in a margin on the bottom of 24. And I'm going to call this today's revenue. Make the width 100%. And now I'm going to save it as a style. I call it header card. Cool. And then I could put any stats that I wanted to below it. But I want to put four of these in the row. So I'm selecting my group D, and I'm going to paste into the parent my four. And then I'm going to set this to have a gap between, apply gap spacing between elements. And the gap I'm going to use is also 24. Very consistent design here. And now I want to get rid of the fixed width here. So I'm going to put a min width of 200 in each of them so that when the page is reduced to a certain size, they won't get any smaller because I'm going to have stats in there in the end. But right now, I want them to fill the space.

Cool. Okay, so then I could put my other titles in there. Now, I'm going to put in a group down here just so I can illustrate the floating sidebar. This is going to be width 100%, and I'm going to say min height of 1,000 because I want it to encourage my page to scroll. Then I'm going to set the background color to red, so it really stands out. Lastly on the floating group, let's start putting in some parts here. I'm going to have 36 padding on the top, 16 on the side. Right, so up top, in fact, I'm going to have the same typography as here. Oh, where did that go? Paste into there. Brilliant. This is going to say dashboard. Then I'm going to add in another group and it's going to form part of my navigation. I'm using a group because I'm going to combine an icon. No, actually, I'm going to use a link element. Link. I'm going to have overview and make this width 100%. Get rid of min height. But then I'm going to give it a bit of palling top and bottom of eight. Okay, so that's still nicely centered it.

Then let me show you a trick with FontAwesome. So Fontawesome version four is bizarrely it's out of date, they say it's so 2017, but it's the default icon library that Bubble those in. It's what you get when you use the icon element. And you can do a neat trick here, which is if I just find the appropriate one, yeah, let's say line charts. I can copy the label here, and then I can write it in, in line in the text using BV code, which is a little bit like HTML, but in square brackets. And you can see I get the icon in there and I've put two spaces. Yeah, not looking bad. I'll copy and paste this. So you get an idea of the layout. Actually, I'm going to add in another style here, which is going to be that this is Inter 16 600, so I'm going to save it as a new one, I call it nav link, and then apply it to all of my existing links. Hopefully, as we go along, you're picking up some handy tips of how to design well in Bubble. Right, now I'm going to preview. So I can scroll my page and my sidebar stays fixed.

Making the No-code CRM Responsive

Now I'm going to show you one really handy trick for making this responsive, although we will feature making the whole thing responsive in a later video. But just to prove that I think this is one good way of going about adding in a floating sidebar. If we go into responsive, we can see it collapses down. And really at some point, I want to get rid of the sidebar. So why don't we say, tablet, portrait mode, we get rid of the sidebar. So I'll add in a conditional statement and say, when page width is equal to or less than 992, we get rid of it. Now, because it's a floating sidebar or a floating group, it hasn't actually taken up any space on our page. The way that we're taking up space on the page is to use a left-hand padding on body. I add in the same rule here. When the current page width is equal to or less than 992, then I make my padding left zero. Look, now we have a responsive design. And what I've done in the past is I've taken the innards of my sidebar and turned them into a repeating group.

Sorry, not a repeating group, a reusable element. So I then placed that reusable element in my sidebar, but I can also place it in a popup or a, what's the one I'm looking for? A group focus, so that when a hamburger icon is clicked, I get exactly the same set of links, exactly the same layout as the sidebar.

That is part two wrapped up of how to build a CRM using NoCode and Bubble. In other videos coming up, of which we're going to make them member exclusives, we're going to give you two, but there's many more to come, and you're only going to be able to access them if you become a Plant No Code member. And we're going to be covering privacy rules. We're going to be covering data, database structures, how to really flesh out the CRM into something that is usable for your business or something that you can sell on to clients.