Quix Page Builder

Learning The Basics

Let's get started with Quix 4 basics and requirements.

Quix GDPR compliant At Quix, we take privacy seriously. We ensure that Quix itself does not track, collect, or store any user data. However, as a site owner, you are responsible for handling form submissions, cookies, and third-party services on your website. Quix provides built-in tools to help you stay GDPR-compliant effortlessly. No Tracking by Quix Quix does not collect any personal data from your website. We do not track visitor activity, store form submissions, or log user interactions. Your website's data

Jmedia Issue: White Window Instead of Image - How to Fix? If you are encountering an issue where attempting to open an image results in a white window displaying "Jmedia," this guide will walk you through some user-friendly troubleshooting steps to help resolve the problem. Please follow the steps below in order until the issue is resolved.

Speed Issues? Troubleshooting Quix as the Default Platform on Your Website. If you are experiencing slow website performance after making Quix the default for everything, this guide will help you address and resolve the issue. By clearing your browser cache, server cache, and Quix cache, you can improve your website's speed and eliminate the problem.

Picture Perfect: How to Fix Blurred Background Images If you are experiencing blurred background images on your webpage and are looking for a solution, this guide will help you troubleshoot and fix the problem. Following the steps below, you can ensure that your background images load correctly and appear sharp and visually appealing. Step 1: Checking Opacity Settings:  Open the page where the blurred background image is occurring. Look for the opacity panel, usually located below the color panel or within the CSS properties of the backgr

Say Goodbye to Quix Pro Notices: Troubleshooting Tips If you have recently installed Quix 4 Pro and are encountering a persistent "Get a Quix Pro" notice on your website, this guide will help you resolve the issue. The notice is frequently a result of a cache issue, and by following the instructions below, you can clear the necessary caches to get rid of the notice. Step 1: Clearing Browser Cache Step 2: Clearing Joomla Cache Step 3: Clearing Quix Cache

Quix Domain/License Policy The terms and conditions for using Quix Page Builder, a well-known website construction tool, are outlined in its own domain and licensing policy. This policy sets forth the parameters for utilizing Quix Page Builder, including domain usage, required licenses, and permissible activities. To maintain compliance and make the most of this potent website creation tool, it is crucial that you be familiar with the domain and license policies. At Quix, we offer a per-site license for our product. Ea

How to activate Quix 4 License? To unlock the full potential of Quix and access all its features, you need to activate the license. Here's a step-by-step guide on how to activate the license: : Obtain your License Key: You need a valid license key to activate Quix. If you have already purchased a license, ensure your license key is ready. If you haven't obtained a license yet, you can purchase one from the ThemeXpert website. Access the Joomla Administration Panel: Log in to your Joomla website's administration panel usin

How to fix if Quix icons not loading on the frontend or builder? If you're experiencing issues with Quix icons not loading on the frontend or builder, there is a simple process you can follow to fix it: Go to Quix admin > Options > Clear Icon Cache. This will clear the cached icons on your site and force Quix to reload them from the server. Clear Joomla's system cache. This will ensure that any cached files related to Quix are also cleared. Reload the admin page and visit any page with a Quix icon. This should re-load the icons from the Quix server

Captcha - reCAPTCHA guide To work with it, First enable and configure it from your plugin settings and then select it as default from global config. Configuration process: Go to Extensions > Plugins, no find Invisible reCAPTCHA. Configure and enable it. Then go to System > Global Configuration> Site tab. Find ‘Default Captcha’ and make Invisible reCAPTCHA as default captcha for your site. You configuration for reCaptcha is done, now you can use captcha in quix’s form element. To enable captcha in your form

Activating your Quix License License activation process Please follow the steps: Login at ThemeXpert site and visit Dashboard at https://www.themexpert.com/dashboard Copy your Auth key or Generate a new one then copy it. Now login to your Site's Joomla Administration panel and visit Quix Dashboard Click on the top Lock Icon for Activate License and provide your license key and username of ThemeXpert site. Follow these pictures below for better understanding. ThemeXpert Dashboard Quix Dashboard Quix Activation Modal

Features

Explore Quix features and learn how to use them properly.

Responsive Responsive in web designing means how your website will response in different screen devices. This feature will allow you see how your site will look on desktop screen, tablet screen, and mobile screen. Device Preview On the main settings of toolbar, you’ll find 3 device icons - Desktop, Tablet, and Mobile. Clicking on them will show you the preview of your site in the screens of desktop, tablet and mobile. Responsive Column The column will response according to the device screen. In desktop mo

