Quix 2 Visual Builder is here & enjoy 20% discount. Coupon : QUIXPRO

WINTER IS HERE - LET'S MAKE IT WARMER! Enjoy 30% OFF WIN18

How to Create a Beautiful Slider with Quix

How to Create a Beautiful Slider with Quix

What can make your website from good to great?

Have any idea?

Adding a few simple features or some interesting finishing touches will give a real lift to your website.

Sliders are the most common and widely used element on website homepages. You can place all your important content in an interactive and visually appealing slideshow at the top of the page before the main content.

The extensions of Joomla sliders are being downloaded and sold by the thousands. But if you are using Quix page builder, you don't need to spend extra money to buy an extension for a slider.

The Quix is one of the most popular page builder for Joomla, come with 27 powerful and flexible elements that will dispel your dependency from third party extensions.

In today's post, I am going to show you how to create a beautiful slider with Quix page builder.

Whatever you are a free or a PRO user of Quix you will get a slider element with it. And you will get another slider named Slider PRO if you are a PRO user. There have a lot of customization options in the PRO version that lets you create an eye-catching Slider for your Joomla site.

Before launch to the central part let's have a look some example of beautiful sliders those are built with Quix page builder.

Quix-Slider

This image has collected from Academia - Responsive Education Joomla Template that fits perfectly for schools, colleges and language centers.

Live Demo

Quix-Slider

The following image of the stunning slider has collected from Stuart - Best Multipurpose Joomla Template that adapts perfectly with business, corporate, medical and portfolio based websites.

Live Demo

Let's see the customization options of Quix Slider.

How to Create a Beautiful Slider using Quix?

Insert Slider Element:

At the very beginning step, you have to insert a slider element. So, choose a section of your website where you want to inject the slider and then do it.

Quix-Slider

Usually, the slider suits at the top section of a website after the menubar.

After inserting an element, you have to customize some settings which will ensure the stunning outlook of that element.

Now I'll give a short brief about the settings of Quix slider element.

Configure General Settings:

You can see few following options inside general settings tab.

Quix-Slider

  • Add New: When you click on this button, it will add a new slide in the slider.
  • Alignment: Choose the alignment of text from this option. You will see three types of alignment option there. Left, Right and Center.
  • Arrows: This setting will define whether you display the arrow key around the slider or not.
  • Dots Navigation: You can determine whether you show the dots navigation at the bottom of the slider or not.
  • Autoplay: If you would like the slider to slide automatically, without the visitor having to click the next button, then turn this setting to "YES" otherwise keep it to "NO".
  • Autoplay Speed: You will see this setting only when you turn the autoplay option ON. Just insert the number of time in milliseconds that will define the time interval between two slides.

When you add a new slide in the slider, you will get another setting panel and can customize every slide. Just click on anyone, it will take you to the configuration option.

Quix-Slider

You'll get the following options among each slide.

  • Title: The title of the slide goes here.
  • Enabled Button: If you want to put a button on a slide then enable it otherwise keep it disable. When you enable the button option, then you can see three more options. These are included with the button option.
    1. Text: You can also define this as CTA (Call To Action) button. Just insert your action text here.
    2. URL: To where you want to functionalize this action? Insert that URL link here.
    3. Open New Window: If you want to open your link in a new window then turn this option ON otherwise keep it OFF.
  • Background Image: Insert the slider image here. You need to upload a picture and then insert it using the right button. Quix will auto-generate the file path in the following field.
  • Background Color: In the case of, you don't want to insert a background image then you can also set a background color from this option.
  • Content: Put the message here, that you want to exhibit to your clients at first glance.

Configure Styles Settings

You can see few following options inside styles settings tab.

Quix-Slider

  • Header Font: Choose the font of the title text from here.
  • Header Color: Choose the color of the title font.
  • Body Font: As usual of the title font, choose the font of the body text.
  • Body Color: Choose the color of the body text. Quix lets you the option to choose the color using the color picker or HTML color code.
  • Arrow Color: You can define the color of arrow sign from this field.
  • Dots Nav Color: You can also define the color of dots nav from this field which will display at the bottom of the slider.
  • Use Custom Style For Button: Now in this setting option, you have full freedom to customize or design the call to action button according to your choice. When you enable Custom style for Button, you will see some more settings as below.
    1. Button Background Color: Define the background color of the button.
    2. Button Text Color: Define the text color of the button.
    3. Button Border Width: Here in this field, you can see a straight line. Just drag your mouse over it and push it to the right side. You can notice that the much you push the mouse to the right side, the much the number increased at the right box. This figure defines the width of the border in pixels.
    4. Button Border Color: Define the border color of the button.
    5. Button Border Radius: The border-radius property is used to add rounded corners to an element. Increase the value of this field as much as you want.
    6. Button Hover Background Color: If you want to change the background color of the button while you hover the mouse over it, then define the color here.
    7. Button Hover Text Color: As same as the button hover background color, specify the button hover text color here.
    8. Button Hover Border Color: And also specify the button border color for mouse hover action.
  • Padding: If you need some space inside of the element specify it in this field with digits.

