Features

Explore Quix features and learn how to use them properly.
Background Overlay Background Overlay is one of the most admiring feature of Quix 2. Using this feature, you can set an image or color over another image or color using the opacity controlling the transparency of the overlay image. You can use gradient overlay on section, row, column and element. To use background overlay in your section, follow these steps. Go to settings of section Select styles tab Go to Background option and set a background Now select Background Overlay This feature has the following set
Color Preset Color preset feature is the color pallet offering 6 colors to set and reuse. Meaning, this feature allows you to set 6 of your selected color for reuse purpose. Once you choose a color, it will get set by default. You can reuse the color whenever you want, wherever you want.
Multiple Units CSS units determine the measurement of an element along with specific background field. These units include pixel(px), percentage(%), viewport height(vh) etc that defines the measurement of screen. With the help of these units, you can decide the size of your element and background. The available units are - Px - Pixels are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pix
Border Border in web design is like a frame. An image or text box surrounded by a fine line or double. Here, border stands for the edge of section, row, column and element. Using border in a section not only modifies the look but makes it separate from other content. 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
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
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
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
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.
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
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
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
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
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
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