Cwicly Design Library - The Ultimate WordPress Gutenberg Toolkit

[Music] hello everyone louie here from quickly i'd like to share with you a quick overview of the design library that comes with quickly this design library is a collection of ready-made professional sections layouts and elements that will help you form and build your project we add new designs and layouts every week so be sure to check them out we also welcome your feedback and ideas so if you have a design or something you want help with don't hesitate to share the design with us our team might just build it for you we have a space dedicated to feedback bugs and design ideas so be sure to check the link in the description or right inside your dashboard so let's open the design library by clicking on the import element button the section designs are listed by default you will find everything from navigations footers and about sections to error pages pricing templates wireframe and more elements every design is created inside quickly and i'd like to think we know how to use our tool you can learn quite a bit by looking at how we've put these together with the use of links and duplicates let's have a quick look at what is available the quickly design library has an immense and varied collection of designs giving you the opportunity to choose whatever suits your needs if you want a full view of the design that interests you click on the preview button this will redirect you to the front-end version of the design you can play with it and also look at it in tablet and mobile view let's open the navigation type and choose a navigation section let's go with regard several elements have been imported this is because when you import our designs they are ready made and ready to use in this example we have a header that welcomes a logo a menu element and a call to action button as well as a modal that acts as the menu pop-up when in tablet and mobile view if i go into tablet view the menu element is hidden its display is set to none and is replaced with an icon that when clicked will open the menu model you only have to modify a few things to make this design yours and usable on your front end first of all if i click on the menu element the preview disappears this is because the menu reference is not available on your wordpress installation let's select the quickly menu reference that i have created in this wordpress installation there it is it appears let's do the same with the modal menu element let's take a note of the modal block id and reference it in the open and close icons that will act as triggers to open and close the modal there we are this navigation is now ready to be used if we save the post and view it our navigation design is nicely there our menu elements are present as well as the logo and call to action if we go into tablet view everything resizes the menu element disappears and if we click on the modal element it appears ready to be used and we can close it with an animation that you can modify in the modal settings let's try another design and remove this layout let's look at the testimonial section since these types mostly require sliders this testimonial section uses quite a few elements and has an integrated slider that is easily accessible and modifiable don't hesitate in changing it and see how we've shaped the slider i'm not going to go into the detail of this layout but the slider element has many features and allows you to create some surprising designs let's have a quick look at the layout tab now layouts act differently they are four page designs that take advantage of the section elements we've created they are very useful when you don't want to spend too much time creating a design or just need a useful guide to start out let's import a layout as you can see the navigation as well as the linked sections are imported if you want to remove a section select it all the elements you want to remove and delete it our navigator is very useful in the circumstances and can be moved around freely in the editor to the place that suits you best now a fun fact is that in layouts a lot of the elements take advantage of the quickly linking this means that if i modify a property and the first element every other element will be modified thanks to the additional class property if you want to remove a link simply delete the corresponding class this is just one of the many quickly features let's take a look at the theme's designs these themes regroup every section or element that belongs to a same design when you select a theme you will access every element and section that belongs to that theme this is useful when you want to play around with sections from the same design the element tab is in itself a different use of designs these elements are designed to be added to the editor inside sections or elements you've created they help you get along quickly and can save quite a bit of time let's import this button into the layout we imported earlier it is added right after or inside the selected design if the element accepts children it will be placed inside otherwise next to it we currently offer dividers social icons buttons these elements are growing every day so i hope you enjoyed that quick overview of the design library as you can see it is an important part of quickly and allows you to be creative while trying things out without having to start from scratch every time the collection will only become bigger and i can't wait to see what you come up with don't forget to share your creations with us thank you very much for watching and see you in the next one

Channel: Cwicly

Views: 538

Keywords:

Id: JPL0EXtcmx4

Length: 7min 37sec (457 seconds)

Published: Sun Oct 24 2021