Hover Effect Hover effect is one of the most coolest effect to be added to your site. Hover effect is the change of the color or image when your put mouse cursor over it. Hover effect comes with a few options including solid colors, gradient colors, image etc. Moreover, you can apply hover effect without any existing background color or image. Hover In Background To add this effect in the background of section, row, column and element, you can go through the following steps. Go to the settings option Go to

Gradient Effect A gradient effect is a graphical effect that produces a three dimensional color look by blending one color into another. In this effect more than one color is used, where one color gradually fades and changes to the other color. Adding a Gradient Effect to your background will give the background fusion of colors. How To Add Gradient To apply gradient effect in the background, follow these steps: Go to the mini-toolbar of section or row or column, mainly where you want the gradient effect. Sele

Shape Divider Shape Divider simply allows you to divide the section your page with designed shapes. This feature enhances the designs of the sections. Adding a different style to the section will make your site look more bold and beautiful. To add a shape divider in a section, follow these steps. Go to section settings Select Styles Select Divider Top if you wanna put in on top Select Divider Bottom if you wanna put in on Bottom DIvider has the following contents in them Divider Stye - Divider style is the

Shortcut keys Shortcut keys are the keyboard shortcuts that allow you to work easily and fast by saving your time. Here a list is provided of currently available hotkeys. Name Shortcut keys Details Insert Enter Insert a paragraph Bold Ctrl / Cmd + B Set bold style Italic Ctrl / Cmd + I Set italic style Underline Ctrl / Cmd + U Draw an underline Link Ctrl / Cmd + K Insert a link Redo Ctrl / Cmd + Y Redo any changes Undo Ctrl / Cmd + Z Undo to previous change Left Align Ctrl / Cmd + Shift

Typography The feature Typography allows you to change the text styles including fonts, size, height, width etc and other additional settings to increase readability of the text and make it compatible with the site style. You can make the text fashionable, stylish and cool with this feature. To change the format of heading or text, follow these steps. Select the setting of Header / Text element Select Styles tab From there select Typography This feature has the following settings in it. Font - Font op

Custom CSS (Pro) Custom CSS is one of the most efficient feature Quix implemented. By using this option, you’ll be able to add your own CSS designs in column and element. This feature is implemented in case you want to insert your own designs that are not available in Quix. All you need to do is just write the CSS code in the field. To add CSS code to your element follow these steps. Open the settings options Go to Advanced tab Click Custom CSS Now to write the code inside the field area, follow these steps.

Animation Feature Quix 2 has embedded new features for each and every element. One of them is animation. This feature will let you add entrance animation to the elements. This means each time your page is reloaded, your column or element will appear with animation. This feature is included in the settings of column and element. To add animation to your element follow these steps. Select the element Go to Advanced option Select Animation This feature has the following settings in it. Entrance Animation - Entra

Box Shadow Box shadow effect allows you to create a shadow effect outside or inside the box giving the box a 3D look. This makes the box look popping up from a flat surface. This feature is added in the settings options of section, row, column and element. To use this feature follow these steps. Go to settings option where you want to put the border Search for - Border & Box Shadow This feature has the following settings in it. Color - Box shadow color will allow you to set the color you want to us

Text Shadow Text shadow feature allows you to add a shadow effect under the text. With this effect you can give your text a 3D look. This makes the text look floating. To add a shadow effect in the text follow these steps: Go to settings option of header or text element. Go to Styles tab Select typography There you’ll find Text Shadow This feature has the following settings in it. Color - Box shadow color will allow you to set the color you want to use. Currently there is option for only using solid col

Elements

Everything you need to know about Quix elements.

Text Editor Element Text Editor used in Quix is a TinyMCE WYSIWYG editor which is used for adding text with editing options. It is used for many options but mostly to create the contents of a page. To add this element to your site follow these steps. Select Add New Element from column An elements list modal will open From there select Text element Here you’ll find three tabs - General, Styles, & Advanced.These tabs will help you to modify the element in your own way. You can add new fields, edit settings, app

Joomla Module Element Joomla modules are lightweight and flexible extension that are used for page rendering. These modules are situated in the Joomla administrator panel. You can create a new module or use the existing one. After creating a new module you need to enable it from Joomla administrator panel and only then you can use in your Quix page. Joomla module element connects with the admin panel and allows you to bring the changes. To know more about Joomla module you can click here. To edit the modules from yo

