Blocksy & Stackable Petsy | FREE starter site for WordPress

hi welcome good morning good afternoon good evening and good wherever you are jp at websites for beginners and in this video we're looking at a starter site from bloxy called petse and what i want to do is just focus a little bit on the starter side but show you in particular how bloxy integrates with this gutenberg add-on stackable you may have heard of stackable you may have used it if you haven't check this video but also check the other videos on the channel and the other reason i guess i want to focus on it is because i'm working on a mega course a really really big course focusing on stackable version three to give you full course tutorial on how you can work with stackable to create your website and of course then integration with bloxy which is very important to learn more about stackable and bloxy follow the links in the description below let's get started we are in wordpress and this is a vanilla installation and i've already cleaned up everything there are no posts and there are no pages first we go over to appearance and themes as we have not installed blocks yet and we're going to grab the free boxes so we click on add new and then search themes we go and search for bloxy and then from here follow the procedure install and activate and what's going to happen now is that blocks is going to give you the option to install a plugin called bloxy companion and yup you need to install that otherwise you lose so much functionality that comes with bloxy click here on the install bloxy companion and with this we are now going to get that power also to install the starter sites and there we go this is if you are part of freemius or you want to sign up with freemius which you can do i'm going to skip it for now let's have a quick look then in our plugins folder what we've got here we have the bloxy companion installed and in the navigation sidebar here on the right we also see we have this label now for bloxy click on it and it takes you to the bloxy dashboards over here we go to starter sites i really like the i want to say cleanliness in which the starter sites are being done within bloxy just really well done and the perfect integration where stackable is what we are looking at especially with this one petse which is the latest one that was created from scratch with version three of stackable in the mega course for stackable that i'm currently working on we look at this one justice now even if it was created in version two it works very well in version three it outputs really nicely so you're not going to run into any problems coming from version 2 into version 3. how we go about this is first you can preview it if you want to see what it's all about takes you to a demo site and then you can have a look at what you're going to get here and immediately you will see that this is going to give you woocommerce we have products here that you can go through about us as well as a blogging section and that's what i like about the sites that are coming from blocks is that they give you everything that you would be looking for today in a website with many people working from home now e-commerce sites have really popped up all over the place so you need your e-commerce but at the same time you need to have your blog as well so that you can vent a little bit in your lockdown and here's the blog oh well that's just page two with the contact form here at the bottom let's go back to the bloxy dashboard click on import and you can decide if you want the child theme or not i'm going to deactivate that and next is going to tell you these are the plugins that you need to install now i don't use wp forms i would prefer like jet form builder something like that or use my fluent forms and if you don't intend on using that you're going to use your own form you can deactivate this one just remember you're going to have an error reading on the contact page where that block was inserted so you just need to go and fix that for this demo let's leave it all on you'll definitely need to leave woocommerce on you definitely need to leave these two on i think you shouldn't even be given the opportunity to select either of those two because this is what we'll need for this website and then again i would say you import everything and you can also make sure that clean install works click on that and we're going to go through a few moments of installation and through the power of adobe premiere pro we jump to the future everything done let's go and view the site to see if it looks exactly like the one that we had seen in the demo and i think we have nothing to complain about nicely done products testimonials and then this is a link to our blog and here is cupid so cute and new products at the bottom let's see how all of this had been done and what's happening in the back end at wordpress first i will just go to plugins so that we can have a look at what has been installed for us we started off with the bloxy companion and then these three plugins that the bloxy starter site had installed for us the one that's very important is stackable gutenberg blocks and you're going to see oh well you saw everything that had been done is done with the free version now the free version is powerful but i have to tell you while i'm working on the mega cores i work on the free version first but i keep so badly waiting to install the pro version because there are some super features in the pro version that i just really like then we have woocommerce and wp forms lite in the navigation sidebar we see our good friends woocommerce there's wp forms and then my call out to developers over at stackable will be please give us stackable also as a label in the navigation sidebar currently you have to go to settings down here and you're going to find stackable over here from here you have a few options within stackable let's skip the freemius again mostly whether you want to activate or deactivate certain of the add-ons now stackable employs the work of a wizard that does not allow you to pass into the settings unless you complete the quest i'm not sure why because i think this quest is a little bit redundant and i'll share my thoughts on that so i think we can actually remove this it says you have to get started and then it's going to ask you which of these three groups of blocks you do not want installed by default they're all already enabled so you can see they are green and if you want to know which of the blocks fall within each category you go here to show all blocks and you can see them under here now if this is the first time you work with stackable you're not going to know which one to activate or not the second reason you're going to maybe run into problems here is that many of these blocks here are actually components of blocks over here and if you don't know what the euro comprises of it will be difficult because you're going to maybe go ahead and deactivate some of these blocks that are actually part of what is this called section blocks i don't want to go too deeply into that and why i think this is unnecessary step but i just want to advise you leave them all on for now and then in the end you can decide if you want to disable some of them under essential blocks one of the most essential blocks in my opinion is the button block i don't see the button block here anywhere not even after we go into the settings it's there within stackable but for some reason you cannot enable or disable it which is strange because if you can disable something like text or a container the button should also appear over here right you can collapse them again here but my opinion here is that because i think you need to leave them all on and because you are not sure which ones are included from the essential blocks in the section blocks i think this wizard step is completely unnecessary unless maybe it plays a function in the pro version so we finish up and once it finishes up you're going to get the stackable dashboard my preference would be that we go directly into the stackable dashboard go to settings here for a quick overview and first of all those blocks that we talked about they are here at the bottom again i don't see the button group or the buttons appear down here very very strange but one i want to call out your attention to is over here block linking beta this is going to be in an update but this is a very important feature because one of the problems that we have in gutenberg editor is that when you have different components like columns that when you make changes to one column it won't update the other column version two gave you this column function where you had the styling for the columns and if you applied a different color it will affect all the columns but what stackable did in version three is that they decided that is too limiting we're going to give you full control over each column but with that came a caveat how can you then have global styling or this one color changes all and that's where the block linking comes in and i'm going to enable it even though it's a beta feature and then you also have over here breakpoints very nice about thank you very much for that and we are done over here bloxy of course is over there and what we'll do let's go again to the front end and then go to edit page and see what we've got for this home page of ours and i will run you through bloxy and i will also run you through stackable quickly and then we will have a look at what's going on with the page here and there a little bit right let's close all of this important up here in the toolbar is that you're going to see quite a number of additions to the normal gutenberg editor and that is over here these settings for bloxy and then stackable next to them and over here a design library this design library is going to give you ui kits that you can work with and these that are highlighted are the free versions and these grayed out are the ones that you will get in pro and then you have all your other settings like usual so let's talk quickly about the integration between bloxy and stackable and the biggest integration happens in terms of colors and topography for that go over to the stackable icon up here and when you select it let's close these panels you're going to see global global color palette in global topography open the color palette and you see we have these eight colors over here and global typography we have our h1 to h6 with body text and a subtitle all of this is currently coming from the bloxy theme and these guys really work very very very nicely together did i say very nicely i did let's start with the color palette and shows you how it integrates with bloxy so with this open i'll go to preview let's just open one quickly and then we can go into the customizer for block c to see where we get that from this page click on customize that takes us into bloxy theme customizer here on the left in the sidebar look for colors and you see we have the color palette over here and these are the colors each of them connects to these colors over here and you can see that they are locked over here because you cannot change these colors from within the gutenberg editor with stackable they are set to you by bloxy so if you want to change these colors you will go to bloxy and then from here you can select and make changes to the colors over here however i would recommend that if you're going to play around with this patchy theme do not change these colors the free version of bloxy is beyond spectacular if you click over here you're going to see you don't only get one you get five different color palettes that you can play around with you can set up different colors just look how nicely they update in real time awesome and then let's just try this one man i get goosebumps really this kind of thing makes me excited because this is free not premium so many other themes out there are going to only give you this option and not even only when you buy the pro version so if you want to make changes to this color or you look at this color palette and you say by bob why do i want to reinvent the wheel i love what i see here this is in fact a very nice color and set up for a theme like pizzi all you clicked in here is on publish and returning then into the wordpress editor let's just reload this page and i'll just click here on reload and then you will see that the color palette within stackable has updated to this color theme that we've just chosen let's close this one out and that's how you're going to be doing that so this is how bloxy and stackable integrates in terms of the colors the second way they integrate then is in terms of the topography all the way from h1 to h6 as well as the base of font let's go back to bloxy click back and then select typography that's under colors you can start here with this system default and that's going to be your base text for paragraphs and it will also override the headings unless you go and set up the headings individually let's find something with a little bit more text over here on the system default i will select something like comic new because they don't have comic suns and as i bring that in you will see it updates the base text but it does not update heading 1 2 2 3 and so forth now if you have a fresh installation of bloxy these are all set to default system and that means that once you change the base font it's also going to update the rest of the page and also the headings so you don't have to go and change each of these individually but if you're working with a topography pair which means that your paragraph font is different to that of your hitting font then you can override them over here let's close out here go back to our page close out is it closing out yes and have a final look at what you get over here under the global topography so currently you're going to get all of this from bloxy in the event where you want to override it you can go to the pencil and you can put in your own values here and then you are overriding bloxy if you made that mistake for example you were playing around and then later oh this is not what i had wanted kudos to both stackable and bloxy for giving me my favorite feature in any editor on this earth and that is the reset to default which is such a strange thing that are in many famous page builders lacking the reason i'm a big fan of the reset is because it gives you a baseline you get used to the product you know where you start from and when you screw up you know where to go back to when you have that reset function hit the reset here either here or just next to the heading over here and then you're back to that integration with bloxy essentially for all intents and purposes i'm using this phrase a lot lately for all intents and purposes this is what bloxy and stackable does very well together with these global colors and global topography and i recommend that you spend some time on that get to know it because that's really going to make your life so much easier you saw how quickly i changed that color theme by using a different color palette and that makes it so easy to update your site in a jiffy final thing over here with the stackable sidebar inspector that we have is that because it only includes the global color palette and the global topography you may not need this up here at the top and something like this bothers you you can just unpin it by clicking here on the star and now it's out of your way if you need to bring it back to the to mark like you're on the three dots go to stackable settings under plugins and then select the star again and you pin it once more there let's leave it there for now so that we know what we are working with one thing i also just want to call out is if you go to the bloxy settings is the following as you scroll down to bloxy you will go to the content area vertical spacing when you work with stackable and you're designing from scratch make sure that you select custom and this version here disabled if you don't do that and you use the default top and bottom you're actually going to have a incident where it's going to apply space at the top and the bottom on your final page it's stretching it to fit it all in so make sure you leave it here on disabled the other thing i'll also call out for you is the page title you will see it is disabled we don't really use page titles that much anymore except maybe on posts and these are the two settings that when you build from scratch with bloxy and you don't use a starter site that you want to go and check to make sure that it works very well with stackable so we're done up here let's go and have a look what's happening on the page and a little bit more about the blocks to get the stackable blocks you simply go over here to toggle block inserter and you will see them pop up at certain areas like those that are related to text media and if you want an overview of all of them you're going to find them here at the very very bottom and here is the ever elusive button that i do not find within the settings and neither under the essential blocks which i think should be there so do not fear the button is near how stackable works let's close out is that you have not anymore like before in version two a fixed block let's go to the bottom and i bring in a hero section so you can see what i'm talking about where am i click on the plus type in hero now in version 2 you had this euro block you would click on it and it will drop in now what happens once you drop it in and i'm not sure where i'm now i'm in the column i'll move it soon you can choose whether you want the default hero or you want horizontal hero i go for the default hero just click on it again and it's going to drop it in for you where is it now over here so the hero block has now dropped into this column if you click on it within the white space you are going to see here in the options toolbar that currently if i hover over this it selected the euro but we have a bigger one which is the column we don't want to work with that column we want to work with the hero so make sure that you have selected the hero and now i'll just use my arrow keys to move it down and it doesn't want to move any further now because it's nested within a column it wants to stay within the column for me to bring it into a section i will need to drag it out all there on the handles now the hero block is in a section of its own and we know that because the options toolbar is now the final parent in this one and if you're not sure what i'm talking about go over here to the list view and you will see that the hero is flushed all the way to the left showing us that we have this block the euro block that we've brought in now the difference between version 2 and version 3 is that the euro block was fixed select it and you go to settings and then under block you will have certain toggles like switch on the heading switch on the description switch on the button we cannot see the heading because the heading is currently at the color that is white so let's just go and change the color to something that we can see there is it now it looks like a hero block all of this these three components were baked into the block it was a preset you couldn't do anything with where it was in terms of layout but they really thought that stackable over this and they said this really limits the user for example what if you wanted another heading or even a divider a line in here or what if you wanted to move things around a little bit so what they did is they went looked at the essential blocks those six plus the button and then they created these containers which is the container blocks and the hero is a container block what that means that if you want to change the title click on it but note that this is actually a block this is not within the hero block this is a block by itself it's indicated by this h over here now you have the power to move it down and you can even go ahead and bring in another heading you can duplicate it so you can really build out a hero block to your heart's content so basically in the end they are just giving you a container with the elements in there and you don't need to design it yourself it is a preset so why just not build it out by yourself because this is quicker and convenient as well as the following in some cases like the group button button group and icons you're going to find that the container block does have some specific features which the normal container won't have also coming from stackable version 2 you're going to look for the section block there's no more such a thing as a section block the only thing you're going to use now as a container is called a column slash container this one over here i would prefer these two to be switched around i think before we work with a column we probably want to have a container i like the word container so it's just my preference i would have called it a container slash a column but this column container is super duper very very very powerful and let's quickly have a look at that let me just go again here to the bottom and this time i just want to make sure i don't mess it up so we go to the bottom i'll select the paragraph go and click plus and let's go for the column container click on it and it drops in over here we have now the choice to choose what kind of column structure we want let's go here for this one with the two and over here because it has the dark background we know we are currently selecting the one column if we want to select the container we click next to it and now we are in the parent container we have the block settings over here you can activate the background and there we have the background color you have a lot of settings there like images you have your alignment size and spacing so if we want to give it a bit of a viewport height you can do so here and increase it and then the vertical alignment of this content goes in here there are quite a number of new features within stackable that works very nicely with bloxy and is going to really give you a very great experience in understanding what you can do within the gutenberg editor there are so many add-ons for gutenberg out there and in my opinion most of them really do a poor job they don't even get close to try and give us a standard experience not even close to what page builders are doing but we've seen 203 on the scene and i think stackable is part of the 203 that we are seeing that are driving this endeavor to really make wordpress work i'm very excited about that even though i find gutenberg extremely frustrating so jb if it's so frustrating why do you still keep using it because i like a challenge i think you know when you look at this site that has been created with bloxy all the power you get for the header a header builder to your heart's contained that includes sticky features as well as transparency and this nice feature here of the slide up cover that you get for the footer at the bottom and all the great integration with woocommerce your products your categories how it displays and all the power you get over that here's a single product as well let's have a look and then for your static pages you bring in stackable very nicely done so you keep that consistency in terms of colors and topography by using bloxy and stackable very nicely passionate about animals i guess those are the bits new products every week and here's our blog feature and once we go into our blog pages again we are working with proxy nice sidebar features here also kudos for bloxy on working with the sidebars and integration with the widgets and that's pizzi hope you got a good idea of what petsy is all about a nice place to start of course you can load and use this starter site without needing it to be for pets or vets can be anything else that you can think of that needs a nice shop as well as a nice new section to learn more about stackable and the bloxy integration check out around january 2022 when i will be releasing the powerful mega course for stackable version 3. until then go well stay safe from me jp until next time

Channel: Websites 4 Beginners

Views: 310

Keywords:

Id: iMSFKg6QY7s

Length: 27min 23sec (1643 seconds)

Published: Wed Dec 15 2021