Configure Advanced Settings

If you want to fetch some extra style in the slider, Quix also allows you to do this using Quix Advanced settings.

Just write your own attributes in a CSS class of your templates stylesheet and insert those class name.

Read: How Advanced Style Settings Can Save Your Time and Coding

Final Words

I have tried to brief all setting options of the slider element in above. Hope you got it and now able to create an outstanding slider on your own.

Got questions? Write in the comment section and hit the submit button.

How to Create a Carousel with Quix

How to Create a Carousel with Quix

A "Carousel" is commonly referred to as a slide show or a slider; that displays a series of contents or items one at a time. It is frequently used in the homepage or other particular pages to draw the attention of visitors to the featured articles or products of a website.

If you have a website or planning to build a website, then you may concern about CMS's and Page Builders. Both of these two applications are come forward to make your life comfortable.

And we provide you the Best Page Builder for Joomla - Quix. Quix comes with a remarkable evolution in Joomla page building field that will help you to customize the outlook and the flow of website according to the client's demands.

Today, In this post, I will show you how to create a carousel using Quix with some simple steps.

How to Create a Carousel using Quix?

Insert Carousel Element:

At the very beginning stage, you have to insert a carousel element. So, choose a section of your website where you want to display the carousel. Now add the carousel from Quix page builder.

Quix-Carousel

After inserting an element, you have to customize some settings which will ensure the stunning outlook of the element.

Now I'll give a brief on the settings of Quix carousel element.

Configure General Settings:

You can see few following options inside general settings tab.

Quix-Carousel

  • Add New: Use this button to add a new piece of content or item in the carousel.
  • Show Title & Caption: This option will define whether you display the title and caption with carousel item or not.
  • Text Alignment: Choose the alignment of text from this option. You will see three types of alignment option there. Left, Right and Center.
  • Slides To Show: Insert the number that implies how many slides will show in the carousel.
  • Slides To Scroll: Insert the number that indicates how many slides will scroll with a single interval.
  • Arrows: This setting will define whether you display the arrow key or not.
  • Dots Navigation: You can determine whether you show the dots navigation at the bottom of the carousel or not.
  • Autoplay: If you would like the slider to slide automatically, without the visitor having to click the next button, then turn this setting to "YES" otherwise keep it to "NO".
  • Autoplay Speed: You will see this setting only when you turn the autoplay option ON. Just insert the number of time in milliseconds that will define the time interval between two scrolls.
  • Animation: Quix lets you six animation option in total. These are: Fade In, Zoom In, Left to Right, Right to Left, Bottom to Top and Top to Bottom. Choose anyone among them.

When you add new items in the carousel, you will get another setting panel for every item. Just click on any item, the configuration options will come forward to you. You'll get the following options among each item.

Quix-Carousel

  • Title: The title of a carousel item goes here.
  • Image: You need to upload a picture and then insert it using the right button. Quix will auto-generate the file path in the following field.
  • URL: If you want to build a link with the item just insert that URL in the following field.
  • Open New Window: Usually, we don't want to lose our visitors to cast them to another site. But still, we need to link to some external websites. In this case, people often uses "open new window" functionality, and you know it. From this option choose whether you open your link to a new window or not.
  • Caption: The caption of a carousel item goes here.

Configure Styles Settings

You can see few following options inside styles settings tab.

Quix-Carousel

  • Image Style: Image style defines the shape of each image. Here, you will get three built-in shapes to represent. These are: Square, Rounded, and Circle.
  • Title Font: Choose the font of title text from here.
  • Title Color: Choose the color of the title font.
  • Caption Font: As usual of the title font, choose the font of the caption text.
  • Caption Color: Choose the color of the caption text. Quix lets you the option to choose the color using the color picker or HTML color code.
  • Background Color: Use this option to change the whole background color of the element.
  • Margin: When you need some space outside of the element specify it in this field with digits.
  • Padding: If you need some space inside of the element specify it in this field with digits.

Configure Advanced Settings

If you want to fetch some extra style in your carousel, Quix also allows you to do this using Quix Advanced settings.

Just write your own attributes in a CSS class of your templates stylesheet and insert those class name.

Read: How Advanced Style Settings Can Save Your Time and Coding

I have tried to brief all setting options of the carousel element in above. Hope you got it and now able to create an outstanding carousel on your own.

Look at the image in below. Here I have brought up an example of the carousel that we build for one of our Best Responsive Joomla Template - Biznes.

Quix-Carousel

Live Demo

Have any questions regarding Quix? Let us know.

The Easiest Way to Make an Outstanding Testimonials with Quix

The Easiest Way to Make an Outstanding Testimonials with Quix

It is said that, the success and prosperity of any business determined by the level of trust that people have about the products or services of that business.

Testimonials are the formal written or recorded form of statements that support the above concept. These statements support the credibility and level of expertise as well as help to get more assignments.

Thanks to Quix - the Most Popular Joomla Page Builder, it has some stunning elements that help you to bring extended functionalities on your site.

In this post, I am going to show you the way to make an outstanding testimonial using Quix page builder.

The Easiest Way to Make an Outstanding Testimonials with Quix:

Step 1: Add a new "Section", a new "Row" in the section and then add a "Column" into the row.

Step 2: Add "Testimonial Pro" element from the Quix elements list.

quix-testimonial

Step 3: Configure "General Settings". You will see the following options under general settings panel.

quix-testimonial

  • Add New: Use this button to add a new testimonial from your beloved customer.
  • Text Alignment: You can define the text alignment to left, right or center from this option.
  • Arrows: This setting lets you the opportunity to turn the navigation arrows "ON" or "OFF".
  • Dots Navigation: Disabling this option will remove the circle button at the bottom of the slider. And if you want to display dots navigation of this testimonial slider just keep this option enable.
  • Autoplay: You would like to see this testimonial slider slides automatically without the visitor having to click the next button, then turn "ON" the autoplay. When you turn "YES" you have to fix the time in milliseconds that implies the time interval between two slides. But while you keep this option "NO", you don't need to fix anything.

Step 4: Moving on to the next point. Settings of the new item. Click on an item; the settings will come in front of you from the accordion.

Here you will see the following configuration.

quix-testimonial

  • Name: Insert the name of your beloved customer who just recommend your company or service.
  • Job Title, Company Name: Here goes the designation and company name of your consumer.
  • Image: Insert a photo of your consumer that proves the existence of consumer and improve your reliability.
  • Testimony: Here goes the most valuable content means the note that your customer leaves for you as a recommendation for your product or service or company.

Step 5: Configure "Style Settings". You will see the following options under style settings panel.

quix-testimonial

  • Image Style: You will get three types of image style in this field. Round, Circle, and Square.
  • Text Font: You can choose any font style that will load from quix library.
  • Text Color: Choose the color of text from this field using color picker or HTML color code.
  • Name Font: Quix lets you the opportunity to choose the font for every text field. In this way, you can also choose the font of the name field.
  • Name Color: As usual, choose the color of your name field using the color picker or HTML color code.
  • Designation Font: Choose the font of designation field.
  • Designation Color: Choose the color of designation text.
  • Background Color: This field changes the background color of testimonial area.
  • Navigation Arrow Color: In the general setting area, you have chosen the arrow setting, means would you like to show the arrow above the testimonial slider or not. Now from this option, you can also define the color of that arrow.
  • Margin: This property will generate the white space outside of the border around elements.
  • Padding: This property will generate the white space inside of the border.

Step 6: Configure "Advanced Settings". You will see the following options under advanced settings panel: Label, ID & Class.

You don't need to configure first two fields; these fields will generate automatically. But you can configure or fetch your own style using the Class field.

Read: How Advanced Style Settings Can Save Your Time and Coding

Look at the image below.

quix-testimonial

It is an example of Quix testimonial which has used in one of our Best Responsive Joomla Template - Infinito.

Live Demo

Final Words

Buyers in today’s age are more skilled than ever; they conduct vast amounts of research before making any purchase. They like to see how a product has helped or benefitted a similar company, which is where testimonials come into play.

Let us know your query about this post through the comment section in below.

The Easiest Way to Make a Filterable Portfolio with Quix

The Easiest Way to Make a Filterable Portfolio with Quix

Do you know, your work will speak for you?

Showing off your work in a stylish portfolio can be more effective than any other marketing strategy to get more assignments.

If you’re serious about attracting new clients and claiming to be a professional and creative person, then you need a professional-looking, creative portfolio, right?

The good news is Quix has a stunning element of the portfolio that allows you to build a beautiful showcase for your work. This element is beginner-friendly and comes with enough customization options to make your portfolio your own.

Today, I am going to show you the easiest way to create a filterable Portfolio with Quix.

Let's do it!

How to make a Filterable Portfolio with Quix?

Step 1: Add a new "Section", a new "Row" in the section and then add a "Column" into the row.

Quix-filterable-gallery

Step 2: Add a "Filterable Gallery" element from the Quix elements list.

Quix-filterable-gallery

Step 3: Configure "General Settings". You will see the following options under general settings panel.

Quix-filterable-gallery

  • Add New: Use this button to add a new item to your portfolio list.
  • Columns: Fixed the column number in this field that implies how many items you want to show in a single row.
  • Animation: Quix Filterable Gallery element comes with total six animations. These are: Fade In, Zoom In, Left to Right, Right to Left, Bottom to Top & Top to Bottom. Choice one among them to fetch an animated style in your portfolio objects.
  • Show Title: If you want to show the title with portfolio turn this setting to "Yes".
  • Show Description: Same as the title, If you want to demonstrate the story with portfolio turn this setting to "Yes".

Step 4: Moving on to the next point. Settings of the new item. Click on an item; the settings will come in front of you from the accordion.

Here you will see the following configuration.

  • Title: Keep the portfolio title here.
  • Image: Insert the image of the portfolio from your directory.
  • Description: The story behind the portfolio item goes in this field. You may fetch some styles in the text using the TinyMCE editor.
  • Link: If you want to assign your visitors to an external link just keep that link in this field.
  • Tags: Keep the focused keyword here that implies the specialty of your task. This tags will generate a category automatically at the topmost.

Step 5: Configure "Style Settings". You will see the following options under style settings panel.

Quix-filterable-gallery

  • Enable Lightbox: Keep this setting "Yes" if you want to enable lightbox. The lightbox will display the images with a front view look means when user will click on an image it will come forward with a larger size.
  • Content Position: You can display your contents in two ways. Bottom of Image & Overlay.
    1. Bottom of Image: Choose this setting if you want to show the contents in the lower part of the portfolio.
    2. Overlay: Choose this setting if you want to show the contents at the middle and over the portfolio only when the mouse hovers over it.

Step 6: Configure "Advanced Settings". You will see the following options under advanced settings panel: Label, ID & Class.

Quix-filterable-gallery

You don't need to configure first two fields; these fields will generate automatically. But you can configure or fetch your own style using the Class field.

How to add a CSS class in Quix advanced settings?

Step 1: Just go to the following directory: YOUR_ROOT_DIRECTORY/templates/YOUR_TEMPLATE/css/template.css

Step 2: Open the template.css file using any editor.

Step 3: Add your code at bottommost of the CSS file

.quix-new-class{ /* Your CSS code goes here */ }

Just add the CSS attributes that you want to fetch in your style.

Step 4: After that, just add the class "quix-new-class" on the CSS field of advanced settings panel.

Now, I would like to show you an example that indicates how much beautiful portfolio gallery you can build using Quix without any stress.

Look at the image below. I have collected it from one of our Best Joomla Template - Biznes, where we have used Quix page builder to build template pages.

Quix-filterable-gallery

Live Demo

Last Lines:

The method you will use to display your work will say almost everything about you as the work itself. So, show it off with confident, pride and in a smart and professional way.

Let us know about your query if any through the comment section in below. We will love to hear from you.

How Quix will Transform the way you Build Website with Joomla

How Quix will Transform the way you Build Website with Joomla

A website considered as the window to the world of internet. Without a website, you can’t expect the online presence.

These days, almost all small and large business have a website.

Having a website is not very challenging. Because the cost being extremely low for entry level websites, and the drag and drops page builders empower the ability to build a fully functional, great looking websites with the minimum amount of effort and time compared to working with raw source code.

Moreover, it's becoming difficult to imagine a reason for any company of any size not to have a website.

By default, Joomla is a powerful content management system (CMS) that enables you to build all kind of websites and powerful online applications.