Spacer Element The Spacer element allows you to add specific horizontal space within two sections or elements. It is a very important as it illuminates the confusion between margin and padding. To add space to your webpage content, follow these steps: Select Add New Element from column An elements list modal will open From there select Spacer element Here you’ll find the following tabs - General & Advanced.These tabs will help you to modify the element in your own way. You can add new fields, edit setti

Heading Element The heading element allows you to set a title/heading on the top of a content. The heading is the title at the head of a page or section of a book. This elements attracts visitors and connect them to the content. To use this element, follow these steps. Select Add New Element from column An elements list modal will open From there select Heading element Here you’ll find three tabs - General, Styles, & Advanced.These tabs will help you to modify the element in your own way. You can ad

Image Element Images play a big role in content. Without an image, your whole content will be nothing but a boring article to read. And no one loves boring articles unless you make it appealing to them. To use this element, follow these steps. Select Add New Element from column An elements list modal will open From there select Image element Here you’ll find three tabs - General, Styles, & Advanced.These tabs will help you to modify the element in your own way. You can add new fields, edit settings, app

Blurb Element Blurb element is the combination of image, heading and text element. It's like a shortcut. If you need to use all these 3 elements in one section, you can do it easily. All you need to do is select the element and edit the way you want. To use this element, follow these steps. Select Add New Element from column An elements list modal will open From there select Blurb element Here you’ll find three tabs - General, Styles, & Advanced.These tabs will help you to modify the element in your ow

Button Element Button element will help you to insert a button any section or column you want. Moreover, you can creatively design it and make it one of the most attractive object of your site. To use this element, follow these steps. Select Add New Element from column An elements list modal will open From there select Button element Here you’ll find three tabs - General, Styles, & Advanced.These tabs will help you to modify the element in your own way. You can modify the button, add hover effect, apply

Column Element Column element helps you to design a complex section. By this you can add various columns inside a column. This is called nested columns. By this element you can use other elements inside the nested column. To use this element, follow these steps. Select Add New Element from column An elements list modal will open From there select Columns element And you’re done. Now all you need to do is, add elements to it.

Divider Element Divider is a horizontal line that divides the content. You can use it as a separator between contents or highlight the title with it. This is basically used for designing purpose. To use this element, follow these steps. Select Add New Element from column An elements list modal will open From there select Divider element Here you’ll find two tabs - General & Advanced.These tabs will help you to modify the element in your own way. You can style the line, use image instead of a long horizont

Testimonial Element Testimonial is used for representing a formal statement testifying the quality of a person or product. It makes the company look more trusted. Now you can add testimonial statements in your site easily with the help of Quix testimonial element. To use this element, follow these steps. Select Add New Element from column An elements list modal will open From there select Testimonial element Here you’ll find three tabs - General, Styles, & Advanced.These tabs will help you to modify the elem

Quix PRO

Explore our guieds, tutorials and how to's for Quix PRO

Countdown Countdown is a sequence of backward counting to indicate the time remaining before an event is scheduled to occur. The countdown element of Quix allows you to add countdown to your site without a 3rd party Extension. You can add countdown in your section by following these steps. Select Add New Element from column to open elements list modal From there select Countdown element Here you’ll find three tabs - General, Styles ,& Advanced General Tab The general tab holds the basic settings of

Form Builder One of the most demanding element is Form builder. This element will help you to build any type of form including contact form, registration form, questionnaire etc. To add form to your site follow these steps. Select Add New Element from column to open elements list modal From there select Form element A popup will appear showing three tabs - General, Styles ,& Advanced. These tabs will help you to modify the form in your way. You can add new fields, change the color and font, change butto

Call to Action ‘Call to action’ is an instruction to your visitor to perform an immediate task. It combines title, text, image and button element which you can style along with a box background colors and much more. The element uses animation and CSS to create user interaction that appear when the user hovers over call to action section. To add this element in a section follow these steps. Select Add New Element from column to open elements list modal From there select Call to action element A popup will ap

Testimonial Carousel Testimonial Carousel is the perfect way to show your clients the potentiality of your provided work. It increases the trust of a new visitor and makes your site trustworthy. A testimonial carousel is a slider containing testimonials of many clients. If you want to provide more than one testimonials in your site then you must go for testimonial carousel. It will save the space holding multiple testimonials in one box. To add this element in a section, follow these steps. Select Add New Element

