WordPress & Joomla Documentation - ThemeXpert

Smart Tab

2017-10-02T15:56:14+06:00

Where to find?

Smart Tab element available from Quix 1.7 and onward. Make sure your Quix version is 1.7+ to use this awesome element.

Go to a Quix page.
Click on Add Element

Find the Smart Tab on the element list and click over it. You can use the Search box at the right-top to find it quickly.

Configuration

GENERAL

Add New : This button allows you adding new tabs.
Layout : Lets you define that the tab is gonna be Vertical or Horizontal.
Alignment : Define the tab placement. By default its left.
Icon Placement : Define the icon placement. By default its left as well.

Clicking on a tab item, you can find 4 additional settings to configure.

Title : Title of the tab.
Sub Title : Put the tab’s subtitle.
Trigger id : Put the section/ column/ row/ element id which you want to show inside the tab just by triggering this switch.
Select Media : You can select either icon or image for each tab item. It appears above the tab item.

STYLES

Title Font : Select the font family and its variants for the title.
Color : Choose the title text color.
Subtitle Font : Select the font family and its variants for the subtitle.
Color : Choose the subtitle text color.
Subtitle Margin : Define margin space between title and subtitle.
Icon Size : Choose the icon size.
Margin : Define margin space between icon and title.
Background Color : Choose the hover background color for the navigation.
Title Color : Choose the hover title color.
Subtitle Color : Choose the hover subtitle color.
Box Shadow : Enabling this option allows you to apply box shadow over navigation tab menu on its hover.
Background Color : Select active nav background color.
Title Color : Select the active title color.
Subtitle Color : Select the active title color.
Box Shadow : Enabling this option allows you to apply box shadow over navigation tab menu on its active state.
Background : Choose a background color for the tab body.
Box Shadow : Apply a box shadow on tab body.
Margin : Define margin space on tab body.
Padding : Define padding space on tab body.

ANIMATION

Animation Type (Entrance Animation - Parent): Choose an entrance animation style from the drop-down for tab navigation.
Animation Type (Hover Animation - Parent): Choose a hover animation for tab navigation.
Content Animation (Tab Content Animation): Pick an animation style for the tab contents.

ADVANCED

Label : Put the tab name as per your preference.
Id : Autogenerated smart tab’s id. It can be changed according to your need.
Class : You can put additional class to add extra CSS properties, if needed.

How To’s

Load any ELEMENT inside Smart Tab

Add Smart Tab element from the list of Quix elements.
Add your preferred number of tab, suing ADD NEW button at top-left of its configuration modal.
Configure its variants according to your preference and save it using the green Save button at left-bottom.

Now, add the elements that you want to show inside the smart tab.

Even, you can edit the column grid style to represent it differently. For better understanding, watch the video below.

Find other Quix How To Tutorials here.

Click on the Settings icon of the element to show inside smart tab.

Under ADVANCED tab, copy the element id from the id field.

Now, click on Smart Tab’s Settings icon.

Click over the tab item to set it as trigger.

Paste the copied element id on the Trigger id field and save it using the green button at the bottom-left or use the shortcut Ctrl+S from the keyboard.

Similarly, copy the other element’s id and paste on the Smart Tab item’s trigger fields.

Front-end appearance:

Load a SECTION inside Smart Tab

You can effortlessly show a whole section inside this extensible Smart Tab. It's absolutely hassle-free and almost similar like showing an element inside it. The only thing you have to do is to copy the section id and paste on the Trigger id field of a Smart Tab navigation.

Click on Section Settings icon.

Copy the section id from section’s Advanced tab.

Paste it id on the Trigger id field and save it using the green button at the bottom-left or use the shortcut Ctrl+S from the keyboard.

Front-end appearance:

Load a ROW inside Smart Tab

Click on Row Settings icon.

Copy the row id from section’s Advanced tab.

Paste it id on the Trigger id field and save it using the green button at the bottom-left or use the shortcut Ctrl+S from the keyboard.

Front-end appearance:

Load a COLUMN inside Smart Tab

Click on Column Settings icon.

Copy the column id from column’s Advanced tab.

Paste it id on the Trigger id field and save it using the green button at the bottom-left or use the shortcut Ctrl+S from the keyboard.

Front-end appearance:

Smart Tab Live Demo

Find Smart Tab Live Demo here.

Video Popup

2017-03-07T20:19:42+06:00

The most simple module make a Video Popup with a simple configuration settings module. It can be used on any web page and there is no coding knowledge required to configure that.

General Settings

Video Link : Insert the Youtube/ Vimeo video URL here.
Trigger by : You can either use icon or image to trigger the Popup Video. If you select icon from the drop-down, then you need to select an icon from the bunch of icons below to the option. If you choose image to trigger the Popup Video, you just need to upload that image by simply with the UPLOAD IMAGE button can be found only if you select image from the Trigger By drop-down menu.

Styles Settings

Text Alignment : Set the position of the text used in that module.
Animation : Choose an animation effect from the drop-down menu to apply to the module.
Text Font : Select a font style for the texts.
Text Color : Choose a color for the texts.
Use Custom Styles for Button : You can use custom button style if you want and to do so, you need to enable this feature first, then you will find couple of related settings like Button background, button text color, border width, border radius, hover color and few more. You can configure your own button style with this feature. If you want to use default button style, just keep this option remain unchanged.
Margin : You can define the amount of margin pixel for Top, Right, Bottom and Left as well for the module.
Padding : You can define the amount of padding pixel for Top, Right, Bottom and Left as well for the module.

Video

2017-03-07T20:12:15+06:00

The most simple module to add Youtube or Vimeo video on web pages. Its requires no coding knowledge and pretty simple to configure. Really time-saving, just a few clicks and you are done.

General Settings

Video URL : Insert the Youtube/ Vimeo video URL here.

Styles Settings

Animation : Choose an animation effect from the drop-down menu to apply on the module.

Text

2017-03-07T20:06:07+06:00

This module is used to insert simple text content in a web page. It requires no coding knowledge, can be used in any web page. No complex hassle to configure this module, its simple.

General Settings

Text Alignment : Set the text position with this option.
Content :Write the content text here.
Animation : Choose an animation effect for the module.

Styles Settings

Font : Select a font style for the texts.
Text Color : Choose a color for the texts.
Background Image : If you want to use an image as background then just use the UPLOAD IMAGE button to upload your preferred image.
Background Color : You can choose a color for the background with this option.
Margin : You can define the amount of margin pixel for Top, Right, Bottom and Left as well for the module.
Padding : You can define the amount of padding pixel for Top, Right, Bottom and Left as well for the module.

Testimonial Pro

2017-03-07T20:03:27+06:00

This is the pro version of Testimonial module with a huge and enriched customization features. You can surely make a stylized testimonial with this module since thousands of our clients say as they are using.

General Settings

Name : Write the name of the person here.
Job Title, Company Name : Write his/ her designation and company name with a comma.
Image : Upload his/her photograph by simply using UPLOAD IMAGE button.
Testimony : Write what s/he says.
Animation : Choose an animation effect from the drop-down menu to apply to the module.
Text Alignment : Set the position of the texts.
Arrows : Enable or disable of the left, right arrows.
Dots Navigation : You can enable or disable dot navigation.
Autoplay : You can enable autoplay the testimonial slider with this option.
Autoplay Speed : Set autoplay speed.

Styles Settings

Image Style : Select image style from the drop-down menu.
Text Font : Select a font style for the texts used in this module.
Text Color : Choose a color for the texts.
Name Font : Select font style for the name text.
Name Color : Choose a color for the name text.
Designation Font : Select font style for the designation text.
Designation Color : Choose a color for the designation text.
Background Color : Select a color for the Background.
Navigation Arrow Color : Set a color for navigation arrows.
Margin : You can define the amount of margin pixel for Top, Right, Bottom and Left as well for the module.
Padding : You can define the amount of padding pixel for Top, Right, Bottom and Left as well for the module.

Testimonial

2017-03-07T19:58:26+06:00

This module is used to create testimonial section in a very efficient way without being hassled. Just to a few clicks and you are done! Doesn't required any coding knowledge for configuration, its beyond simple.

General Settings

