Quix 2.0 released and our biggest festival is here. So enjoy 30% Discount on everything! 

Inside Quix - Flexible Layout System Powered By Bootstrap 4

Blog-Cove_20180406-094542_1

Quix Joomla Page Builder is much more upgraded and sorted than it was ever before. Cause now Bootstrap 4 has been included in Quix making Quix page builder unstoppable.

Today I'll talk about the Layout System of Quix. Earlier, we used Bootstrap 3 for layout system. It consists the basics of HTML, CSS, and JavaScript. The preprocessor of Bootstrap 3 is LESS which is written in JavaScript. The popularity of LESS among developers is 13.4%. It uses 4 grid tiers and they are xs(phones), sm(tablets), md(desktops) and lg(larger desktops). And many more things.

You might have got a question, "What's the need of moving to Bootstrap 4?" Right?

Why lack behind when you can work with latest features of Bootstrap. Latest version of Bootstrap is Bootstrap 4. It has new components, more flexibility, and more responsiveness. It supports the latest, stable release of all major browsers and platform except Internet Explorer 9.

Bootstrap 4 offers many new flexible features and it appeared to be the better than the best. So, not delaying further we used Bootstrap 4 for Quix 2.0 page builder.

Reason behind migration to BS4

As you know, bootstrap is the world's most popular framework for building responsive, mobile-first sites, and applications. It has high quality HTML, CSS, and JavaScript to make any project easier than ever.

Bootstrap includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It is based on a 12 column layout and has 5 tiers i.e. xs (extra small), sm (small), md (medium), lg (large) & xl (extra large) breakpoints. Now, these breakpoints are fixed as the pixels are specified. These breakpoints make sure not to break the websites as the changes appear in different devices. Now you don't have to worry about fitting to the screen. It will adjust by default.

Moreover, we choose Bootstrap 4 over Bootstrap 3 for these reasons:

  1. Popularity
  2. Flexibility
  3. Responsiveness

Let's get into a little bit deep. Shall we?

1) Popularity

Bootstrap 4 got its popularity just after arrival. A Bootstrap team made a survey in Tweeter about Bootstrap 4 and they got a very high response. Most of the developers loved it because of its exclusive features.

Around 3.5% of the entire internet uses Bootstrap. Because of its flexbox, form control, appearance & look, mobile-first, and most importantly, the migration from BS3 to BS4 is really very simple.

2) Flexibility

Bootstrap 4 is way more flexible than ever.

The Grid System consists of 3 main parts. Container, Row, and Columns. A fixed container is set by default. Inside the container, rows are set and all you need to do is set the column. And moreover, you can change the size of columns just the way you want.

3) Responsiveness

When it comes to BS4 nothing can beat its responsiveness.

The Grid system consists of 5 grid tiers. The 12 column layout is developed with percentage which makes the drag and drop more easy and smooth. The 12 columns are not a must. You can use 2,3,4,6, and max 12. You can set different column numbers for different devices and make the websites more flexible in display screen of any device. It can adjust from extra small to extra large device screens.

Now that's what I call a revolution…

Continue reading

Quix File Manager and How To Get Most Out Of It

Quix File Manager and How To Get Most Out Of It

Making interactive Joomla websites in real-time was not that much easier before the drag and drop page builder comes. Previously, it's a time-consuming process including a massive complexity in its different pathway. As long as the Drag & Drop page builder came, that tedious work had been easier than ever before to ensure a great hassle free user experience.

There is a good number of page builder can be found on the internet with various features, including sort of core features in common. Each of them is unique with their own distinct functionalities and the way of making the laborious work easier.

They all have sort of functional limitations though. We analyzed and researched about the pros and cons functional abridgments for a long time to find out a better solution to overcome that curb situation, and finally, we released the revolutionary page builder Quix with all the features exist in other traditional page builders including some additional unique features as well.

v1.4.1 is the current version of Quix that comes with an excellent useful File Manager feature that will make you fall in love with it for sure. It allows you Drag and Drop file uploading and organize theme in different categories by storing them in particular folder.

