How to use Wagtail Live Preview

Hi folks, Megan here. I'm going to show you a quick demo today of the Wagtail Live Preview feature So right here we have a page from Wagtail. org. This is our sustainability page. I've already filled out the contents so that I don't bore you with typing. And so it looks pretty good But I don't know what it's going to look like on the page until I open the preview panel. To do that, I'm gonna go up here and click this little phone icon here. And that opens up our preview panel. And right away I can see what the page looks like on a desktop display. But if I wanted to change it up and see how it looks like on different sized devices, I can click this icon here to see the mobile. display and then I could click this icon here to get the tablet display and see how everything looks like with that

And I can go back to desktop or if I wanted to see how it looked like on a full page on my browser in a tab, I can open up a whole full page preview in a brand new tab as well, which is super super handy. Now one other thing people don't know about the live preview panel is that if, you know, if this text is a little too small to read, uh, or you want to you know, adjust it for like your screen size or something like that. You can actually resize the preview panel right here. And so I generally like to pull it all the way out to here just at the edge of the blocks so that I don't cover things up. You may be different. You may want to like take up the whole page or something like that. Anyway, uh And that way, like if you have a large screen like I do, what you can do is you can leave the preview panel open

and if you're making changes, so like say I wanted to take change this here to Wagtail Goes Green or something like that. You can see that the preview updates with the text as I'm adding it in. This is also useful for like if I'm scrolling through and checking things. Um, oh look, it looks like these two blocks are out of order. So I'm gonna go down here and I'm going to fix that and make sure that we have them in the correct order. So this one needs to be below that one. So I'm gonna fix that. And now you see the blocks have switched up and the order looks better than that before. Now one thing I want to make sure that you know about our preview panel is that you have to be careful around the

items that have the little red extracts next to them because those are mandatory and our preview works best when the mandatory elements are there. So say I removed this item here, you'll notice like see there's a little warning sign here that tells you that it can't function with without that. So I'm going to go ahead and put that back there That warning goes away and then I can go back to building my content. Anyway, I hope you enjoyed that quick demo and I hope you learned something about our preview panel that you can use for your content today