But the backend interface of Joomla often gets complicated, especially to new users.

That's why Joomla page builders come in handy that will make you more productive and less confusing with the user-friendly interface and transform the way of website building.

Before arriving Quix page builder, Joomla has a time-consuming issue to customizing the outlook and the flow of website according to the client's demands.

While several page builder exists in the market, those have some gap also, and then Quix comes with a remarkable evolution in Joomla page building field.

If you want to learn Quix structure, you may read out this blog post: Understanding Quix's Structure and How You Can Use Them Effectively

From the title above you must get some ideas about our today's post. Today, We have a plan to disclose the puzzles of Quix that will transform the way you build a website with Joomla.

Let start from the very beginning!

What Quix have and What you can do with Quix?

Built-in Pages

Do you know, Quix has 10 built-in pages?

Yes, Quix has come with ten built-in pages, and more are including in every major release. All of this pages have different outlook with different savor.

Moreover, you can choose the sections which you want from the pages and built a unique layout for your new Joomla website.

Read: Built-in Pages And How You Can Get Started Faster

More than Responsive

Quix has changed the way of building a responsive website. With Quix you can visually design your website for every screen size.

While other page builders use display: none to hide something from mobile users, Quix lets you define the different layout for different size screens.

Even you can hide something for a particular screen using the element visibility option of Quix.

For example, if you don't want to show a particular item or a section on mobile devices just turn the visibility off for those, Quix will never load that element for that screen.

Therefore, the mobile pages will be lighter, smaller and load faster.

Read: Responsive Mode And How To Build Perfect Joomla Website

Portability Power

We know, drag and drops page builder comes in handy with a solution to build and customize a site in the easiest way, but there has a problem also when we need the same design or same sections in different places.

That is because we have to create the same thing more and more time. Quix has a key solution to this boring problem.

With the Quix now you can export anything and can use them in future by importing those.

Read: Powerful Portability and How You Can Export & Import Layout

Collection

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.

Quix comes with 'Collections' that helps to get rid of this time killer process.

Read: Power of Quix's Collection and How You Can Reuse Everything

Advanced Style Settings

The style setting of Quix page builder is the core Customizer that provides a variety of options to customize every single notch of a page.

You will see the style setting option with every Quix element and the advanced customizing system let you the choice to reshape the elements as well as enhanced the outlook and show your creativity to the world with Quix.

You don't need to write a single line of CSS if you are using Quix page builder.

Read: How Advanced Style Settings Can Save Your Time and Coding

Elements

There are so many Joomla extensions available on the web, and it’s always a challenge to find out the best ones that can bring the useful functionality of your site to a new level.

Moreover, sometimes your site will dramatically slow down if you use too many extensions or poorly written plugins on your site.

Thanks to Quix page builder which has come with 27 powerful and flexible elements that will dispel your dependency from ten third party extensions at least.

Read: 10 Joomla Extensions Not Required If You’re Using Quix

Wrapping Up

If you messed up with your site, start to using Quix page builder and do everything that you want to fix. And also stay in touch with us to get more surprised in future.

So tell me, what are you working on right now? Anything we can help you with?

Quix Features: 10 Joomla Extensions Not Required If You’re Using Quix

Quix Features: 10 Joomla Extensions Not Required If You’re Using Quix

Joomla is a free and open-source Content Management System (CMS) that enables users to build powerful websites and online applications.

If you decided to build your site with Joomla, you would need more functionality than the starter package includes with Joomla!

Surely you are familiar with Joomla extensions. A Joomla extension extends the functionality of a Joomla site which includes templates, modules, components or plugins.

There are so many Joomla extensions available on the web, and it’s always a challenge to find out the best ones that can bring the useful functionality of your site to a new level.

Moreover, sometimes your site will dramatically slow down if you use too many extensions or poorly written plugins on your site.

The Quix Builder is a competitive product in the Joomla page builder category which has come with 27 powerful and flexible elements that will dispel your dependency from ten third party extensions at least.

As a result, there has no chance to slow down of your site, and you don't need to worry about it.

Let's dig up the Quix elements which eliminate your dependency from third party extensions if you are using Quix.

Slider Module

Do you want to make your web page look more attractive with a responsive slider?

If your answer is - why not? Then don't search an extension for a slider. Quix is here!

Quix Lite version provides a slider for all general users, but there has another one available in Quix Element list "Quix Slider Pro" which is only for Pro users.

Check out Quix pricing list and choose one package that suits you best.