Let's have a look, what things may amaze you about latest File Manager on Quix v1.4.1 Pro.

Trouble-free Drag & Drop File Upload

This feature allows you to upload files just by drag and drop. You can upload any files in any sizes with ease. This size will vary according to the capability for uploading files of your server. There are no limits in uploadable file type and the number of files.

Store Necessary Files all in one place

A most common problem regarding upload files in various path location is that you might be too much confused while searching for a particular file. It highly hampers your working process and kills your time as well. The File Manager allows you to store all your necessary files in one directory path that helps you to find them for further use.

Folder-wise File Organizations

Folders help you to find a particular file faster when you need. You can create folders as many as you need and arrange your files in categories with the help of this feature. Rename a folder or file is simple, just hover over the file or folder you want to rename and you will find an icon including a pop-up message writing rename including black background color.

Multiple File Preview Style

You can show your uploaded files in various styles says box view, list view, and column list view. Selecting Box view, your files are set to be appeared in square boxed styles, selecting List View, your files are set to appear in list styles one below one including File Type, Size, Date of uploading and so on. Selecting Column List View, your files are set to appear list styles but in two columns.

Adobe CC Engine Image Editing

Image files are one of the most important resources for a website which need a little customization in its shape, size and a little correction in colors, sometimes. Adobe CC Engine integrated with the File Manager, and as a result, you need not any image editing tool to customize your image for getting the desired shape and size. You can customize any image file effortlessly with this feature with the help of existing presets filters. Just by right clicking on your mouse, the image customization module will open to let you do your task as per your need. It has a huge customization capability that obviously can meet all your needs and its faster process than any other else I bed. It is able to save your time at a higher rate you might not think about.

Filter Search File Integration

Further find an uploaded file is beyond easy here. Filter option makes so. You can filter your files by Images, Videos, Audios and Archives as well. Just by clicking on of those filter category, all the files in that file type will appear instantly.

Quix and SEO

Quix and SEO

With Quix - the most advanced, fast, and responsive page builder for Joomla, you can build a simple to complex site by yourself.

But creating a website don't ensure the completeness of the online identity of your business. You should optimize your site for the people who uses search engines to find their desired result.

The more you are optimizable to the search engine the more you will be visible to the people.

Search Engine Optimization formerly known as SEO is the hot topic on the World Wide Web. Everybody wants to raise higher and came up on the first page of Google Search and get more traffic.

A research study of hubspot.com says that an average of 12 billion web searches is conducted each month in the U.S.A alone.

Therefore, SEO will gain importance more than anything else as it helps you to boost your brand, drive quality traffic, get visibility, and lend your business the credibility that it needs to succeed.

In today's article, I have identified and made a list of the best SEO practices with your Quix page builder that can make a significant difference in the search engine queries.

Best SEO Practices with Quix

Design Responsively:

Google announced a major update just a few days ago to their search engine algorithm. According to this announcement, there will have a significant impact on mobile search results worldwide.

This update improves the rankings of the sites that provide a mobile-friendly user interface to the searchers. So, you can understand the importance of responsiveness of your site.

But you don't need to worry about this matter while using Quix page builder.

Quix is building for you keep this issue in mind. It is more than responsive.

With Quix you can select a different layout for various devices that will make a marked difference to the way you build a responsive website.

Do KeyWord Research:

Keyword Research is one of the most valuable, and high return activities in the field of SEO that is not only getting visitors to your site but about getting the right kind of visitors. Getting the right keywords can help you to rank high in the search engine.

You should use the professional keyword research tools to finalize your target keywords and use different keyword tools to make a comprehensive list. Some of the modern and free tools are:

Speed Up Your Site:

Website speed is one of the signals indicate by Google algorithm to rank the pages in the search engine result. The research shows that Google measures time to first byte as when it considers page speed.