Counter Element The idea of Counter element came from counter. You might have seen one. It’s a small disc used in board games for keeping the score or as a place marker. Counters are basically number records. Now a days it is used in many sites to keep the track of viewers, subscribers etc. Counter element can be one useful element to your site if your use it properly. To use this element, follow these steps. Select Add New Element from column An elements list modal will appear From there select Counter elemen

Slider Element Slider Pro element allows you to create a beautiful image slide which can be both manual or automatic. This feature makes a site dynamic. It will keep your viewer holding in your site as your viewer would be eager to see what comes next. Most of the websites use this element to showcase they’re gallery image or pictures of room, lobby etc. If you want you can use it simply by following these steps. Select Add New Element from column to open elements list modal From there select Slider Pro elem

Gallery Element Gallery element is one of the most dynamic element ever created. It not only displays photographs and images but also attracts viewers. If you provide only image gallery and invite people to visit the location that would be enough to boost up your business. Now a days, this element is a booster. If you add it to any of your site then it would not only increase the amount of your traffic but also boost up your business. To add this element to any column just simply follow these steps. Select Add

Media Carousel Media Carousel is the next level visual design that allows you to create image and video slider. Now you can easily design your image sliders and video sliders applying animations. Follow these steps to add media carousel to your section. Select Add New Element from column An element list modal will appear Select Media Carousel element A new popup will appear showing three tabs - General, Styles ,& Advanced. These tabs will help you to modify the element in your own way. You can add new fi

Tabs Element Tab Element allows you to divide your content into tabs, either horizontally or vertically. it is similar to the tabs we see in Google. This element will help you to combine multiple contents in one space. You can add this element in your section by following these steps. Select Add New Element from column An element list modal will open up From there select Tab Element element A popup will appear showing three tabs - General, Styles ,& Advanced. These tabs will help you to modify the Tabs

Animated Headline Animated Headline allows you to create eye-catching headline in addition of some rotating ot highlighted words. This element will transform your old boring headline into new and smart one. Animated headline can be one useful element in your site if you use it properly. To use this element, follow these steps. Select Add New Element from column An elements list modal will open From there select Animated Headline element Here you’ll find three tabs - General, Styles, & Advanced.These tabs wi

SEO

Everything you need to know about Quix's built-in SEO feature aka QuixRank.

Keyphrase Length The keyphrase length checks whether the focus keyphrase is present and whether it is too long or not. You can try to target a rather short keyphrase in a cornerstone article (e.g., “page builder”) or a long one in a more specific piece of content (e.g., “best free page builder”). But if you haven’t set a focus keyphrase, SEO cannot calculate the score of your page. Importance of keyphrase length for SEO Using longer focus keyphrases, you are automatically optimizing your page for the long tail.

Text Length Text length indicates the length of the text. To rank well in the search engines, a blog post should contain some minimum amount of words. Long posts will get easily ranked rather than short posts. From posts more than 1000 words, the search engines get more clues to determine what the text is about. How text length works To determine whether your post will rank or not, you need to find the length of the text. For that, you need to know how many words the page has and how much it should contain.

Image Alt Attributes Image alt attributes checks if there are images in your post and if there are alternate tags that use the keyphrase. By adding an alt text in image, you provide users and search engines with a textual description of what’s on that image. This improves your chance of ranking in image search. Importance of optimizing images for SEO Images can improve almost any post or page. A website without an image is nothing but a boring and dull site. Also, think about how hard it would be to make money wit

Internal Links What does the internal link check do? The internal link assessment of QuixRank checks whether you’ve created links to other pages on your own website in your text. It also checks if these links are followed or not followed.Internal link check Why are internal links important for SEO? Google follows links to discover content on websites and to rank this content in the search results. If a post or page gets a lot of links this is a signal to Google that it’s an important or high-value article. Th

