Introducing Cwicly - The Ultimate WordPress Gutenberg Toolkit

[Music] hello everyone louie here from quickly i know what you're thinking yet another website builder yes and no you're right i do want to share with you our exciting new plugin but no it isn't just another website builder quickly is a wordpress plugin that turns the gutenberg editor into an advanced tool that gives you all you need to design and build highly professional and unique websites from a to z within a single plugin our code is so clean it looks like you've written it yourself [Music] with over 20 blocks 400 design elements more than 100 css responsive properties intelligent class use animations filters sliders galleries pop-ups and modals queries and repeaters you will have everything you need to create professional websites all in a single package purpose built for you to be fully creative while using the dynamic and time proven power of wordpress so let's open the gutenberg editor now the default view for editing wordpress posts if you open the gutenberg inserter you will find all the quickly blocks each block has a specific function and use and here is the import element button next to the block inserter this opens our design importer which contains over 400 design elements that allow you to quickly create beautiful designs in seconds you'll find layouts and sections themes but also specific elements for you to use if you need inspiration you can find more detail about the design importer in another video so feel free to check that one out let's add a simple layout let's select a block if you look at the block inspector you'll see that we've made it easier for you by grouping together the essential properties that you use most of the time in the primary tab you don't waste your time plowing through things you don't use all the time in the advanced panel everything is available while gutenberg allows you to change the screen size we've made properties responsive in a waterfall manner let's take this heading with a font size set to 60 pixels on desktop view let's go to tablet view and change the font size to 40 pixels as you can see this doesn't affect the desktop font size but affects the tablet and mobile now if we reduce the font size on mobile view you'll see that this doesn't affect the bigger screen sizes we have added an icon to show you if an element is responsive a particularly important feature of quickly is how easy it is to modify pseudo classes like hover effects let's add a button as you can see when i hover over it its color and background properties change let's enter the hover hoverpseudoclass selector now any changes made to properties with the pseudo class icon will affect the hover in this case you can see that the color and background properties have been modified the pseudo class selector has predefined pseudo classes but you can always add more by entering what you need to change every quickly block has an id and class property for extra flexibility and you can modify them without breaking anything let me show you we have three columns these two are linked to this one by the additional class property so if we change the class name of this block you would normally expect the other two to be lost and no more linked but quickly remembers the link and instantly modifies the additional class name on these two columns this is just one example of how you can share classes so that you only need to change one block to modify the styles of the linked ones i'm not going to go into the detail of every css property but as you can see we propose most of them in a visual and user-friendly way which makes your webflow faster and more creative [Music] if you're into creating complex and dynamic websites quickly integrate seamlessly with acf pro and wordpress's dynamic features as you know gutenberg is no longer just a post editor but a website builder that allows you to create your website from scratch quickly comes with a plugin and a theme that activates the gutenberg website builder let's look at this and build a website together here we are on a newly created wordpress installation we have activated the quickly plugin and theme which in its turn activates the gutenberg site editor as you can see if we go to the front page we get an empty page this is because quickly allows you to design from a to z your website let's go back and now access the site editor the site editor is just like the gutenberg post editor if we open the navigation panel we will notice that we are currently editing the index page let's go with that for the moment let's open the import element model and let's just try with a nice hero let's go with bezos let's import and there we are we have our hero added now let's just go with a few little modifications just to make it ours and then we will be ready to continue editing our website so let's go with a turquoise color like this perfect let's just edit the button let's go with a border of 10 there we are and let's change the spacing to make it a bit more acceptable there we are 40 on either side perfect that's exactly the look i'm looking for let's add another element let's add an about section why don't we go with regard import there we are perfect now our website looks like something let's save the page and see how our front page looks there we are our front page has been updated and we have gone from a blank page to a fully creative and unique front page let's have a quick look at the code as you can see there isn't an unlimited number of nested divs every element creates what it needs let's go to our website's dashboard and go to the posts as you can see we've created a post but this post doesn't have a template yet the single post template is empty so let's edit that one let's go back to the site editor and let's go and select our post there it is let's go with a ready-made layout orca looks perfect let's click import and there we are every element is dynamically filled the dynamic value is wordpress data and we are using the post title this applies to all these elements this for example is the author name the number of comments we have on the page then the content of the post itself and finally the post comments if you want a post comment template if i save this template i can now see that when i access our posts page if i refresh we see our post with our newly created template when you're using quickly you are essentially crafting a web page with no code involved everything is done for you in the background every property that you modify or change in the quickly editor is linked to a real css property in a way you are learning how to code without coding there are endless possibilities for you to discover and quickly makes it faster and more accessible give it a try i'm sure you won't be disappointed [Music] you

Channel: Cwicly

Views: 2,214

Keywords: gutenberg, wordpress, website, fse, creative

Id: dbas_GgI1lM

Length: 9min 43sec (583 seconds)

Published: Sun Oct 24 2021