On the other hand, page speed plays the crucial role in the user experience. Pages with a longer load time tend to have higher bounce rates.

With the advanced caching mechanism and powerful rendering engine of Quix page builder, it will ensure that your website loads faster than your competitor.

SEO Friendly Codebase:

SEO Friendly code means correctly formatted HTML code that helps to make sure that all pages are indexed properly without any major roadblocks. Clear code and better approach make website documents to be easily searchable and ranking on the internet.

Quix page builder follows the guideline of Google and best practice of SEO that ensure that your web pages will contain SEO Friendly coding structure.

SEO Friendly Permalinks:

Make your permalink search engine friendly. To do this, don't use character signs and space in the permalink, use hyphens (-) instead of space, and keep your focused keywords in the permalink.

Do not use underscores (_) in the permalinks, always use hyphens (-). And avoid the using of capital letters.

Speak Up with Google Language:

You should speak up in Google Friendly language. How would be it possible? Just make sure that your main headings are in H1 tag, subheadings are in H2 and H3 tags.

And the essential thing is to make sure that the main heading and the title contain the focused keywords.

Image Optimization:

Google prioritizes image for search something. Always create alt tag and write a proper description in the alt text. And be aware that your alt text is containing the keywords.

Anchor Text:

An appropriate description of the internal links in your content will describe the targeted content more fluently, and it will be more visible to visitors.

Use an appropriate anchor text instead of "here" and "there".

Dofollow and Nofollow:

Use rel="nofollow" tag on low-value links. Therefore, it will not pass the page rank juice to low-value links. To do follow a link you do not need to add anything.

Internal Linking:

Try to interlinking the appropriate contents with each other. Because interlinks will establish the site architecture and spread link juice.

When search engine spider reaches one page, then it will look for the internal links on that page. Therefore, the spider will reach those pages also.

Submit the SiteMap to Google and Bing:

A sitemap will help to index the links of your website in search engine indexing list.

To optimized your site you should submit the sitemap of your site to Google and Bing. Do not think about Yahoo because Yahoo and Bing work together.

Keep the Content Up to Date:

Users don't like the outdated content even the updated content frequently attracts search engine spiders. Therefore, the bot indexing the updated content regularly.

Summing Up

That's all about it. The sooner you will employ these simple tricks with your Quix page builder the sooner you will get a reward.

Hope you will find this article helpful and will be conscious at the time of creating your next Joomla content using your Quix Page Builder.

How to Create a Responsive Chart using Quix Counter Elements?

How to Create a Responsive Chart using Quix Counter Elements?

Presenting the data using the pictures such as graphs or charts is an effective way, and it will add an extra credibility to your website and blog posts.

Charts or Counters are the ones which can show a visual look about something to your visitors, and help them to understand the data quickly.

You'll get three types of counter elements if you are using the Quix page builder. These are: Pie Counter, Bar Counter, and Number Counter.

Today, we aimed to describe these three elements together in this blog post. Let's do it one by one!

The Ways to Create a Responsive Chart using Quix

These three elements are premium Quix element, and you can see these in the element list if you are a PRO user of Quix Page builder.

Pie Counter

Just insert the pie counter element to use it. After that, you have to customize some settings.

quix-counter

Note: One element displays only one pie chart. So, you have to insert more than one pie counter for the different element according to your need.

General Settings:

Under the general settings option, you will see the following options and can customize those.

quix-counter

  • Title: Define the title of the pie bar in this field.
  • Percent: Here define the percentage of the pie bar.
  • Percent Sign: This setting define will you want to show the percent sign (%) or not.

Style Settings:

Here you can see the following options.

quix-counter

  • Animation: Quix will give you the option of 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. If you don't like an animation, then you can also select "No Animation" option.
  • Title Font: Define the font of title text from this field. Here have also some more options - font size, line height, letter case, letter spacing.
  • Bar Color: This option defines the color of pie bar.
  • Percentage Color: This option will define the color of percentage color in the bar.
  • Line Width: Here define the width of pie bar.

