Ultimate Gutenberg WordPress Add-on? - Cwicly First Look

now if you are looking to start working with gutenberg or you fancy take a look at it you're kind of being put off by the fact that it's not particularly very powerful i think today's tool is going to really open your eyes to some of the possibilities now we know that full site editing is coming to wordpress very very soon in the next release of wordpress now with that we still have a lot of limitations and quickly the plugin we're going to take a look at today aims to reduce a lot of those limitations but is it any good well how about we take a first look together now i've not really used quickly i literally bought this a couple of days ago and i've really taken about 10 to 15 minutes to just kind of have a quick look over it before i start this video so you are gonna see a lot of this alongside me okay so first of all what exactly is quickly well if we take a look at the website you can see quickly turns the wordpress editor into a professional website builder if you kind of think of something like bricks builder or oxygen where you have a lot of control over the styling positioning you can use flexbox those kinds of things this is all integrated into this and like i say you also have the ability to use acf metadata to add in all that dynamic goodness should you want to okay so that's basically what it is let's have a quick look at some of the features we have on offer again like i say there's a lot of great tutorials on the actual quickly youtube channel so check those out to give you a sort of heads up on how to get started but as you can see the whole point of this is to make working with gutenberg easier there's a lot of really good information on the website including information about the design library which we will take a look at as we go through this video but if we take a look this is kind of what the whole aim of quickly is it helps you to create responsive designs that are high performing because you're not using a page builder to add that extra code and bloat you can include dynamic content like i say using acf that's already integrated into this you can do things like global fonts and colors you've got custom fonts and icons and several of those so like different ones are integrated into the build itself and you can add more in if you want to if you have your own unique fonts and icons you want to use it supports the css grid and flexbox which is great and you also have scroll animations if you want to get a little bit creative so that's basically what you have with quickly so let's first of all take a look at the pricing on the actual website itself and also take a look at the appsumo deal that's currently running where you can grab yourself licenses for lifetime so if this does interest you i would recommend while the offer is running over on appsumo to get it from there so you can then have that 60 day money back guarantee if you don't like it and you have lifetime if you do okay so first of all let's take a look at the pricing the official pricing over on the quickly website we've got three different price plans we can use we've got the base the pro and expert the only difference between these is the number of websites that you can use quickly on so for 49 euros you get one website per year 99 gives you three websites and 199 gives you 1 000 websites so my first thing here is i kind of find it strange that a lot of companies do this kind of thing where the base price is quite expensive for what it is in comparison to in this example the expert site on agency plan kind of thing where you go from one website to four times the price for a thousand websites doesn't make a lot of sense to me so i'd like to see the sort of base price drop a little bit to reduce that barrier to entry maybe 29 maybe put four plans into place kind of gives you a tier going to a thousand from three and then doubling the price just kind of seems a little bit odd to me okay but that's the pricing over on the official website if we hop over now into appsumo you can see this starts off at 49 if we view the plans you can see basically what that gives us is we can start off with one plan and we get access to everything but that's for three websites so we're already saving ourselves fifty dollars by grabbing this and we get lifetime however you can stack two codes for ten websites which is what i've done or you can stack three codes for a thousand websites so basically a hundred and fifty dollars give or take we'll give you a thousand websites so again fifty dollars cheaper than buying the annual subscription to it so let's now hop over into the dashboard of wordpress where i've already gone ahead and installed things and take a look now what do you have when you install it well first of all you've got the theme which is a bare bones theme because we are working with full site editing so you're gonna need to make sure you install that you've also got to install gutenberg because it has to work with full site editing so currently you need to have the gutenberg plug-in installed you can't just use the gutenberg the ships currently with wordpress if you're seeing this a little later down the line when full site editing is included then you won't need to install that plugin it'll already be integrated into everything and finally once you do that it'll go ahead and install custom fields for us and you can see we've got advanced custom fields inside you as well and like i say this is the pro version okay so once we've done that we've got everything set up we've got some really basic settings that we can set up for quickly and if we come into settings and into quickly you'll see inside there there's not a huge amount we can drop our license key in to activate this on the site and then we've got a couple of other set in so things like icon collections if we open this up you can see it currently ships with four different icon collections but if you want to add your own in you can do that you can upload this directly you've also got font sets which you can do and i think this only supports wofff2 yeah there we go it's the only format that it currently supports full help and support is available to you you can drop in your google maps api and also you've got custom code which is something that i like so if you are used to working with something like code snippets the plugin this is basically the same kind of thing but built directly into quickly itself so you can give a name and you can also drop in the code position where it's the head body or you know the end or the start body tags so pretty cool to see that again that's one less plug-in you need to use an advanced settings basically just gives you the option to verify your ssl and close the importer upon success so there's not really a huge amount of options inside there let's quickly just jump over to the help section and as you can see there's a lot of well-structured help inside you so we've got breakdown of all the different kinds of blocks the modal list image and so on and if we open any of these up you can see it gives us a lot of information including step-by-step kind of cheat sheets to do exactly what we need to do setting the basics the height the width the image source those kinds of things so there's a lot of resource issue and you probably will find you'll go back and forth to this when you look at some of the more advanced features that quickly actually offers you so don't be afraid to check this out and again like i say there's a lot of great videos on the official channel that covers a lot of the important things you're going to do with quickly okay with all that out of the way let's take a quick look now at what we have inside quickly itself when we start to create content and how we can set things up okay so now that we're into the dashboard there's a couple of ways in which you can access the quickly editor you can use it for full site editing or you can use it for just sort of basic page creation and we'll take a rough look at both of those in a moment so let's just go ahead and take a look at the easiest way which is as if we're going to create a new post or a page so if we simply come in and add a new page once we're inside there you'll see we get a typical looking gutenberg layout we've got a new option at the top which is the import element which is the elements that we have as part of quickly itself and if we look over on the right hand side you can see we've got a quickly icon allows us to see the global styles colors typography those kinds of things we've also got predefined styles which we can create ourselves so you can see we've got three different options inside there and if we open up some of the global colors you can see there's our starting colors we kind of kick things off with four different colors but we can't easily name those and add additional colors ourselves we can change any of these by clicking on the color chip you know all the usual things you'd expect to see if we change our styles over you can see that we'll change the colors over and we can just basically pick and choose between those three and create our own using those as the basis let's switch this back to style one we've also got the options inside here for the different responsive modes so we can switch between desktop tablet and mobile so we can ensure that everything looks the way we want if we open up this next option you can see we've got the pseudo classes so things like your normal your hover state your active those kinds of things so you can style things inside you're using those options as well lots of usual useful options inside there and if we kind of come back out of this so let's just simply hit the back button and then we can go back in and we can change the variation of things like the global styling for global design and also for the global theming and if we want to we can also export the page so if you wanted to use this create a sort of like a setup starting point you could do that on various different setups and then you could export those import those into another copy of quickly and then get started in a much quicker fashion so always good to see the import and export options available okay so next up you can see we've got some options for a quick collection this allows you to take various different components various different templates whatever you want and then save them into a collection again can be very very useful when you want to create multiple templates and you're going to use the same header same photo those kinds of things to quickly and easily pull in various different components so i always like to see things like that we can click this little sort of map icon and that gives us the navigator in a very similar fashion to what you have if you're using elementor or using bricks or those kinds of things and we'll see that in action and i'll show you how we can use it again one of those things i like about this is it's drag and drop so we can reposition the layout much better than what we have directly inside gutenberg itself by using this simple option in our list view where currently nothing is draggable it just shows you that's literally all it does and finally if we open up this option the little sort of view option is part of gutenberg you can see we've got some additional options inside you so quickly hide the quickly modal and i'll show you that in a moment why that's really useful the collection which we're currently looking at and we can jump over to the global settings again so just another way of accessing various different things okay so nothing really exciting there what i do want to address though is i'm not a big fan of the styling the way that this has been put together perfectly functional everything you need is there but i think it could do the ui and ux could do with just a little bit of refinement i know i kind of reference things like bloxy and bricks because i think they are exemplary when it comes to a great user interface in the user experience i think they could take a little bit from this this section isn't too bad but you'll see when we go in and start editing various different parts it kind of looks just a little bit cluttered and a little bit amateur in some ways like it doesn't detract from the functionality the functionality is there okay so let's go ahead and take a look now at the different elements we've got so if we click to add an element you can see there's all our quickly blocks and all the usual culprits are there you've got columns you've got sections we've got divs we can use those we can drop in lists icons you know all the usual things you'd expect we also have the quickly query which allows us to create a post or page query and create unique looks and feels for that we've got your quickly post content which will put in the content of the post into one of our full site edited templates and we've also got the quickly repeater now this is something that a lot of people will be really happy to see you have the advanced custom fields pro repeater regen function built directly into the quickly editor so when you create your repeaters inside acf pro you can now build them out inside quickly itself great to see that addition in it and more options we can have like this with dynamic content the better okay so we can easily drag and drop in the various different sort of uh containers the elements the different things like that if we go to the import element option this is kind of all the different templates we have we've got blog templates so things like headers and footers and hero sections and so on we've got full layouts if you wanted to pull in an entire layout you can see we've got options inside here to preview and import it we've got themes so we can put in an entire theme design and again you can see we've got a lot of different options currently there are 30 inside here and then finally you've got elements which are individual components like buttons and things like that shopping cart using woocommerce and so on so there's plenty to start off with a couple of things some of them are a little bit they're not the best designs no disrespect again to the the company behind this but i think when it comes to block designs that's something that you need to have someone who's very skilled in and i think they would you know if this takes off i think it would be great to bring someone on board with a ui ux background and also someone that has the ability to create really really good looking gutenberg blocks because that would be good to see it's nice to see that we have wireframe options inside you so if you want to just get quickly pardon the pan started quickly you want to sort of create a rough design prototype hand off to a client so they can kind of come back with feedback on it without all the extra things like images and real text in this is always good to see i love seeing wireframe options so again if there's more options available for the wireframe that is something i think would be awesome so that side of things is all pretty good so let's just say we'll take in something from you we'll grab one of the navigation elements and just pull that in and see how things are made up so we can preview this if we want to it'll open up a new tab and you can see we can preview we can see what the hover effect is like on the navigation we've got buttons inside you logos those kinds of things so all pretty quick and easy once we've found one that we like we can simply then go ahead and say we'll import that so we'll import it and boom there you go it's it's now inserted into our design you can see there's all the different sort of options we have for removing the section we can go in and do things like add a block to this we can move it we can do all the kinds of usual things you'd expect to see and if we open up see we can show more settings and that will now give us the section settings and this is where i want to kind of go back to what i was just saying about why a ui ux design really would make this shine if you take a look now at the right hand side you can see we've got lots of different options the primary in the advanced and inside there especially when you jump into advanced there's an awful lot of options but it looks just a little bit i'll use the term amateur again all the tools you need there and like i say it is totally functional let's just have a little bit of consistency in the look and feel i think that would make it stand out so much better okay so with that side of things out of the way let's take a look we've got the primary which is the key functions that most people will probably want to use or the key settings that most people want to use to get the job done and then when you want to dig a little deeper and really get into the nitty-gritty of the different block that you're working with the different sort of element that you're designing then you've got a ton of different options inside i mean an absolute ton you've got various different animation settings you've got effects transforms pseudo classes you've got attributes you've got relative styling and this is why i say if you come from something like you know bricks or oxygen a lot of this is going to feel very familiar because that's kind of the direction that they have gone in it's using flexbox models those kinds of things containers and the grid and so on and this is usually the same kind of thing just inside gutenberg so you can see there's lots of options inside there and let me just open up the sort of navigator again so you can see now with the navigator open we can see all the different elements so for example this paragraph section at the top so this paragraph section and the quickly section you can see i can open and close these various different elements i can reposition them i can nest them you can see it's very very straightforward to do a little bit quirky at times and again this is one of those things that i think a lot of different builders that use this kind of technology they can be a little bit awkward sometimes to get these various different uh repositioning features exactly where you want okay so you can see all the different elements inside there and i can click and i can select any of them when i mouse over you can see it'll highlight them so we get a visual representation of where the different things are you can see we can select it we can choose the options for it we can show more settings for it and then we can go in and we can fine fine-tune exactly where it is that we want to edit so for example if we choose the menu from here we can then come in and just make changes to the menu so there you go all the different options inside there your main menu your menu items your sub menu all inside there including additional classes so all of the classes that you create are linked inside here so you can select those and apply those now this is the first thing that kind of gets a little bit could do with a bit of refinement you can see we've got the block id and the class name they're randomly generated which is totally understandable but they could do with being just something a little bit more descriptive so for example this is a menu item so it'd be good to see this name so like c9 e dash menu or something that would make some sense because when you look at these additional classes that means nothing to most people and you can see i don't have much on the page and it's already probably about 30 40 classes inside there so picking that out would be a nightmare you can easily come in and change the class name so we'll just tag on menu for example only and you can see that now adds that in and i'm assuming that that will probably show up inside you if we want to reference it there we go so you can see it's inside there and it is instantaneous when you make these changes but it's just one of those things that i think would add time onto what would become a very repetitive process from a functional point of view all works perfectly fine from a user's point of view things like that would just make things a little easier so maybe just like say prefix or prepend it with what the actual element is whether it's a div an image an icon whatever give it a unique name number but just tag on what it is so at least you can get a head start on what you're actually looking for tons of options inside there and again we've got the advanced options in here as well so if you want to change the typography you can easily come in change the font family to for example let's just do montserrat you can see that updates on there we can change this now to a thinner font all very very easy nothing you're not not used to if you haven't already worked inside gutenberg itself so nice to see how easy this is you've also got options for your container layout and you can see this is the flexbox we open this up you've got inline flex all the different options you should need for most use cases you can control the direction the alignment and again you've got options to check this out on all the different kinds of modes so if we switch this over now into tablet view you can see all these different options for the container and everything else now switch over to tablet view and if we switch into mobile view and these should waterfall down so if you make a change to the desktop that will go down to the tablet and the mobile but if you make a change to the mobile the desktop won't be affected but the mobile will hope that makes sense just the way the css basically works okay so that's basically the quickly editor this is a really really quick brief overview and we can publish this if we want to and we just created a basic page now let's come back out of this let's hop over and take a look inside the appearance section because once you enable full site editing with gutenberg with the plugin currently you get some extra options inside you and the one that we are interested in right now is the editor so if we open the editor option up inside there this is going to open up the gutenberg full site editor so nothing really looks anything different inside you other than the fact that we have this new section at the top that says index if we expand that this is just telling us we're editing the index template we can clear the customization to get rid of anything at all on there to start off with a blank slate we'd also come in and say browse all templates and that'll open up the left hand side and you can see the four key templates we have currently are index category single post and 404 you can add your own custom templates in if you want to and again if you'd like me to cover full site editing with or without quickly let me know in the comment section below if we kind of come into this and go into category for example you can see now we're editing the category option we can come back out browse back to our list of templates hit on there and we're back to the index and what we end up with is basically just a blank layout so now we can start to create the various different components so we could come into import for example and we could say what we want inside here is going to be some navigation so let's just find the navigation option and we'll say we like to look at this one we can import that so we've now created our navigation element which we can go ahead and style and design and do all those things build from scratch if you want to if we come in now and take a look at these options you can see at the moment what we're seeing is the actual navigation header section and also the mobile section so this allows you to fine-tune and design everything and again if we want to open up the actual browser section the navigator you can see we can go in there and it's basically a modal this section for our mobile navigation is a modal so if we don't want to see that when we're working we can if we want to just simply come into the options and say hide quickly modals and that will just basically turn it off now you won't see this on the front end of the site on a normal desktop view but when you switch to tablet or mobile that's when you would see it so just allows you to style those so pretty easy to do so now that we created the navigation the header section we can carry on doing the same thing to build our template at our index template so for example now we can go ahead we can say import another element this time we'll come into the footer options we select footer and we'll say we'll just grab one of these footed designs this one will look fine we'll just import that in so that's basically creating your templates now we hit save on there you can see this is going to save the template as the index template we'll hit save that's our template created and now if we want to take a look at this we can hop over to the site and take a look and there we go you can see there's our header section in place there's our footer section in place and now we can just drop in the various different elements inside the middle of this so for example if we come back into our editor we want to put our page content inside the for example we can just simply come into add you can see we can put our quickly post content we'll click to add that inside there we'll just hop over now to our navigator and make sure everything is positioned as we need to now again it would be nice to see these being automatically named something so if you put a template in it would be ordinary named quickly header quickly navigation those kinds of things just little things that i think would be useful and you can change these so you can say quickly navigation there we go that's renamed it so you can do it very easily it would just be nice if it was sort of just given something a little bit more in keeping especially when you're importing these elements okay so let's just position this where we want which is going to be above the footer section and there we go so that now should be everything in place this is just a placeholder for our post content we hit save and save again and if we just hop over we should find it we'll have some content on there there we go it looks terrible because this was designed in elementor and it's not actually active but you can see how easy it is to start pulling these things in okay so now we've seen how to create these sort of templates and everything what about that dynamic content how do we go about using that well let's take a little look let's get out of this and let's create something new let's just go ahead and create a normal page let's call this dynamic test and let's just save our page so now we can go ahead and just start pulling information in so let's just go and grab one of the ordinary widgets and we'll say want to craft something like a header we'll click to add that in and you'll notice that we get this little dynamic values icon if we click to open that up you can see this now gives us a couple of options inside the dynamic value we've got wordpress data and acf because we have acf installed now currently i have nothing created in acf but the process is going to work exactly the same as the wordpress data if we open this up this then opens up what data do we want to pull in so we can open this and you can see we can grab loads of data from the post from the archive from the site from the author from the current user and so on so you could very easily use these to create various different designs as part of your template and pull in dynamic data directly into that layout so this is really really powerful and a great way to get started creating dynamic content again directly inside the quickly editor itself now this is something that i would like to cover in its own dedicated video because i think that would be more useful so as always if you'd like to see more information about using quickly alongside dynamic content like this let me know in the comment section below and that's really what i wanted to cover in this first look video i've kind of gone over things in a little bit of a random way but i just kind of wanted to show you what quickly is what it's about so to round things up do i think this is something that's worth investing your time effort and money into well personally i've already done that i've spent the money on a 10 license plan over on appsumo this just gives me the ability to use this in my own personal projects if i like it and i'm interested to see where it goes for me it has a ton of options that i think are really really powerful including that acf license directly built in i think the ui ux could do with a little bit of refinement alongside some of the elements so the block layouts the templates and so on i think they could do with a little bit more finesse being applied to some of those just to give us really solid starting points and i'd love to see even more wireframe blocks added to the collection but great to see we have those in there right now so for me this is something that i would buy with an eye to see in where it develops in the next six to 12 months the cost of entry isn't crazy if you're going down the route of the app sumo deal however that might be a little bit different if you look to buy it directly from quickly once the app zoom or deal is actually over but let me know your thoughts on this have you bought this is this something you'd be interested in how do you think it faces some of the competition out there things like bricks things like oxygen or things like various different block elements you know cadence blocks those kinds of things let me know in the comments section down below as always all the applicable links for everything i've covered in this video are in the description my name is paul c this is wp tetson until next time take care

Channel: WPTuts

Views: 4,434

Keywords: ACF Pro, Best Gutenberg WordPress Addon, Cwicly, Gutenberg & ACF Pro, Gutenberg Aden, Gutenberg Cwicly, Gutenberg WordPress, WPTuts, WordPress Gutenberg, gutenberg wordpress blocks, gutenberg wordpress page builder, gutenberg wordpress plugin, gutenberg wordpress theme

Id: Nwx5tLYKj5M

Length: 26min 16sec (1576 seconds)

Published: Thu Dec 02 2021