Quix-Slider-Module

Live Demo

Tabs Module

Quix Tabs is available in both the free and pro version.

This powerful element helps you to make an advanced and ambitious tab, and you can reveal purposeful and deliberate messages with this.

Quix-Tabs-Module

Live Demo

Accordion Module

I like to define accordions as content management tools. When we need a section on our web page, that’s broken into dozens of paragraphs, images, links, or just too many blocks of content accordions acts as to the rescue.

Quix Accordion is available for both general and pro users.

Quix-Accordion-Module

Live Demo

Pricing Table Module

If your company offers products or services, then pricing tables is a crucial need for your website.

Pricing tables should help users to pick the most appropriate plan for them. Quix Pricing Table is available only with its Pro version.

Quix-Pricing-Table-Module

Get this beautiful and decorated pricing table element with our exclusive Joomla template Marvel.

We released this one-page Joomla template a couple of days ago using Quix page builder, T3 framework, and cutting-edge technologies.

Live Demo

Person or Team Module

I believe in teamwork. It is the finest way which has a broad spectrum and done very different roles come together.

So when you start to design a website, you begin to look at the team members. Who plays the important parts of the project?

Quix Person helps you to build a clean and crisp team section with ease.

Quix-Person-or-Team-Module

Live Demo

Testimonial Module

Testimonials are the reviews or comments from your happy consumers who uses your product or service.

It is the best way to build your reliability and to show your potential customers' that you are dependable, trustworthy, and an expert in your field.

Are you using Quix? If yes, then don't need to search an extension for bringing such kind of functionality on your website.

Quix-Testimonial-Module

Live Demo

Counter Module

In which fields are you or your company working and how much expertise you are in these areas?

Show your knowledge level to your consumers with some diagram or chart bar because people like to learn from some images or simple graphs rather than an article.

Quix has two kinds of counter: Bar counter and Pie counter. You can pick anyone from these.

These counters are available with Quix Pro version.

Quix-Counter-Module

Live Demo

Gallery Module

The inherent and visual appeal of the filterable gallery made it very popular.

It is the way to display your products that can drive the attention and interest of your visitors.

It seems similar- when you are walking in a shopping mall, the most creative and elegant window displays will get your attention.

Create an attractive, amicable and responsive filterable gallery to show your best products with Quix Page builder for Joomla!

Quix-Gallery-Module

I have collected the following image from Infinito - a responsive Joomla template that can give a fresh look to your business website and built with Quix page builder.

Live Demo

Carousel Module

Carousels became hugely popular on today's websites, particularly on the homepage. A research study shows that 52% of the top US e-commerce sites use a carousel on the homepage of their site.

With Quix page builder you will get a readily responsive carousel element and can use for various purposes.

Quix-Carousel-Module

Live Demo

Google Map Module

Thanks to Google and internet marketing because finding a product or service we want today is easier than ever.

Google do the hard work for us. With Google Map, your business will be displayed correctly across the entire Google Search network including Google Search pages, Google+ where your customers can find your products or services easily.

Having a Google Map for your Joomla website is not very hard anymore if you are using Quix page builder.

Quix-Google-Map-Module

Live Demo

Summary

I hope that you have introduced to some new features of Quix page builder that you can make use of while using Quix and also identify a few extensions that you can now deactivate from your site.

I have described ten elements in above, but Quix has 27 elements in total. All of those are highly efficient and surprisingly modern.

Try all of this and make a list which of them are you need for your next Joomla site.

Exploring Quix: How To Use Quix Inside Joomla Articles and Make It Beautiful

Exploring Quix: How To Use Quix Inside Joomla Articles and Make It Beautiful

Welcome to the last part of our 2-weeks series post on Exploring Quix. Today, I am going to describe how you can use Quix inside Joomla article to transform your boring articles into an interactive and visually enriched content with Quix - the most powerful, elegant, and customizable page builder for Joomla!

Have you a blog part of your business website?

If Yes, then you must know the purpose of a blog for business or any other sites.

If your answer will be No, then I would like to say some words to manifest the importance of a blog.

Blog originated as a slang from Web Log. In general, blogging is a unique way for people to share their thoughts, feelings, experiences, and opinions.

Whatever you are managing a small business or multinational company, blogging is integral to your online content marketing strategy.

A blog helps to drive traffic to your site, improve your search engine optimization, develop better customer relationship and position your brand as a leader.

So, if you have still no blog section on your site, you must not delay for a long.