Bar Counter

quix-counter

Bar counter let you the option to show all the bars using a single element. Just insert this element and then start to customize the settings.

General Settings:

Under the general settings option, you will see only one option.

quix-counter

  • Add New: Click this button to add a new bar inside the bar element.

Every new bar included with following options:

  1. Title: The title goes here.
  2. Percent: Here define the percentage in number.
  3. Bar Color: Select the color of the bar.
  4. Percentage Color: And here define the percentage color of the bar.
  5. Bar Type: Here you can choose the bar type from three options. These are: Default, Striped and Striped Animated.

Style Settings:

Customize the style options of bar counter with the following options.

quix-counter

  • Animation: You will get 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.
  • Title Font: Choose the font family from this setting and also define the font size, letter case, letter spacing, and line height.
  • Border Radius: Define the radius of the border. It will appear a shadow at the outside of the border.

Number Counter

quix-counter

This counter is quite same as pie counter. That means you have to insert a couple of element for different bars. So, Insert an element and then customize the settings.

General Settings:

The following options you can see under this tab.

quix-counter

  • Title: The title of number counter goes here.
  • Number: Insert the number of the counter bar here in digits.
  • Use Icon: If you want to use an icon just drag the button to "Yes" otherwise keep it at "No".
    1. Icon: You will only see this option if you drug the use icon setting to "Yes". So, select an icon from the list here shown to you.
  • Image: Insert an image by using the right button. Note: If you use an icon then you won't be able to use this option. So, you have to any one option only. An icon or an image.
    1. Image Alt Text: When you insert an image, use the alt text of that in this field.
  • Text Alignment: Define the alignment of text among three options - center, left and right.

Style Settings:

quix-counter

  • Animation: So, again choose an animation style from six animation options.
  • Title Font: Select the font of the title text.
  • Number Font: Choose the font of number font with some extra styles.
  • Title Color: Define the color of the title text.
  • Number Color: Define the color of the number.
  • Background Image: You can use a background image by using the right button shown here.
  • Background Color: Instead of a background image, you can also choose a background color.
  • Padding: If you need some space inside of the element specify it in this fields with digits.

Last Words:

That's mainly it. Hope you have found this article helpful. Looking forward to hearing from you.

How to Speed Up Your Website Development Using Quix Page Builder

How to Speed Up Your Website Development Using Quix Page Builder

The visitors of a website care about the loading speed at the time of browsing a site. Usually, they have a tend to abandon a site if it not loaded in 3 seconds and always expect a site to load in 2 seconds or less.

That is why if you want to keep your visitors than having a fast loading website is the crucial need for you. But as time passes the web contents are not limit into only plain texts but rich medias including high-resolution images, videos, animations.

Therefore, speeding up a website is not so easy as before as the file sizes become heavier when need to load lots of media files.

Joomla, although one of the most popular Content Management System (CMS) but it had a time-consuming issue while building a website or customizing the outlook and flow of a website according to the client's wishes. Luckily Quix arrived as a solution to this problem.

Quix Page Builder for Joomla has come with a tend to boost development of a website and also speed up the loading time. But you should know the best use of it.

In today's article, I will show you the best practice of Quix that enables you to speed up both in the website building and page loading time.

If you are not a developer and don't know how to write a single line of code, then there is nothing to worry. Quix developed for you in mind.

Faster Web Development

Development of a website from scratch is time-consuming. Quix offers you ten built-in pages, drag & drops page building functionality, column resizing functionality, a collection of elements and much more that will boost the development and customization of the outlook of your Joomla site.

You can choose anyone from these pages and customize theme according to your need or just create the new one with the help of lots of elements in the fastest drag and drop way. Let's go through the stunning features:

Drag & Drop Layout Building

quix-page-builder

In past, everyone designed in the browser. We did not have any other options; a text editor and a browser were the only tools we had.

As time passed, life became easier and today you can take control of your page layout with a page builder.

Quix is the most advanced drag and drops page builder for Joomla available in the market. It will manage everything from one place with simple drag & drop interface.

There is nothing you can't build with Quix.

Advanced Column Structure

quix-page-builder

The other page builders offer you some pre-set column layouts. You may get bored with these pre-set column layouts.

With Quix now you can create the column on the fly, and you can immediately resolve a row's column formation with a couple of clicks.

Resize Column Size in Seconds

quix-page-builder

Do you ever see the column resize option in any page builder?

Surely Not. With Quix you can resize column for every devices and screen size.

Similar to drag and drops functionality just stretch the column with the right button of your mouse and see the magic.

Duplicate Anything with Click

quix-page-builder

You can copy any section, row or element on the page, that will saving you a ton of development time.

10 Ready Pages

Quix comes with ten built-in pages, and more is coming. You can just choose one of them and save your time from the design and be arranging elements.

Collection of 23 Elements

quix-page-builder

A group of 23 Quix elements is like the piece of the puzzle.

You can combine and organize them in some ways to create just about any website. The Quix Page Builder will help you make your dream real.

Load any Joomla module inside Element

quix-page-builder

Quix will allow you to load any Joomla module inside an element. Just add a Joomla module element and select any available module you have.

More than Responsive

What do you think about website responsiveness?

If you use a responsive framework to build your site, it will also be responsive. But Quix is more than responsive because you can choose a different layout for the various devices with this stunning page builder.

Compatible with Every Framework

Quix works fluently with any template and framework. You can use it to create beautiful and fluid layouts inside the component area or article of any size and shape.

Faster Page Loading

quix-page-builder

One of the most critical considerations of building a website is to make sure that it load quickly.

With the advanced caching mechanism and powerful rendering engine of Quix made sure your website load faster than your competitor.

Another most important issue is responsiveness. The content of a website is like water. If you put water into the different pot, then it will get the shape of that pot.

In the same way, your content layout should be changeable on different devices.

With Quix you can define the layouts for different devices. Therefore, your defined layout will be visible on a particular device. It will help to speed up you Joomla site.

Final Words:

That's mainly the Quix Page Builder for Joomla it. I hope you find this article helpful. Let us know your query regarding this topic through the comment section.

Quix Free Elements

Quix Free Elements

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

With a little span of time, Quix became the most powerful drag and drops page builder available in the market, with its lots of features.

It is a complete solution for your upcoming Joomla site which is compatible with all frameworks and any templates. You can customize the outlook and the flow of website according to the client's demands.

Quix has 27 powerful elements which will remove your dependency from third party extensions.

That means Quix is your one man army.

If you are using the free version of Quix page builder, you will also get 13 powerful elements with it.

Today I am going to brief on those free Quix elements. So, let's start!

Quix Free Elements

Accordion

quix-free-elements

The accordions introduced in web designing with the same concept of sliders or tabs. That means, it takes a tremendous amount of information and encapsulates it in a smaller area.

The information is stored in a block and organized in a vertical or horizontal manner. When a tab is clicked, then the content block slides upon the other one.

Blurb

quix-free-elements

Blurbs are the short pieces of linked text that you put on an index page or a home page to drive traffic to the original content within your site.

Quix blurb lets you add an icon or an image with the short text to give hints of the blurb in a nutshell.

Button

quix-free-elements

Quix button element gives you the opportunity to create a gorgeous, fantastic and stylish button according to your claim. You can define every notch of the button using the general setting, style setting, and advanced setting.

Divider/Spacer

Using this element you can set a space between two section. The parameters of this element let you the opportunity to stylish it.

Icon

quix-free-elements

Need to use an icon? Look no further! We will give you a plenty of icons collection with the Quix page builder. And with the setting options, you'll stylize an icon on the fly.

Image

quix-free-elements

A single image can reflect thousands of words.

We know your demands, that's why Quix is here! You can insert an image including some latest styling features such as lightbox, animation, responsiveness and more.

Person

quix-free-elements

A team plays a significant role in organizations as well as our personal lives. It also enhances the confidentiality of an organization to the outer world. You may want to introduce your friendly team members, and Quix will help you to go this way.

Slider

quix-free-elements

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.

Use Quix slider element to create a stunning and eye-catching slider for your Joomla site.

Tabs

Tabs are considered to be an excellent user interface element that improves the usability of web contents. Use Quix tab element to organize your web contents in a structured and elegant way.

Testimonial

quix-free-elements

Testimonials are the formal written or recorded form of statements that determine the trust of products or services of any business. It supports the credibility and level of expertise as well as help to get more assignments.

You will get a testimonial element with Quix - the Most Popular Joomla Page Builder, that help you to bring extended functionalities on your site.

Text

quix-free-elements

Quix Text element simply lets you the opportunity to add some important message in any section and styling or highlighting those text in some different ways to attract the visitors.

Video

quix-free-elements

Nowadays videos became one of the most useful tools to communicate with the audience. While text-based contents work as a one-dimensional medium, videos act as the triple.

Just upload your video to any storage site like Youtube or Vimeo and then insert the link of that.

Joomla Module

Quix page builder lets you insert a Joomla module inside Quix element. Not only you just insert it but also define the alignment, animation, margin, padding and more.

Last Words

That's mainly it! We have a plan to fetch some more Quix elements with its free version in near future.

Have any questions? Let us know through the comment section in below.

How to Load a Joomla Module inside Quix Element

How to Load a Joomla Module inside Quix Element

Joomla is a free and extendable open source CMS (Content Management System), which follows the MVC (Model-View-Controller) architecture and used to build websites and online applications.

The structure of Joomla contains seven layers: Database, Joomla Framework, Components, Modules, Plugin, Templates and Web Server.

We, Quix always prioritizes user requirements. While other Joomla page builders, not concern about displaying this layers into a page, we take a great action in this case. Because you may want to use or exhibit some of this layers inside a page.

If you are using the Quix page builder, you can utilize this layers inside a page using the Quix element. Today, I am going to discuss on this topic.

Let's dig into it!

How to load a Joomla Module inside Quix element?

Before launch to the central part let me define Joomla module.

Joomla Module: A Joomla module is similar to an extension which is used to render the pages in Joomla and display the new data from the component. Joomla modules are managed by the module manager from the administrator panel.

Quix has an element both for the Free and PRO users named "Joomla Module" that is used to load a module inside an element. So, at the very beginning step, you have to insert this element.

Insert Joomla Module Element:

Choose a section from a Quix page where you want to display a Joomla Module. Now insert the Joomla Module from the Elements List.

Quix-Joomla-Module

After inserting the element, you have to customize some settings. Now I'll give a brief on the settings of Joomla Module element.

Configure General Settings:

You can see few following options inside general settings tab.

Quix-Joomla-Module

  • Select Module: Here you will see the list of all modules in a drop-down list. Select anyone of them according to your demand. Note: You will see the modules name in the drop-down list only if you have created a module in before from the Administration Panel >> Extensions >> Modules >> New

Quix-Joomla-Module

  • Alignment: Choose the alignment from this option. You will see four types of alignment option there. Left, Right, Center and Justify.
  • Animation: Quix elements come 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. You can also select "No Animation" if you do not like this.
  • Margin: When you need some space outside of the element or outside of the border around elements specify it in this field with digits.
  • Padding: If you need some space inside of the element or inside of the border specify it in this field with digits.

Configure Advanced Settings

Quix-Joomla-Module

The Advanced Settings allows you to fetch some extra style when you need. Just write your own attributes in a CSS class of your templates stylesheet and insert those class names in the defined field.

You can read Quix Documentation to learn from depth. Here you will find some useful direction, and that will be undoubtedly helpful for you if you are a developer.

That's mainly it! Hope you find this article helpful. Let us know your experience or opinion through the comment section.

How to Create an Accordion using Quix

How to Create an Accordion using Quix

Accordions are very similar to tabs that allow for additional content to be shown below the heading upon mouse action, but the items are not displayed within a vertical list.

When a new item within the accordion list is opened, the previously-opened item is closed, and the new item's content is displayed.

Whether you are a Free or PRO user of Quix - the most advanced page builder for Joomla, you will get an accordion element includes with it.

In today's post, I am going to show you how to create an accordion with Quix page builder.

Let's see the customization options of Quix Accordion.

Continue reading

How to Create a Stunning Team Section using Quix

How to Create a Stunning Team Section using Quix

“Coming together is a beginning. Keeping together is progress. Working together is the success.” - Henry Ford

Henry Ford is a great American industrialist, and the founder of the Ford Motor Company, who have defined the importance of teamwork in the above line.

Teams are formed when individuals have a common tendency, preference, liking, and attitude and work together for a common goal. Work will be funnier when you are working as a part of a team.

A team plays a significant role in organizations as well as our personal lives. It also enhances the confidentiality of an organization to the outer world.

Why not you introduce your amicable team members to the world?

But, How?

Never fear, because Quix is here!

Today, I am going to describe Quix Team Element and show how you use this effectively to build a fantastic team section for your website. Let's start!

How to create a stunning Team section using Quix?

The person element of Quix will help you to go this way. But you should mind one thing that is - one element can demonstrate one team member.

Therefore, you have to setup the number of person element with the number of the team member.

Let's assume that; I want to build a team section of eight team members. In this situation, I have to follow the following steps.

Quix-Team

  • Step 1: Create a section
  • Step 2: Take two rows in the section
  • Step 3: Take four columns in every row
  • Step 4: And at the final step, take a person element in every column.

Quix-Team

Therefore, I can get total eight person-element for eight team members.

After inserting an element in a column, 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 person element which will help you to know the depth and work smartly.

Configure General Settings:

You can see few following options inside general settings tab.

Quix-Team

  • Name: Insert here the full name of the team member.
  • Position: The designation goes in this field.
  • Image: Upload an image by hitting the right button and then insert it.
  • Description: You can say some words about yourself or the members in this area.
  • Social Links: Quix lets you add social links of every member. You may notice the buttons including plus (+) and minus (-) sign at the right site. Press plus (+) sign to add a new social field or press (-) to remove one. And just add the URL of the social profile to the left field, Quix will do the rest of the things.

Configure Styles Settings

You can see few following options inside styles settings tab.

Quix-Team

  • Image Style: Image style defines the shape of each profile picture of team members. Here, you will get three built-in shapes to represent. These are: Square, Rounded, and Circle.
  • Text Alignment: You can define the text alignment to left, right or center from this option.
  • Animation: Quix will give you six animation style in total. 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 the person element.
  • Icon Color: The Icon color defines the color of the social icons.
  • Icon Hover Color: You may want to change the color of social icons when the mouse hovers over it. It so, then define the hover color in here.
  • Header Font: This setting determines the font of team members name.
  • Header Text Color: Here delimit the color of header text means the color of name text.
  • Position Text Color: Position defines the designation. Specify the text color of this from this field.
  • Body Font: Here you can define the font of description text.
  • Description Text Color: You can use this field to specify the color of description text.
  • Background Color: Use this option to change the whole background color of the element.
  • Background Image: Instead of use a background color, you can use a background image. Just upload an image using the right button and then upload it.
  • 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 area with digits.

Configure Advanced Settings

Quix lets you the opportunity to fetch some extra style in the elements using Advanced settings. Just write your own attributes in a CSS class of your templates stylesheet and insert those class name.

Quix-Team

You may read Quix Documentation to learn from depth.

Example

Quix-Team

The above image is an example of Quix team element. You will get this powerful and stunning element with our best one page Joomla template - Marvel.

Live Demo

Summing Up

Hope this short tutorial will help you to start with Quix team section. Let us know your question if any and also share your experience of using Quix - Joomla page builder.