Copying Pages & Adding Screenshots

[00:00] Hey folks, I'm going to make a couple videos here to kind of explain how to do a couple things while I'm out. So one of the first things is building new pages and adding content in, right? So

[00:10] taking the content that's written in Notion and getting it onto the pages. So how to go about that? First thing is you're going to want to copy the page. So we can certainly build a page from

[00:20] scratch, I can cover that later, sort of different video situation, but I think at this point the easiest is probably pick the closest page that you want to replicate and duplicate it. So I'm

[00:30] using this communications one as an example. We're going to go in here and then you're going to hit pages and then go to the page settings and at the top there's a duplicate button. So you'll duplicate

[00:40] it and that's going to switch to this new page settings and then you can give it a name. I'll just call this George Demo. You can see it's giving it a new slug and telling you where it's going to

[00:50] be. You want to make sure that it's in the dev folder, right? So this is in solutions instead of dev and then I can hit create. Okay, first thing you always want to do is visually change the page,

[01:00] right? You want to make sure that there's some visual cue that lets you know like you're working

[01:10] on the right page. So that's almost always the first thing I do is like change something just so you don't accidentally edit the live page or replace all the content with the other one. You get it anyway. So you can literally go through double clicking on each piece like let's say it's

[01:20] one-to-one. You're just like I need to swap this stuff, right? Like you can double click on these

[01:30] and just go this is the new header, right? One thing you want to avoid is if like you want a dramatic line difference, right? Like that. Don't do it like that, right? You want to copy the piece.

[01:40] So take the the actual object, copy, paste and you can have as many headers as you like, right? But you want to make sure that you don't add like line breaks or any kind of like fancy

[01:50] styling inside of the boxes. If you want this to be two lines, duplicate it. And that's for mobile styling and for a bunch of other things. But the other piece is you know these things have

[02:00] some variability. You can also change the way that these things look on the page. So instead

[02:10] of it being centered, we can get rid of the center pieces and now it's this wider bit.

[02:20] And if you're like actually I want to put an image next to it or something else, then you could add that as well. Again, I don't want to rabbit hole because I have a tendency to do that. So the next piece would be say like adding and building up the content here. So let's say that

[02:30] you want to add some other pieces in here and you're like oh I want the the bullets or some

[02:40] other thing instead of just a paragraph. We can go and find that. So I believe that we have that stuff in components or maybe it's on in basic. These are all of the different layouts we've made.

[02:50] So here we go. So now we have this content group and this bz icon list. We don't need the content

[03:00] group. We already have one of those. So we need this icon list. I'm going to have it selected. I'm literally hitting copy, command c. I'm going to go back and find my page, george demo, and go

[03:10] down to where we had it. I'm going to hit paste. Okay and so now they're there. I don't need that many right. Let's say I only want three. I can just delete two of those over here. Okay so now I have

[03:20] my icons in. You can change out what the icon is but I'll leave that for later. You can change the

[03:30] text by double clicking and editing it. And then we have the image. So let's say we want to use a different image that we have. I can click on the the little gear, hit replace, and that's going to

[03:40] show me the media. All the different media we have right. And so you'll see you can kind of see them the the steps that I'm going through as I'm uploading. I'm like where the thought is but you

[03:50] can kind of scroll through and find something. So let's say the nurse one and now we have that piece in here for the vaccination record. Makes no sense but whatever. And then we also each of

[04:00] the images are basically built up in a series of layers. There's actually more if you if you go to

[04:10] some of the live pages you might really confuse yourself because there's like four more of these things in there and that's all I can do the fancy fade in effects. But for now we're just doing the

[04:20] static image to get something up and then we'll go back and replace it later. So for that we need this kind of build of multiple pieces. So there's this image wrap as graphic and then the actual

[04:30] image is what you're replacing. So if you just go and click on it that's what you're going to get right. So I'm over here randomly click I'm going to get the image one. There is a background now

[04:40] as well. So for example if I put that in and I'm like oh I actually want to you know put it on something I could say you know cyan right. And now it's going to fill that in that background in.

[04:50] That means that all of the images that I'm using have transparent backgrounds to them such that you can basically replace any of them.

[05:30] This is just a general type of image class that I have for the site that controls all

[05:40] the images at a really high level. And then within that, you can sort of add stuff to it.

[05:50] So I have a screenshot that I grabbed from Figma, or sorry, from Notion, and I uploaded it. Here it is. You can see that it doesn't look great, right? Like on the site, you can barely see it. It's cut

[06:00] off. So to quickly style it, I have a combo class you can add to image called screen. And once you do screen, it basically does a couple things. One, it inherits the size

[06:10] and the proportions of the image. So it'll look like it's on some device or whatever, or some window. It gives it a border, and then it gives it a drop shadow.

[06:20] The drop shadow is a little harsh, to be honest. So I'm going to adjust that. Yeah, there we go. But either way, you get the idea that now it can take basically any image

[06:30] that you throw at it, and it'll fit the stuff inside of it. So in kind of in the meantime,

[06:40] if you're like, oh, we need to just like get stuff on the site, you can do like screen grabs and plop them in. This is where obviously the resolution of the screenshots has a big impact,

[06:50] because the larger the window that you're screen grabbing, the less pixels per pixel you're going to get out of it on the website. So this is where it's better to kind of do regions that are smaller,

[07:00] and that can be where it's tricky to kind of make sure you get everything in the frame.

[07:10] More screenshots don't always work out, but in any event, that would be how you go about that, and that should then work and cascade down for the other device sizes as well. See, that's a little wonky. I'm just putting that up real quick.

[07:20] Don't edit things live, George. Never a good idea. I'll do this later, after the video. Anyway, that should hold you over as far as being able to kind of build out content and kind of get

[07:30] stuff in place to get it live prior to me getting back. And then once I am back, I'll be

[07:40] able to kind of go through and clean these up and kind of help figure out where we want to add more.