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