Meta Description Length What is a meta description? The meta description is a short text you can add to your post or page. It is sometimes shown in the snippet of your page in Google’s search results. A good meta description summarizes what the page is about and triggers people to visit your page. You can find the meta description field in the snippet editor of the meta box. What does the length meta description check do? This check measures the length of your meta description. It checks whether it is too short (les

Outbound Links Outbound links are links from your website to other websites. What does the outbound link check do? The outbound links check counts the number of links you’ve added to your post or page. It counts nofollowed and followed links. To get a green bullet you’ll have to add at least one followed link. Why are outbound links important for SEO? An outbound link is not essential if you want your post to rank. That’s why you won’t receive a red, but an orange bullet if you don’t have any outbound links.

SEO Title Width What is the SEO title? Your SEO title will be visible to people who are not on your website yet. It will be shown to people on the search engines’ results pages as the title of your snippet, and it can, therefore, be different from the title of your post or page. What does the SEO title width check do? This check assesses the length of your SEO title. If you haven’t created any SEO title yet, the assessment will remind you to do so. You will also receive a bad score if your title is too short an

Set A Keyphrase The focus keyphrase is the field by which you want your post or page to be found for. This can be one single word, but it usually consists of a few words, that’s why it is called a keyphrase. Using SEO section of Quix, you’re bound to fill out your focus keyphrase section for rank up in any searching engine. If your page is all about fitness and you want your page to rank for it, you should optimize your page related to that term. A focus keyphrase should be longer. For example, you can write th

Add More Content Every page on your site needs to contain a certain amount of words to be able to rank. How long your text should be, depends on the kind of page: taxonomy pages require (slightly) less content than posts, whereas cornerstone content should be exhaustive and therefore needs to contain a significant amount of words. Why lengthy posts are needed? Writing long blog post specifically 1000 words or more than that, will give a higher chance to rank top in Google, Bing or in other search engine. At Them

Use The Space - meta description length In QuixRank, we provide you with feedback about the length of your meta description. In this article, we’ll give you some information about meta descriptions in general, and about the ideal length of a meta description. Let’s dive in! What is a meta description? Before we go into detail about the length of a meta description, let’s first explore what a meta description is. If you search for something in a search engine, the search engine will provide you with a list of search results. These sear

Troubleshooting

Learn how to debug Joomla and Quix and fix it properly.

Quix icon only shows up in the editor, not on the front-end Enabling allow_url_fopen is essential for displaying the Quix icon correctly on your website's front-end. Talk to your server administrator to enable this option, as they can guide you on the necessary steps, such as modifying the server's PHP configuration (php.ini) file or using a PHP function like ini_set. Remember that allowing remote file access can be risky, so it's important to be cautious when accessing remote URLs.

How to fix Gmail SMTP authentication error.   If you're using Gmail SMTP details for SMTP mailer, you may have started facing difficulty in sending emails. Less Secure Apps was a feature in Gmail that allowed software and devices to sign in to your Gmail account with your main Google username and password. Now, Google has decided to begin phasing out Less Secure Apps from May 30th, 2022. Google Workspace and Google Cloud Identity users won’t be affected right away, but support for Less Secure Apps will still be phased o

Troubleshooting - How to fix if Quix icons not loading on the frontend or builder? If you're experiencing issues with Quix icons not loading on the frontend or builder, there is a simple process you can follow to fix it:

The entrance animation does not work on the classic builder Enable the Init WoW Js option from the System - Quix System Plugin from the plugin manager.

Page crashes when you add custom script inside quix page Page crashes when you add custom script inside quix page The problem is when you add some script, it replaces the entire body or breaking the entire builder or page. JavaScript Document.Write Replaces All Body Content Issue: You cannot use document.write once the document has completed loading. If you do, the browser will open a new document which will replace the current one. Solutions: Use the innerHTML property to put HTML code inside an element: function gen_output(ad_content){ documen

Optimization

Learn about Joomla and Quix page speed optimization.

GD Library Webp is a next generation image format developed by google. Why do you need WebP? The webp format provides 28% compression over jpeg. if your image size 100 kb in jpeg, it'll be ~72kb in webp format. WebP only works on Chrome and Opera. Quix has fallback support for Mozilla and other non supported browser. When WebP failed to load Quix will automatically load the jpeg version. WebP doesn't load on Chrome! Make sure your server is fully configured for WebP support. To configure WebP please c

Developer

Learn how to customize and extend Quix Joomla Page Builder.

Create new element My Element for Quix Audience: Developer To create and load a custom Quix element we need to register it first and there are few ways to register a new custom quix element: Create a folder inside your default joomla template : “templates/your-template/libraries/quixnxt/visual-builder/elements” Create a system plugin and register quix through a function hook. Now, Let’s create your own quix element plugin. Here are more details to do it. You just need to follow the steps :  Step 1: