A creative agency that crafts innovative ideas into digital products

Experience mixed with passion is route our work

Overview Quix Joomla Builder

We often use Quix page builder in our works, so you can build beautiful layouts with ease. Quix unique layout controls allow you to create complex site faster.

You can create pages from Quix's component interface or articles, modules and 3pd extensions. Let's take a look component pages first:

Pages

Every page you built with Quix listed on the Pages. You can Add a new page, duplicate or delete an existing page form here.

Quix Pages

New - Click this button to start a new page.

Clear cache - Allow you to clear front-end and back-end cache in one click.

Authenticate - Clicking this button open a modal asking you ThemeXpert username and API key. By providing this information you can update Quix from Joomla admin.

Options - Global options for Quix. You can enable/disable dev mode, access controls and much more.

Toolbar Buttons - Rest of the toolbar buttons are same as other Joomla component toolbar buttons.

Status Icons

- The page status is published.

- The page status is un-published.

- Click this icon to quickly preview the page.

- This page is locked. You may see this icon if someone is editing the page or you left the page without saving it. Click the lock icon to unlock it before editing.

Collections

The Quix Collection is your swiss army knife. Here you can store your favorite layouts, sections or rows later use. Whenever you save an item to your Quix Collection, you can access it quickly from the builder, Joomla articles or any 3rd party components interface. Save yourself hours of design time by creating collections of your favorite element and layout combinations. Every collection item provides a shortcode, and you can just copy and paste it anywhere inside Joomla.

Quix Collection is designed to make your website design faster and re-use every part of your site.

Elements

Elements are the visual building blocks that make up your website. Every element that Quix has can fit into any column width comes with complete design settings, and they are all full responsive.

Options

Quix Configuration

Enable Dev Mode - This option is for developer and you should turned if off for production environment. By enabling this feature, all backend and front-end caching will be disable for faster development.

Component Support - From this option you can select which component collection will work.

Only enable the component you are using. By enabling component not installed on your site may slow down your site.

An Overview Of The Builder

There are three main building blocks: Sections, Rows, and Elements. Using these things in unison allows you to create a countless amount of page layouts. The basic hierarchy of these elements is as follows:

Sections

Sections are used to create the top-level areas on your website. Sections are made up of rows and columns. See more about rows and elements below.

Rows

Rows sit inside of Sections, and you can place any number of rows in a section. You can add any number of columns in a row and resize the column size. Once you define a Row and created column structure, you can then place elements into the column. There is no limit to the number of elements you can put in a column.

Elements

Elements are the main visual block that makes up your website. Every element that Quix has can fit into any column width, and they are all full responsive in nature.

Getting Started

Upon clicking New button on Quix list pages, you will be, presented with the main Quix Builder interface.

Quix Toolbar

Title - You must provide a title for your page. You cannot save the page unless you provide any page title.

Save - You can save the page by clicking save button, or you can use Quix keyboard shortcuts to save the page.

Close - Close the page and get back to the list page.

Preview - This button will only visible when you save the page. By clicking this button, a new browser tab will open with the preview of this page.

Menu - By clicking menu button, you will see 3 options:

Toolbar menu

Save To Collection - At any time you can save a layout that you have built to your Quix Collection to be used at a later time. This option is great for using a layout on another page, section of a page, or even another website built with Quix. Collection provide shortcode that can use inside 3pd component as well. For more information about using the Quix Collection, be sure to check out our detailed tutorial on the subject.

Load From Collection - You can also load a layout that you have saved in the past. Quix comes with a lots of pre-made layout, could be a great choice when you first building a website with Quix.

Export/Import - Quix portability system allow you to export your layout and import them to another website built with Quix. Theme developer could ship many page layout with their themes with Quix export option.

Section Options

Every time you add a section you will need to define its properties. By clicking the section setting icon at the top right corner you will be taken to the Section Settings.

Container Mode - Container ensure proper alignment and padding of grid system.

  • Stretch With Container- Section stretched to browser width and add container(fixed-width) class.
  • Stretch Without Container- Section stretched to browser width and container(full-width) class.
  • Add Container - Add container(fixed-width) class into the section.
  • No Container - No container class added.

Background Image - If defined, this image will be used as the background for this Section. To remove a background image, simply delete the URL from the settings field.

  • Image Repeat - The background-repeat property sets if/how a background image will be repeated.
  • Image Position - The background-position property sets the starting position of a background image.
  • Image Size - The background-size property specifies the size of the background images.

Background Color - If you would simply like to use a solid or transparent color background for your section, use the color picker to define a background color.

Parallax Effect - Enabling this option will give your background images a fixed position as you scroll. Keep in mind that when this setting is enabled, your images will scale to the browser height.

NOTE: if you enable the parallax effect, we recommend that your images are at least the size of a standard screen size since your images will take on the width or height of the browser window (i.e. 1280px by 768px)

Custom Padding - Adjust padding to specific values, or leave blank to use the default padding.

Label - Help you to indentify your section in backend. Give a meaningful label so you can understand later.

Id - An automatic ID already assigned for the section. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.

Class - Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space.

Adding Row and Adjusting Column

After saving your section settings you will need to define column structure for row. You can add as many row with different column structure in a section. By clicking ‘Add Columns’ you will be able to choose from a selection of row types. Rows also have lots of options that you can use to customize their appearance and alter the structure of the layout. You can change row type anytime by click Change Layout icon bottom right of the row.

Columns are based on 12 grid system and you can adjust column grid by dragging the column divider icon.

Quix Column resizing

Tags: