Paul Davenport | 04:51
Now you're ready to save your Layout to the Layouts Drawer. Test you your Layout before you save by previewing on all devices. Once you've saved your Layout, check that you're happy with the screenshot, and even replace the automatic screenshot by uploading one of your own.
AI Website Transcript
"At which point, because I'm happy with those, I would save these as a layout. But always, before you save as a layout, you just want to preview those on mobile and tablet. I'm going to click my mobile preview icon. And here, you can see our mobile view, so let's just move along here, and you can see we're looking really nice on all devices.
At which point now, we will make those layouts. When you save layouts, you click the tick icon here. This one would be a grid with three columns, so I'll call this grid. I'm just going to call this one grid light and then press save. Then, I'd move on to the next one, and I'd call this grid dark. And so, as I'm adding these layouts, they're adding to the layouts drawer. What I'll do now is just whip through this on a fast-forward and then show you how these appear in the layouts drawer.
Now, our layouts are saved. I'll just show you two troubleshooting tips that I often get questions for. If I go to the layouts drawer now, our layouts are not there, which is weird because when you save layouts, they save and add to the top. Well, this is because you just need to make sure that you refresh the page editor where you are.
So, you could click the refresher in the browser, but since this is taken as screenshot, it's doing a whole bunch of things when saving those layouts, sometimes I like to do a hard refresh, which on control is shift command and R, really nice hard refresh that'll tell the browser, "Hey, make sure you do a proper refresh."
On safari, that will be hold shift and click R for that hard refresh. I'm going to do that now shift, I'm on Chrome, shift command and R, so I'm giving that a nice hard refresh. The hard refresh just takes a little bit longer than your normal refresh, so I'll just sit with this just so you can see how long that actually takes. There you go through hard refresh is complete.
So, at which point now, I'll come over to the layouts. And you can see all of our cool layouts that we've got here where you can see I've got the three columns. I've got my what are called grid light and grid dark. And here, I've got the alternate versions of those, which is pretty nice. They've all added to the top.
Now, this particular screenshot, it's either not finished saving yet at this point, or would you see the white space that it's got in there or it's struggled to find out the actual height. I can actually go back into the layouts drawer, and I'll just show you here. If I hit our bot, you can see that you can also save entire pages as a layout. If this was an About Us page and I wanted this whole layout to be saved, rather than clicking the tick to save this one layout, I can save the whole page as a layout too. So, that's in the layouts drawer, hit AI Website Bots, give it a name, and save it as a layout.
But in here, I could also go to our layouts area and start to look at our layouts. If I click layouts now, you can see here that I've got my layouts here, and I've actually put these into a nice short order. I want this to be number one, two, three, four, five, and six. We can see that all there. Now, this particular image you could, at which point, if the editor is a bit slow in taking that screenshot, you could actually just take a screenshot yourself.
On a Mac here, I've just opened up the click to open up the images normal, but I've just gone shift command and five, which opens up the screenshot tool where I can choose the dimensions. If I just press capture now, that'll take a nice screenshot as you can see. Now, what I can do is go to the settings area in here, and I can upload a new screenshot. On my browser, on my local computer, I could actually call this image the exact same name. If I could upload a new image or a new icon, that's fine, but sometimes it's good to keep it the same name. It might be that you've used that image somewhere else, so you can call it the same name."