2022 Full Site Editing with FrostWP – Free Experimental Block Theme

in this lesson we'll take a look at the frost theme a new block based theme with full site editing like 2022 you'll check out the frostwp.com site which shows all the block patterns and style blocks available so far by the end of this video you'll see how you can leverage the pre-designed sample sites explore the demo sites and easily import a complete site as a starting point let's take a look at another block-based theme in wordpress and build another site with it if you took the last course you may remember genesis themes from studiopress and the makers of genesis have come up with the next generation of what genesis is going to provide from wp engine a free theme called frost from the founders of genesis now similar to 2022 it leverages the power of the site templates and the site editor where you can use blocks and a block-based system for templating without code and controlling global elements like the header and the footer and other elements within the website including typography colors and other items and block patterns especially let's take a look at frost and we'll build a site within the sandbox and also learn about another way to import site content to make a site automatically look like the demo or the sample so if you open up your sandbox site i'm just going to go ahead and click my sites here on the sidebar or up at the top corner you should do the same and if you have one site here you can always click add a new site and then that will bring you bring you to the registration page where you can choose a site name and a site url and go ahead and click create that'll create another site for you and you can go in under appearance themes with that site active and choose the frost theme and click activate i already have my frost theme activated here in my sandbox site also i would suggest you open another tab and go to frostwp.com so you can check it out and we'll take a look at it together right now so frost you can see is a pretty clean look this is just the home page of frost created with frost but it has that kind of studio press and genesis clean and minimalist look and there's a few things i wanted to show you here one is a series of block patterns now in frost at least for now it's very minimalist and and with really blacks and whites and grays and kind of a wireframe setup so if you were to look at something like you know hero section block patterns for example you've got you know an image with two call to action buttons and some text and a heading and you have the reverse of that with a light colored background dark image etc here is a block pattern that you know has a hero section full width darker color with a light image and a lighter color right here here's a three items etc so you can go through and on the block patterns page you can look at what all patterns are included in frost wp again it's a free theme it's not available in the wordpress repository yet but it does take advantage of wordpress 5.9 and later and the site editor and is a block based theme and offers up these well-designed block patterns that you can leverage to make any design that you like another place to look is the style guide where you can see the actual blocks that are available within frost for example you've got rounded corners total you know pill shaped square corners different fills different ways the rollovers work you've got different widths for buttons and alignments as well and so if you keep going through here you can see there are a lot of different customized blocks that you can use and have a lot of good settings in them similar to 2022 now a big difference between frost and 2022 is that you know the block patterns aren't styled with existing images but instead they're using generic kind of wireframe images with just you know black background with a little logo here so three sizes within frost you'll see a 600 pixel and a wide width 1200 pixel and a full width 100 for what the image comes in as and then thirdly if you go across the navigation check out the sample sites this is where we're going to be able to use a special import process that's been available in wordpress for a long time the import of an xml file to bring in images and a pre-designed layout that you can either use as a starting point or use to learn about frost and what's available so there's three there's venture capital small business and night mode for example we can click view demo and it opens in a new tab where you can see just what this theme frost can do there's a full width image and a section with a heading and you know three column design there a call to action with a colored background and a rollover button there's uh you know another section right here you can kind of see what's possible with frost by looking at these samples like this so if we go to the services page you can see a full width image below a header you know with with some text there three columns with interactive buttons and then service plans this one is a a pricing page with a pricing table and three buttons right here this is a blog page that shows a single column uh blog where the featured image is shown in a certain way there's a quote that has kind of a border and a drop shadow right there etc and so the the styling here if we one more thing you can go a little bit deeper in the services page if you look at for example click architectural design you can see that here's a service page that has some text like that and so let's go ahead and activate frost and you know when you first activate it and look at the site it'll just show a blank white page with a header and a footer and a single hello world blog post in there on the home page but if we bring in the xml file that you can get from frost wp you'll see that you can make your site look like one of the sample sites in just a couple of clicks and so this is what i've done to to my initial installation of frost you can see that it looks like the small business sample site and we can go in there and customize it and take a look at how frost works in the background