Welcome to the sixth part of our 2-weeks series post on Exploring Quix. Today, I am going to describe the collection power of Quix page builder and also show you how can reuse anything with this incredible powerful drag and drops page builder for Joomla!
There have some general sections on every page of a website such as a header and a footer.
When you are developing a big site, it can be very time consuming if you have to add the same section or element on every page individually.
And most importantly when you want to make a change to it you need to edit every page one by one. Surely, you want to get rid of this time killing process. Quix uses Collections to get around this.
When you add a section or something to Quix Collections, it is stored as a particular type of item within the Quix Library.
Collections make it possible for you to edit something once and have it update all instances of it across your website at once. It will not only economize the time, but it also ensures the consistency throughout the website.
In today’s Quix series, I am going to show how you can use Quix Collections and reuse everything among your site.
Let's dig into it!
Quix brings two types of variations in the collection. These are Layout Collection & Section Collection.
In this example, I have made a Layout, and want to store this for future use. Now I'll show you how it is possible to do with Quix Collection in some easy and quick steps.
From the top bar of Quix Collection click on the menu icon.
Select Save To Collection from the list shown after clicking on the menu.
A popup window will open. You will see a field called Name which for the element that needs to store to give it a meaningful name at the time of saving.
I given the name HomePage and you must be conscious about a meaningful name so that you can find out quickly.
So what's now? Now I want to reuse the layout in a new page. To go this way I have select Load From Collection from the top menu bar.
A popup window has opened. I saw there the saved item which I saved a few seconds ago. I just click on the Load button, and it loaded.
Here is the image of the layout which I have made with Quix page builder and reuse again.
Now I'll show you another collection type. I have made a slider section as an example and want to store this for future use. But in this time I'll play it in another way.
Look at the image below; I have marked an icon. Just click on it.
A new popup window will open. Give it a name and hit the Save button.
In general, a question came in your mind by this time. What's the difference between these two collection types?
Well, let me show some more steps. You find the answer by yourself.
Now, it's the time to reuse the element. So again, select Load From Collection menu from the top.
Can you see the immediate item in the collection list?
I know, your answer is, NO. So where it have gone?
Don't worry. As I mentioned above that we are going to work with section collection, so your collection have saved in the section collection list.
To use this collection, you need just to click on the icon that mentioned Add From Collection from the bottom of the section.
Now we can see the element that I saved a few seconds ago. Just hit the load button to use it.
Moving on to the key point. The Differences!!
#1 When we save something using Save To Collection from top menu Quix considers the whole page as a Layout Collection. On the other hand, if we save something From the Section Quix considers it as a Section Layout.
#2 If you use a layout from the collection it replaces the existing things from the current page, but if you load a section it just placed after a section.
#3 There have another difference between these two; I'll explain it in the Collection Editing part.
The collection can be used inside Joomla articles and other components also. Now I'll show you how to insert an object from the collection list into Joomla articles.
When you start for a new article from your Joomla administrator panel, you can see the Quix icon in your TinyMCE editor.
Click on that icon. In the opening popup window, you will see there a collection of elements if you have saved something in before.
The following image shows that I have saved two things as named HomePage and Slider in my Quix collection.
Can you notice that this two collection are different in types? The first one HomePage is Layout type and the second one Slider is Section type.
I want to insert the slider inside my new article, and that is why I just hit the insert button.
A shortcode will generate automatically, and all is done. See the images below.
That's mainly how easy to reuse anything with Quix Collection.
Now I'll show how you can edit the elements of Quix Collection, and it updates all instances across your website at once.
Let's think; I have added the following slider in several pages, and now I want to make a change on all of them.
In general, I need to edit all of them one by one which would be very time-consuming.
Quix Collection has the key to solving this problem. Let me show it. You can do this in two way.
At first, navigate Quix -> Collections from your Joomla administration panel.
You will see the list of collections which you have saved. The following image shows that I have two elements in my collections.
Just click on any of them, Quix will redirect you to the editing page.
You may notice the collection type from here also. When Quix is redirecting you to the editing panel you can find another difference by yourself. So here is the third difference.
#3 When you edit a Section collection, you won't be able to add a new section in it. And if you are moving to edit a Layout you can add a new section or delete a section.
Imagine, you are writing an article and immediately a plan came into your mind to change the design of your collection. What should you do?
Save & Close the article and follow the first method!!
No, Quix has a hidden feature for you because we always prioritize time management. Just keep your cursor in the shortcode and click on Quix icon, the editing window will open on the fly.
So, the keynote is: When you keep your cursor outside of the shortcode and click Quix icon it will redirect you to collection list & when you keep your cursor inside of the shortcode and click Quix icon it will redirect you to the editing panel.
Do you miss the previous parts of this Exploring Quix series? Read out these:
Second Part: Built-in Pages And How You Can Get Started Faster
Fourth Part: How To Enable & Disable Quix Elements
Don't forget to leave a comment. Share your experience about Quix and let us know your opinion or suggestions if any. We do appreciate it!
Next: How Advanced Style Settings Can Save Your Time and Coding
Our next post of Exploring Quix series is about Advance Style Settings where I'll show how you can formalize your website pages and elements with Quix advance style settings without investing time and coding knowledge. If you are a little bit conscious about design, you must not miss it!