However keeping a blog should not ensure that it drives visitors to your site.

You must be conscious about some major points also: Quality of Contents and Usability of Contents. Both these two properties together will ensure keeping visitors on your site as well as increase your Google search ranking.

Let's think; you have quality contents in your site, but the user interface of your blog or article section is not usable, or the font is so gaudy that visitors or reader can't read out comfortably.

So, what's your opinion in this circumstance?

Do the readers stay on your site?

Of course, not. The usability of contents is as much important as the quality.

In our previous posts, we have tried to describe the functionalities of Quix. Hope you have learned Quix in details through our Exploring Quix series and now can able to utilize the best.

Today I am going to show how can you use Quix inside Joomla article as I mentioned it in the beginning.

Quix will help you to give a stylish and beautiful look to your Joomla articles which enhance the usability of your articles.

So, one major point Usability of Contents will resolve if you are using Quix and the rest of the point Quality of Contents is in your hand. Let's dig into it.

How to use Quix inside Joomla article:

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.

Every element of collection list contains two options. Edit and Insert.

  • Edit: This option will allow you to edit your previous design or settings of the saved element.

  • Insert: You can add or insert any element into an article by hitting the "Insert" button.

When you insert an element into an article, it will add a shortcode automatically that generates the element as you want.

The above image contains a button to bring another functionality with Quix, and that is "Create New". You can create a new section or layout or whatever you want and save that into your collection list on the fly.

Click on "Create New" button, the new window that opened will bring you Quix administrator panel and you can do everything according to your need.

Quix has a hidden feature for you because we always prioritize time management. Want to know that?

Just keep your cursor in the shortcode and click on Quix icon, the editing window will open on the fly.

That means 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.

Look at the image below, how Quix transforms the traditional look of a Joomla article to a modern and ambitious look.

If you have missed our previous part of Exploring Quix series, here is the list:

First Part: Understanding Quix's Structure and How You Can Use Them Effectively

Second Part: Built-in Pages And How You Can Get Started Faster

Third Part: Responsive Mode And How To Build Perfect Joomla Website

Fourth Part: How To Enable & Disable Quix Elements

Fifth Part: Powerful Portability and How You Can Export & Import Layout

Sixth Part: Power of Quix's Collection and How You Can Reuse Everything

Seventh Part: How Advanced Style Settings Can Save Your Time and Coding

What's Next?

The Exploring Quix Series is over, but Quix has more to expose. Do not miss our next post. In our next post, we will describe Quix elements that can dispel your dependency from third party extensions.

Have you enjoyed our Exploring Quix series? Share your opinions or suggestions if any; we will be happy to hear from you.

Exploring Quix: How Advanced Style Settings Can Save Your Time and Coding

Exploring Quix: How Advanced Style Settings Can Save Your Time and Coding

Welcome to the seventh part of our 2-weeks series post on Exploring Quix. Today, I am going to describe the Advanced Style Settings of Quix page builder and also show how you can save your time and coding with this incredible powerful drag and drops page builder for Joomla!

Having a website is not very challenging because the cost being moderate in these days. Even you don’t need to be an IT geek to build a website.

The content management systems (CMS's) and drag and drops page builders empower the ability of both experienced and non-experienced users to create a website with the minimum amount of time and effort.

Drag and drops page builders became immensely popular day by day over the last couple of years because of its user-friendly interface.

You can create a fully functional and professional, stylish and nice-looking, and complex pages, articles, and websites relatively easily and certainly much quicker if you are using a page builder compared to working with raw source code.

With lots of features, Quix became the most powerful drag and drops page builder for Joomla. We build Quix as a complete solution for your upcoming Joomla site that is compatible with all frameworks and any templates.

Style Settings of Quix:

We placed an Advanced Styles Settings option with every element to let you the opportunity to style the elements without writing a single line of code.

Through this post, I am going to create a team section using Quix person element and will show how you can stylize your team section on the fly with the stunning and robust styles settings of Quix page builder and able to save your time.

Before we get started, let’s take a look at some examples of Quix Person Element which has been designed for our Joomla templates and used there.

Marvel is our exclusive one-page Joomla template, has released a couple of days ago. It is built with the T3 framework, Quix page builder, and cutting-edge technologies.

You will get this massively dynamic and youthful team section with this responsive Joomla template - Marvel.

Live Demo

With Biznes you can give a fresh and unique look to your business site and can customize anything with a little time using Quix - the most advanced drag and drops page builder.

You will get a list of dexterous elements which look stunning by default. The above image of a team section taken from Biznes.

Live Demo

Now it is the starting point to make a team section using Quix person element and stylizing it.

You will get the following setting options under Style Settings tab.

  • Image Style: Under this option, you will get three sub-options for styling image. These are Square, Rounded, Circle.
  • Text Alignment: You can define text alignment according to your requirements left, right or center.
  • Animation: Quix has come with six built-in animation effect. You can choose one among them or select no animation also.
  • Icon Color: Icon defines the social icons in here.
  • Icon Hover Color: Same as icon color you can also choose the hover color which means how looks those icons when you hover the mouse over it.
  • Header Font: You can define everything through this option including font, font-size, line-height, letter spacing, letter case.
  • Header Text Color: Use this option to give a colorful look to the header text (Name of the team member).
  • Position Text Color: Use this option to give a colorful look to the position text (The designation of a team member).
  • Body Font: Same as the header font you also get the following settings under this option font, font-size, line-height, letter spacing, letter case.
  • Description Text Color: To give a colorful look to the description text you should choose a color for this settings.
  • Background Color: This parameter defines the background color of description text.
  • Background Image: Instead of using a colorful background you can also use an image.
  • Margin: When you need some space in outside of the border, define it here in pixels. And don't forget to insert px after the digit. For example, 10px.
  • Padding: Padding defines the space between the content and the border. When you need some space on the inside of the border, define it here in pixels. And must insert px after the digit. For example, 10px.

Advanced Settings of Quix:

You may want to bring some more functionalities in styling.

If yes, what should you do?

Quix has another setting tab Advanced Settings which will help you to go this way. Quix placed advanced settings with every settings panel including section, row, column and elements.

Click on any setting options and you will see an Advanced Settings tab on the opening window.

You can notice that there has a field for class.

Now I am going to show the use of this field, means I'll show you how to bring your own style using Quix advanced settings.

Look at the image below.

I have made a team section looks like image-1. And suppose now I want to fetch a shadow on the behind of team members which looks like the image-2.

Here are the simple steps you need to follow to fetch this design.

Step 1: Just go to the following directory: YOUR_ROOT_DIRECTORY/templates/YOUR_TEMPLATE/css/template.css

Step 2: Open the template.css file using any editor.

Step 3: Add the following code at bottommost of the CSS file

.quix-new {
    box-shadow: 10px 10px 5px #BFAFDF;
}

Step 4: After that, just add the class quix-new on the CSS field of advanced settings panel.

That's mainly the use of Quix advanced style settings. Hope you have learned the use of it.

Have you missed the previous parts of Exploring Quix series? Read out these:

First Part: Understanding Quix's Structure and How You Can Use Them Effectively

Second Part: Built-in Pages And How You Can Get Started Faster

Third Part: Responsive Mode And How To Build Perfect Joomla Website

Fourth Part: How To Enable & Disable Quix Elements

Fifth Part: Powerful Portability and How You Can Export & Import Layout

Sixth Part: Power of Quix's Collection and How You Can Reuse Everything

Summing Up

You can enable experimental features using the advanced settings options of Quix page builder. These features may change or disappear at any time and shouldn’t be considered stable.

Next: How You Can Use Quix Inside Joomla Article and Make it More Beautiful

Exploring Quix: Power of Quix's Collection and How You Can Reuse Everything

Exploring Quix: Power of Quix's Collection and How You Can Reuse Everything

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.

Quix Layout 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.

Step 1:

From the top bar of Quix Collection click on the menu icon.

Step 2:

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.

Step 3:

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.

Quix Section Collection:

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.

Step 1:

Look at the image below; I have marked an icon. Just click on it.

Step 2:

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.

Step 3:

Now, it's the time to reuse the element. So again, select Load From Collection menu from the top.

What's happened?

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!!

What are the difference between Quix Layout Collection & Section Collection?

#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.

Keep reading!

Power of Quix's Collection

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.

Insert 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.

How to edit Quix collection?

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.

First Method:

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.

Second Method:

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:

First Part: Understanding Quix's Structure and How You Can Use Them Effectively

Second Part: Built-in Pages And How You Can Get Started Faster

Third Part: Responsive Mode And How To Build Perfect Joomla Website

Fourth Part: How To Enable & Disable Quix Elements

Fifth Part: Powerful Portability and How You Can Export & Import Layout

Conclusion

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!