Name : Write the name of the person here.
Job Title, Company Name : Write his/ her designation and company name with a comma.
Image : Upload his/her photograph by simply using UPLOAD IMAGE button.
Testimony : Write what s/he says.
Animation : Choose an animation effect from the drop-down menu to apply to the module.

Styles Settings

Image Style : Choose a style for the image from the drop-down menu.
Font : Select a font style for the texts used in the module.
Text Color : Choose a color for the texts used in the module.
Background Color : Select a background color.
Margin : You can define the amount of margin pixel for Top, Right, Bottom and Left as well for the module.
Padding : You can define the amount of padding pixel for Top, Right, Bottom and Left as well for the module.

Tabs

2017-03-07T19:55:13+06:00

This module is used to generate content tabs menu just by a few clicks. You can create multiple tab menus in a short time without any hassle. Need not any coding knowledge to do so and supported in every type of web pages.

General Settings

Title : Write the tab menu title.
Content : Write content texts here.
Enable icon : If you want to use an icon to the tab menu then enable this option, that allows you to choose an icon for the tab menu.

Styles Settings

Typography : Select a font style for the module with which you can manually customize in a various way according to your wants.
Nav Active Background Color : Choose a color for active tab background.
Nav Active Text Color : Choose a color for active tab text.
Nav Border Color : Choose a color for border.
Body Background : Choose a color for body background.
Body Text Color : Choose a color for body text.
Margin : You can define the amount of margin pixel for Top, Right, Bottom and Left as well for the module.
Padding : You can define the amount of padding pixel for Top, Right, Bottom and Left as well for the module.

Soundcloud

2017-03-07T19:52:12+06:00

This module is used to embed Soundcloud profile onto web pages. This is the most simple way to embed your SoundCloud profile without even a single line of code.

General Settings

Soundcloud : paste your SoundCloud profile embed code here.
Animation : Choose an animation effect that you want to apply on the module.

Styles Settings

Margin : You can define the amount of margin pixel for Top, Right, Bottom and Left as well for the module.
Padding : You can define the amount of padding pixel for Top, Right, Bottom and Left as well for the module.

Social Icon

2017-03-07T19:47:42+06:00

This module is used to create social web icon with linked inside in a very simple way, a matter of just a few clicks nothing else. Surely, this module can make you escaped doing huge code to add social icon and styles them that is very much time-consuming too. Its surely a trendy revolution for the web.

General Settings

Add New : A button to add a new social icon. You can add an icon as many as you want to meet your need.
Duplicate : Clone the icon with all its settings.

Once you click on a created icon, some more settings will appear to configure below this.

Social URL : Enter your particular social profile link here.
Icon : You can choose an icon for this social site.
Layout : You can either select horizontal or vertical layout from the drop-down menu.
Width : Define the icon width in numeric form.
Height : Define the icon height in numeric form.

Don't forget to write px after the numeric value in width as well as height box.

Alignment : Set the icon position.

Styles Settings

Animation : Define the animation that you want the module to be appeared like.
Icon Font Size : Set the icon font size.
Icon Padding : Choose a padding size in pixel for the icons to apply in Top, Right, Bottom, and Left as well.
Icon Color : Select a color for the icons.
Icon BG : Choose a color for icon BG.
Icon Hover Color : Select icon hovers color.
Icon Hover BG : Select icon hovers background color.
Border Styling : By enabling this option, you'll get three more option to style the border; Border Width, Border Radius, as well as Border Style. By default, Border Styling is No.
Margin : You can define the amount of margin pixel for Top, Right, Bottom and Left as well for the module.
Padding : You can define the amount of padding pixel for Top, Right, Bottom and Left as well for the module.

To add any 3rd party plugin code like Facebook or Twitter to an article or module follow the tutorial.

Slider Pro

2017-03-07T19:40:57+06:00

This is the pro version of Slider module with a huge and enriched customization features. You can surely make any type of stylized image slider with this module that thousands of our clients say as they are using this.

General Settings

Add New : A button to add a new image. You can add an image as many as you want to make slider according to your need.
Duplicate : Clone the image with all its settings and you can just change the image later on keeping unchanged other settings.

Once you click on a created image, some more settings will appear to configure below this.

Title : Give a title of the image.
Enable Button : By enabling this option, you can add a button to the image with an URL to open when the user clicks on it. To avoid adding button, simply keep the option set No.
Background Image : Upload the background image with UPLOAD IMAGE button next to this option.
BG Color : Select a color to use as the BG color.
Content : Write the content text for the image.
Alignment : Set the position of the texts as well as image.
Arrows : You can enable or disable showing left, right arrows.
Dots Navigation : You can enable or disable dots navigation button. Disabling this button, the little circular button below the slider will not be shown anymore.
Autoplay : To enable this option, you can play the slider images play automatically from the beginning when it reaches in the last image.
Autoplay Speed : You can set the autoplay speed in milliseconds.

Styles Settings

Header Font : Select a font style with rich customization for the header.
Header Color :
Body Font : Select a font style for the Body.
Body Color : Choose a color for the body.
Arrow Color :
Dots Nav Color :
Button Font : Select a font style for the Button.
Use Custom Style For Button : You can enable custom button style with this option and to enable this option, you can find huge customization feature through which you can make your button exactly how you want.
Padding : You can change the value of padding pixel for Top, Right, Bottom and Left as well for the module. You can use % after the numeric value.

Slider

2017-03-07T19:37:12+06:00

It is the easiest way to add an image slider for any types of websites with rich customization settings. This module is mostly usable to make feature gallery, image gallery, and any sliders as well.

General Settings

Add New : A button to add a new image. You can add an image as many as you want to make slider according to your need.
Duplicate : Clone the image with all its settings and you can just change the image later on keeping unchanged other settings.

Once you click on a created image, some more settings will appear to configure below this.

Title : Give a title of the image.
Enable Button : By enabling this option, you can add a button to the image with an URL to open when the user clicks on it. To avoid adding button, simply keep the option set No.
Background Image : Upload the background image with UPLOAD IMAGE button next to this option.
Content : Write the content text for the image.
Alignment : Set the position of the texts as well as image.

Styles Settings

Header Font : Select a font style with rich customization for the header.
Body Font : Select a font style for the Body.
Body Color : Choose a color for the body.

Pricing Table

2017-03-07T19:34:02+06:00

This module is mostly used generating product price table, offered price table, package table for a business website. This is the most simple way to make a price table where you don't even need a single line of code. You can prepare a price table in a minute just following a few steps.

General Settings

Add New : - Add New : A button to add new table. You can add Items as many as you want according to your need.
Duplicate : Clone the table with all its settings.

Once you click on a created table, some more settings will appear to configure below this.

Package Title : Give your desired package title here.
Make this table featured : If you want to make this table featured, set this option Yes
Package Description : Write package description here.
Currency : Define the currency.
Amount : Set the amount of the package.
Plan Type : Specify the plan type. ( ex. Month, Year, etc)
Feature List : Describe the package's feature list.
Button Text : Enter the button text here that is gonna place at the bottom of the price table.
URL : Put the URL where you want to redirect your clients when they click on the price table below button.
Open new window : Define that whether you want your clients to enter the URL in a new window or not.
Btn icon : Choose an icon for the button.
Btn icon placement : Set the position of the button.
Button Type : You can either select Regular button or a Full Width button.
Button Style : You can choose a button style with some pre-built settings and color.

Styles Settings

Text Alignment : Set the position of the text used in the module.
Animation : Choose an animation effect that how you want the module to appear.
Text Color : Choose a color for the texts.
Background Color : Choose a background color.
Use Border : Define that you want the border or not. If you set it to Yes, then you need to set a couple of settings too that would appear below this like Border Width, Border Radius, and Border Style.
Featured BG Color : Select a background color for the header of the pricing table.
Featured Text Color : Choose a color for the header text.
Featured Title Font : Select a font style for the header text.
Table Heading Padding : You can define the amount of padding pixel for Top, Right, Bottom and Left as well for the table heading.
Package Title Font : Select a font style for the package title text.
Title Margin : You can define the amount of margin pixel for Top, Right, Bottom and Left as well for the title area.
Title Color : Choose your preferred color for the title text.
Package Description Font : Select a font style for the Package Description text.
Description Margin : You can define the amount of margin pixel for Top, Right, Bottom and Left as well for the description area.
Description Color : Choose color for the description text.
Package Currency Font : Choose a font style for the currency text.
Currency Color : Select a color for currency text.
Package Amount Font : Select a font style for the Package Amount text.
Amount Color : Choose a color for the amount text.
Package Plan Type Font : Select a font style for the Package Plan Type text.
Plan Color : Select a color for Plan Type text.
Body Background Color : Select a Background color for the body of the module.
Body Font : Select a font style for the body text.
Table Body Padding : You can define the amount of padding pixel for Top, Right, Bottom and Left as well for the body.
Use Border : If you want to use a border, enable this feature first then you need to define the border width and border style as well that you can find after enabling this feature.
Feature List Item Padding : You can change the padding value of feature list item. By default its 10px.
Footer Background Color : Choose a color for the footer background.
Table Footer Padding : You can change the padding value of footer area. By default its 20px.
Use Custom Style for Button : If you enable this option, you'll find a bunch of settings to configure the button style manually.

You can find the button configuration settings only if you enable the Use Custom Style for Button feature.

Margin : You can define the amount of margin pixel for Top, Right, Bottom and Left as well for the module.
Padding : You can define the save of padding pixel for Top, Right, Bottom and Left as well for the module.

Polar Area Chart

2017-03-07T19:29:59+06:00

This module allows you to simply generate a Polar Area chart with fewer steps. Very much simple just need fewer clicks to configure and can be used in any type of web pages. No required any coding knowledge.

General Settings

Add New : - Add New : A button to add new Items. You can add Items as many as you want to make your own Polar Area Chart.
Duplicate : Clone the item with all its settings.

Once you click on a created item, some more settings will appear to configure below this.

Label : Give a name of theItem.
Data : Define the amount of the item.
Background Color : Choose the background color for the module.
Border Color : Set the border color.

Data must be in numeric form.

Styles Settings

Enable Responsive : Enable or disable responsiveness.
Enable Border : Enable or disable borders.
Padding : You can define the amount of padding pixel for Top, Right, Bottom and Left as well for the module.
Margin : You can define the amount of margin in pixel for Top, Right, Bottom and Left as well for the module.

Pie Counter

2017-03-07T19:22:59+06:00

This module helps you to build an attractive circular bar with an eye-catching customizable color combination that can fit in any type of websites especially for portfolio sites in building the skills graphical representation. It is totally hassle-free with less time configuration capability.

General Settings

Title : The Name of the Item. It will be displayed as circular item bar withs its amount of value in a particular color.
Percent : Define the amount of that particular Item in numeric.

Percent data must be in the numeric form as I defined a little earlier. Otherwise, it will not generate the bar.

Percent Sign : You can enable or disable % sign.

Styles Settings

Animation : You can set an animation of how you want the Bar Counter section to appear.
Title Font : Customize the title font for the Bar Counter. You can choose from plenty of existing Google fonts and define its type ( Bold, Italic, and Underline, Uppercase, Lowercase, and Capitalize as well ), size, line height, and letter spacing.
Title Color : Choose a color for the title text.
Track Color : Choose your own preferred color for the circular track.
Bar Color : Select a color for the bar.
Percentage Color : Select a color that you want as the percentage text color.
Line Width : Specify the line width.

Pie Chart

2017-03-07T19:19:18+06:00

This module allows you to simply generate a pie chart with fewer steps. Very much simple just need fewer clicks to configure and can be used in any type of web pages. No required any coding knowledge.

General Settings

Add New : - Add New : A button to add new Items. You can add Items as many as you want to make your own pie chart.
Duplicate : Clone the item with all its settings.

Once you click on a created item, some more settings will appear to configure below this.

Label : Give a name of theItem.
Data : Define the amount of the item.
Background Color : Choose the background color for the module.
Border Color : Set the border color.

Data must be in numeric form.

Styles Settings

Enable Responsive : Enable or disable responsiveness.
Enable Border : Enable or disable borders.
Padding : You can define the amount of padding pixel for Top, Right, Bottom and Left as well for the module.
Margin : You can define the amount of margin in pixel for Top, Right, Bottom and Left as well for the module.