WordPress & Joomla Documentation - ThemeXpert

Icon List

2018-12-10T14:25:51+06:00

Icon List element will allow you to set icons in the content. You can use this element to provide content relative icons so that visitors can get an idea of what type content is listed.

To add this element in a section, follow these steps.

Select Add New Element from column
An elements list modal will open
From there select Icon List element

A popup will appear showing three tabs - General, Styles ,& Advanced. These tabs will help you to modify the icons in your own way. You can add new fields, change the color, set the way of layout etc. The details are given below.

General Tab

The general tab holds the basic setting of Icon List element. You’ll find the following editing options here.

Fields Group - Fields group holds icon related settings.

A few fields are given to show how other additional icon settings will look like.

You can duplicate an existed field using this square icon.

You can delete an unnecessary field by clicking the basket icon.

You can add a new field under existing field using this red + plus button.

You’ll find a few settings of each field inside the fields group. These settings are described below.

Title - A title option to keep track which icons you’ve inserted and will be inserting later. This will not appear in the frontend side meaning your viewer will not see the title. It’s for your own record.
Link - Link field will help you to insert the link in this field. You can set your sites twitter page link or facebook page link through it.
Icon - Icon field will allow you to set the icon of the field. There are thousands of icons provided in the icon list. Search the one you’re looking for and insert it by double clicking on the image. You can set individual icons for
Size - You can control the size of the icon. Just scroll the slider and set the size. Or just provide a digit value for it in the value box situated right next to the slider.
Color - A few color picker is provided for different operations. You’ll find color setting options for icons, content, and background.
Layout - In the layout field there are two options provided- list and inline. List will show the icons in the form of list. And inline will show the icons in a single line.
Position - Position will set the positions of icons. You can display the icons in the left side, center or right side of the column.

Styles Tab

Styles tab will help you style up the element. Here you’ll find four editing fields: Typography, Spacing, Border & Color. The editing options are provided according to each field.
Font - Font option will help you to change the font of text. There are thousands of google font provided in a dropdown option. You can go for any of them.
Weight- You can select the weight of specific fonts from the provided field. The higher the number of font weight you set, the bold your text will look.
Size - You can control the size of both text and shape. Just scroll the slider and set the size. Or just provide a digit value for it in the value box situated right next to the slider.
Transform- This field will help you to change the capitalize of the text. All you need to do is to select from the dropdown option.
Style- This field will allow you to set the font style. You can set normal, italic or oblique.
Decoration- You can decorate the text by selecting overline, underline or strikethrough.
Line Height - Line height option will help you to set the height of each and every line. This will insert space between the lines.
Letter Spacing -Letter spacing option will help you to set space between each and every letter. This will help you to avoid the collision between the letters.
Text Shadow - Text shadow effect will help you to add a shadow under the digit or text to give a 3D look. You can even blur the effect to show your text clearly.
Item Spacing - With this slide bar you can control the space between the icons. You can add a huge gap you want or just keep it as it is.
Item Padding - Item padding will help you to insert space within the border of individual icon. You can create a gap between icon and its border.
Text Indent - This field will help you to add space between icon and content. You can add space using the scroll bar or inserting digits in the input field.
Border Width - Set the width of border. You can set a fine thin line or just a fat line. It’s your choice.
Border Type - Border type will allow you to choose what type of border you want for icons. There are few options available - solid, double, dotted and dashed.
Border Radius - There is a border radius available. You can control the radius of border by it. If you want a round shaped border then set the value of border radius more than 50.

Advanced Tab

The advanced tab has the advanced level of settings. You can edit them if you find it necessary or just leave it just the way it is. Here you’ll find six fields : Element styles, Background, Border & Box Shadow, Animation, Custom CSS, and Identifier. These fields are described below in details.

Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.

Accordion

2018-12-07T12:04:14+06:00

Among the 30 element, Accordion is one. It is used to display text in a collapsed, condensed manner, letting you save space while still presenting an abundance of content. It's more like tab element but tab is used for small contents and you can use accordion for elaborate contents.

To use this element, follow these steps.

Select Add New Element from column
An elements list modal will open
From there select Accordion 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 images, edit settings, apply animations etc. The details are given below.

General

The general tab holds the basic settings of accordion element. You can do the following changes here:

Fields Group - Fields group holds various form fields. A few fields are given in fields group. You can duplicate an existed field using this square icon. You can delete an unnecessary field by clicking this basket icon. You can add a new field under existing field using this red + plus button. You’ll find a few of each field of settings given below.
Title- Write the heading text in this field. This heading will represent the whole content in one sentence giving the visitor the idea of the whole content.
Description- You need to insert the displaying text in this field. You can also modify them a little bit. You can style the text using bold, italic format, yellow highlighter and many other things like using tables, text alignment, use order list etc.
Tab Icon - If you want, you set an individual icon to each and every accordion tab. These icons will represent the symbol of the content. You can even set same icon in every accordion using Icon field.
Size - You can control the size of icon. Just scroll the slider and set the size. Or just provide a digit value for it in the value box situated right next to the slider.
Color - A few color picker is provided for different operations. You’ll find color setting options for icon, text, and background.
Behavior - Behavior field will allow you to control the behavior of accordion. You can enable and disable of opening of multiple Items and closing of all items.
Styles Tab

Styles tab will help you to style up the accordion element. Here you’ll find four editing fields - Items, Title, Content, and Icon. The editing options are described in details below.
Margin - Margin allows you to add space to the content in accordance of whole page. You can add space if you find it necessary.
Border Type- There is a border option for image. You can set borders for images as there are 4 types available - solid, double, dotted, and dashed.
Border Radius- Border radius gives the corners of a border a round shape. If you want you can make the sharp corners a smooth
Box Shadow - A box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
Font - Font option will help you to change the font of text. There are thousands of google font provided in a dropdown option. You can go for any of them.
Weight- You can select the weight of specific fonts from the provided field. The higher the number of font weight you set, the bold your text will look.
Size - You can control the size of both text and shape. Just scroll the slider and set the size. Or just provide a digit value for it in the value box situated right next to the slider.
Transform- This field will help you to change the capitalize of the text. All you need to do is to select from the dropdown option.
Style- This field will allow you to set the font style. You can set normal, italic or oblique.
Decoration- You can decorate the text by selecting overline, underline or strikethrough.
Line Height - Line height option will help you to set the height of each and every line. This will insert space between the lines.
Letter Spacing -Letter spacing option will help you to set space between each and every letter. This will help you to avoid the collision between the letters.
Text Shadow - Text shadow effect will help you to add a shadow under the digit or text to give a 3D look. You can even blur the effect to show your text clearly.
Title Padding- Padding allows you set space between the contents inside the column. If you find it necessary, you can use it.
Alignment - You can set the alignment of the icon using this field. You can set the icon either left or right of the content.
Spacing - Spacing option will help you to add space between icon and content. This will help you to avoid the collision between the icons and contents.

Advanced Tab

Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.

Google Map Element

2018-09-23T13:24:43+06:00

Google Map element is very simple and useful element to embed Google map in your website. Using this element will let your users know the location of your office. You can even use it for showing other locations if you want. Like- if you have a site of multiple restaurants or hotels then this element will be a handy.

To add this element in a section or column, follow these steps. Select Add New Element from column to open elements list modal From there select Google Map element

A popup will appear showing two tabs - General & Advanced. These tabs will help you to bring the changes in the map. You can add address, set the view option, set the height of the map etc. The details are given below.

General Tab

The general tab holds the basic setting of Google map. You’ll find the following editing options here.

Address - The address field will help you add the address of the desired location you want to display. Insert the address in the input field and google map will instantly show the location.
Views - From view option, you can decide how you want to show the location in google map. There are 4 options available. These views are -
1. Map - the map view will show you the views of lands, roads, building etc.
2. Hybrid - you'll find a “hybrid” view that overlays map data (street names for example) on top of satellite view.
3. Satellite - satellite view will provide the view look from satellite. You’ll see the roofs of every building and every road name.
4. Terrain - Terrain view shows the 3D elevation of natural geographic features, such as mountains and canyons.
Zoom - Zoom slide option will allow you to set the map in any percentage of zoom. You show your viewer which county or state or town your office is. This will get them an idea in case if they ever want to visit your office.
Height - You can set the height of the map. You can set at any pixel you want. You can set in a little square area or just a big one.

Advanced Tab

The advanced tab has the advanced level of settings. You can edit then if you find it necessary or just leave it they way it is. Here you’ll find six fields : Element styles, Background, Border & Box Shadow, Animation, Custom CSS, and Identifier. These fields are described below in details.

Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple color.
Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.

Social Icon Element

2018-09-22T23:33:14+06:00

Social Icon element lets you add icons related to social media from where you can link all your social media profiles. This element does adding social media icons in a very easy way. You can add as much as you want, color each of them, control the size and much more.

To add this element in a section, follow these steps.

Select Add New Element from column to open elements list modal
From there select Social Icon element

General Tab

The general tab holds the basic setting of social icon element. You’ll find the following editing options here. Fields Group - Fields group holds icon related settings.

One field given to show how other additional icons settings will look like.

You can duplicate an existed field using this square icon.

You can delete an unnecessary field by clicking the basket icon.

You can add a new field under existing field using this red + plus button.

You’ll find a few settings of each field inside the fields group. These settings are described below.

Title - A title option to keep track which icons you’ve inserted and will be inserting later. This will not appear in the frontend side meaning your viewer will not see the title. It’s for your own record.
Link - Link field will help you to insert the link in this field. You can set your sites twitter page link or facebook page link through it.
Image - Image field will allow you to set the image of the icon through this field. There are thousands of icons provided in the icon list. Search the one you’re looking for and insert it by double clicking on the image.
Layout - In the layout field there are two options provided- list and inline. List will show the icons in the form of list. And inline will show the icons in a single line.
Position - Position will set the positions of icons. You can display the icons in the left side, center or right side of the column.

Styles Tab

Styles tab will help you style up the element. Here you’ll find three editing fields: Spacing, Border & Color. The editing options are provided according to each field.

Item Spacing - With this slide bar you can control the space between the icons. You can add a huge gap you want or just keep it as it is.
Item Padding - Item padding will help you to insert space within the border of individual icon. You can create a gap between icon and its border.
Border Width - Set the width of border. You can set a fine thin line or just a fat line. It’s your choice.
Border Type - Border type will allow you to choose what type of border you want for icons. There are few options available - solid, double, dotted and dashed.
Border Radius - There is a border radius available. You can control the radius of border by it. If you want a round shaped border then set the value of border radius more than 50.
Color - A few color picker is provided for different operations. You’ll find color setting options for border, background, hover color etc.

Advanced Tab

Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.

Custom HTML Element

2018-08-06T13:15:04+06:00

Raw HTML element allows you to include html code in the element section. This option will help you to insert raw html codes in case you need them. Like codes for form, iframe, list, comments, quotation etc. To use this element, follow these steps.

Select Add New Element from column
An elements list modal will open
From there select Raw HTML element

Here you’ll find two tabs - General and Advanced.These tabs will help you to modify the element in your own way. You can insert html codes, design the column, apply animations etc. The details are given below.

General Tab

The general tab holds the basic settings of raw HTML element. You can do the following changes here:

Enter HTML Code - Here a field is available for you to write HTML codes. All you need to do is write the code and check if its working or not.
Prepare Content - This will allow to optionally prepare the content with the Joomla Content Plugins. If you want to load other extensions short code, joomla content plugin will help you to do it.

Advanced Tab

Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.

Video Element

2018-08-03T18:11:17+06:00

Video element will help you to add YouTube, Vimeo and Customized videos in your site. By using this element you can use you own creative videos. Upload them in your Youtube channel and then just select it from video element to insert in your site. Or you can insert a reference video if you want to.

To use this element, follow these steps.

Select Add New Element from column
An elements list modal will open
From there select Video element

Here you’ll find two tabs - General and Advanced.These tabs will help you to insert and modify the element in your own way. The details are given below.

General

The general tab holds the basic settings of video element. You can do the following changes here:

Video Type - Video type will help you to set the type of video you want to insert. There is drop-down available showing three options- YouTube, Vimeo and Customized video.
Video ID - YouTube videos and Vimeo videos have id’s for every individual video. So you can insert the video by using video id.
Additional Options - In the additional option you’ll find the height and width changing option. With these scroll bars you can easily change the width and height of the video.
Image - To insert a thumbnail image select the image from media manager. You can upload, an image and use it too. Moreover, you can use icons too from media manager. And if you want to use images from Google, just use the unsplash tab from media manager.

Advanced Tab

Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.

Alert Element

2018-08-03T18:06:21+06:00

Alert messages can be used to notify the user about something special, like- danger, success, information or warning. Now you can add a sidenote or warning note with this alert box. Follow the instructions to add an alert box in a section.

Select Add New Element from column
An elements list modal will open
From there select Alert 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 design the in your own way, edit settings, apply animations etc. The details are given below.

General Tab

The general tab holds the basic settings of alert element. You can do the following changes here:

Heading - Write the heading text in this field. This heading will represent the whole content in one sentence giving the visitor the idea of the whole content.
Content - You need to insert the displaying text in this field. You can also modify them a little bit. You can style the text using bold, italic format, yellow highlighter and many other things like using tables, text alignment, order list etc.
Type - Set the type of alert you want to display. It can be success (green), warning (yellow), danger (red) etc.

Styles

Styles tab will help you to style up the alert box. Here you’ll find three editing fields - Alignment, Heading, and Content. The editing options are described in details below.

Alignment - You can set the alignment via this field. You can set either left, center or right.
Color - A few color picker is provided for different operations. You’ll find color setting options for shapes, headline, and background.
Font - Font option will help you to change the font of text. There are thousands of google font provided in a dropdown option. You can go for any of them.
Weight- You can select the weight of specific fonts from the provided field. The higher the number of font weight you set, the bold your text will look.
Size - You can control the size of both text and shape. Just scroll the slider and set the size. Or just provide a digit value for it in the value box situated right next to the slider.
Transform- This field will help you to change the capitalize of the text. All you need to do is to select from the dropdown option.
Style- This field will allow you to set the font style. You can set normal, italic or oblique.
Decoration- You can decorate the text by selecting overline, underline or strikethrough.
Line Height - Line height option will help you to set the height of each and every line. This will insert space between the lines.
Letter Spacing -Letter spacing option will help you to set space between each and every letter. This will help you to avoid the collision between the letters.
Text Shadow - Text shadow effect will help you to add a shadow under the digit or text to give a 3D look. You can even blur the effect to show your text clearly.

Advanced Tab

Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.

Person Element

2018-07-13T15:35:51+06:00

Representing a slight profile of CEO and employees in a section make the website more trustworthy. This section makes the website much more well known and viewers can easily know about the team members of a company. You can do this by inserting image, heading, text element. Or you can use Person element instead of 3 separate elements.

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 will help you to modify the element in your own way. You can make creative designs, edit settings, apply animations etc. The details are given below.

General Tab

The general tab holds the basic settings of person element. You can do the following changes here:

Image - To insert an image select the image from media manager. You can upload, an image and use it too. Moreover, you can use icons too from media manager. And if you want to use images from Google, just use the unsplash tab from media manager.
Alternate text - Sometimes images don’t show up in every browser or site. In that case, you can use an alternate text and let your visitor know what was the image about.
Link - Allows you to add a link to the image. If you want, you can set a link to the image moving to another page. This is optional.
Name - You can write the name of the person in this field. You can design the name separately from typography field.
Designation - Designation show that person’s position in the company. Is he the CEO or CTO or developer etc. This will give your viewer a clear idea on how best your company is in the professional field and who are the members.
Description - Only showing the name and designation, won’t give the idea on how the person is or what is his work and in which field he works unless you give a brief description. To help you to write the description, a content field is provided.
HTML Tag - HTML tag will set the title size according to html header tag. There are 6 tags - h1 to h6. H1 is the largest tag and h6 is the smallest tag. But if you want to resize larger than h1 or smaller than h6 then you need to change the title size from style tab.

Styles Tab

Styles tab will help you to style up the person element. Here you’ll find five editing fields - Panel, Image, Name, Position and Description. The editing options are described in details below.

Alignment - You can set the alignment via this field. You can set either left, center or right.
Position- With the help of position field, you can set the position of image, icon, and content. For image or icon there are three positions available- left, top, right. For content, there are also three positions available- top, center and bottom.
Padding- Padding allows you set space between the contents inside the column. If you find it necessary, you can use it.
Spacing- This scroll bar will help you to set the space between contents and images. And it is available both in pixel and percentage.
Border Radius- Border radius gives the corners of a border a round shape. If you want you can make the sharp corners a smooth round shape.
Color - A few color picker is provided for different operations. You’ll find color setting options for headline, text and background.
Font - Font option will help you to change the font of text. There are thousands of google font provided in a dropdown option. You can go for any of them.
Weight- You can select the weight of specific fonts from the provided field. The higher the number of font weight you set, the bold your text will look.
Size - You can control the size of both text and shape. Just scroll the slider and set the size. Or just provide a digit value for it in the value box situated right next to the slider.
Transform- This field will help you to change the capitalize of the text. All you need to do is to select from the dropdown option.
Style- This field will allow you to set the font style. You can set normal, italic or oblique.
Decoration- You can decorate the text by selecting overline, underline or strikethrough.
Line Height - Line height option will help you to set the height of each and every line. This will insert space between the lines.
Letter Spacing -Letter spacing option will help you to set space between each and every letter. This will help you to avoid the collision between the letters.
Text Shadow - Text shadow effect will help you to add a shadow under the digit or text to give a 3D look. You can even blur the effect to show your text clearly.

Advanced Tab

Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.

Testimonial Element

2018-07-13T15:33:12+06:00

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 element in your own way. You can add new fields, edit settings, apply animations etc. The details are given below.

General Tab

The general tab holds the basic settings of testimonial element. You can do the following changes here:

Testimonial - Write the testimonial text in this field. In this input, type the testimonials you want to include.
Name - You can write the name of the person in this field. You can design the name separately from typography field.
Designation - Designation show that person’s position in the company. Is he the CEO or CTO or developer etc. This will give your viewer a clear idea on how best your company is in the professional field and who are the members.
Image - To insert the person image select the image from media manager. You can upload, an image and use it. Moreover, you can use icons icons instead of image from media manager.
Alternate text - Sometimes images don’t show up in every browser or site. In that case, you can use an alternate text and let your visitor know what was the image about.
Caption - Captions are the texts provided under image. This text describes the details of the image.

Styles Tab

Styles tab will help you to style up the testimonial. Here you’ll find four editing fields - Testimonial, Name, Position, and Image. The editing options are described in details below.

Color - A few color picker is provided for different operations. You’ll find color setting options for text, name, designation and background.
Font - Font option will help you to change the font of text. There are thousands of google font provided in a dropdown option. You can go for any of them.
Weight- You can select the weight of specific fonts from the provided field. The higher the number of font weight you set, the bold your text will look.
Size - You can control the size of both text and shape. Just scroll the slider and set the size. Or just provide a digit value for it in the value box situated right next to the slider.
Transform- This field will help you to change the capitalize of the text. All you need to do is to select from the dropdown option.
Style- This field will allow you to set the font style. You can set normal, italic or oblique.
Decoration- You can decorate the text by selecting overline, underline or strikethrough.
Line Height - Line height option will help you to set the height of each and every line. This will insert space between the lines.
Letter Spacing -Letter spacing option will help you to set space between each and every letter. This will help you to avoid the collision between the letters.
Text Shadow - Text shadow effect will help you to add a shadow under the digit or text to give a 3D look. You can even blur the effect to show your text clearly.
Image Position - With the help of position field, you can set the position of image, icon, and content. For image or icon there are four positions available- left, right, top and bottom.
Image Width - You can set the width of the image using the scroll bar provided in this field. You can set in pixel or percentage.
Image Spacing - This scroll bar will help you to set the space between contents and images. And it is available both in pixel and percentage.
Image Radius - Image radius gives the corners of the image a round shape. If you want, you can make the sharp corners a smooth round shape.

Advanced Tab

Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.

Divider Element

2018-07-13T11:59:10+06:00

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 horizontal line, apply animations etc. The details are given below.

General Tab

The general tab holds the basic settings of animated headline element. You can do the following changes here:

Divider Type - With the help of divider type you can set the divider you’re looking for. It can be a single horizontal line or image.
Alignment - You can set the divider alignment via this field. You can set either left, center or right.
Border Style - There is a border style option for divider. You can set borders in 4 types - solid, double, dotted, and dashed.
Weight - You can select the weight of divider from the scroll bar. As the digits increase, the thicker divider gets.
Color - A few color picker is provided for different operations. You’ll find color setting options for divider and background.
Width - You can increase or decrease the divider width by scrolling the scroll bar.
Gap - This scroll bar will help you to set the space between the content and divider. This option is available both in pixel and percentage.

Advanced Tab

Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.

Column Element

2018-07-13T11:56:40+06:00

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.

Button Element

2018-07-12T14:46:33+06:00

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 animations etc. The details are given below.

General

The general tab holds the basic settings of button element. You can do the following changes here:

Text - The text field will help you to write the text you want to show on the button. This will give idea to your visitors or clients on what type of button they want to click.
Type - The button type is available in case you can’t decide the button option you want to use for. Usually we use red button to show danger, yellow for warning, green for safe etc. you can think of it as a pre-made button.
Outline - These is an option for enable and disable of outline. By enabling outline, your button will appear with no background but just with border.
Full Width- Full width option will allow you to set the button in a wide range. This will only increment in width.
Icon- The icon option will allow you to set an icon along with the button text. This is completely optional. If you want you can use it or just leave it empty.
Icon Placement- The icon placement option will allow you set the position of icon in the button filed. It can be placed either in the left side or in the right side.
Link - Allows you to add a link to the heading. If you want, you can set a link to the heading moving to another page. This is optional.

Styles

Styles tab will help you to style up the button. Here you’ll find five editing fields - Basic, Typography, Background, Text Color and Border. The editing options for these fields are described in details below.

Alignment- Alignment will help you to set the button in alignment. There are three options available- left, center, and right.
Padding- Padding allows you add space inside the button. If you find it necessary, you can use it.
Icon Spacing- This scroll bar will help you to set the space between icon and button text. This option is available both in pixel and percentage.
Font - Font option will help you to change the font of text. There are thousands of google font provided in a dropdown option. You can go for any of them.
Weight- You can select the weight of specific fonts from the provided field. The higher the number of font weight you set, the bold your text will look.
Size - You can control the size of both text and shape. Just scroll the slider and set the size. Or just provide a digit value for it in the value box situated right next to the slider.
Transform- This field will help you to change the capitalize of the text. All you need to do is to select from the dropdown option.
Style- This field will allow you to set the font style. You can set normal, italic or oblique.
Decoration- You can decorate the text by selecting overline, underline or strikethrough.
Line Height - Line height option will help you to set the height of each and every line. This will insert space between the lines.
Letter Spacing -Letter spacing option will help you to set space between each and every letter. This will help you to avoid the collision between the letters.
Text Shadow - Text shadow effect will help you to add a shadow under the digit or text to give a 3D look. You can even blur the effect to show your text clearly.
Color - A few color picker is provided for different operations. You’ll find color setting options for text, background and border.
Border Type- There is a border option for image. You can set borders for images as there are 4 types available - solid, double, dotted, and dashed.
Border Width- Border width will help you to set the width of the border. You can make it thin like a paper or thick like a frame.
Border Radius- Border radius gives the corners of a border a round shape. If you want you can make the sharp corners a smooth round shape.

Advanced Tab

Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.

Blurb Element

2018-07-12T14:41:58+06:00

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 own way. You can style the contents, edit the settings, apply animations etc. The details are given below.

General

The general tab holds the basic settings of blurb element. You can do the following changes here:

Title - Write the heading text in this field. This heading will represent the whole content in one sentence giving the visitor the idea of the whole content.
Content - You need to insert the displaying text in this field. You can also modify them a little bit. You can style the text using bold, italic format, yellow highlighter and many other things like using tables, text alignment, use order list etc.
HTML Tag - html tags are the size of heading font set according to the html code. There are 6 tags set for title size. H1-H6 is the ideal size set for heading size. H1 represents the highest size and as the number increases, the font size decreases.
Link - Allows you to add a link to the heading. If you want, you can set a link to the heading moving to another page. This is optional.
Image & Icon - To insert an image select the image from media manager. You can upload, an image and use it too. Moreover, you can use icons too from media manager. And if you want to use images from Google, just use the unsplash tab from media manager.
Alternate Text - Sometimes images don’t show up in every browser or site. In that case, you can use an alternate text and let your visitor know what was the image about.
Caption- Captions are the texts provided under image. This text describes the details of the image.

Styles

Styles tab will help you to style up the blurb element. Here you’ll find four editing fields - Image & Icon, Content, Title, and Body Text. The editing options for these fields are described in details below.

Position- With the help of position field, you can set the position of image, icon, and content. For image or icon there are three positions available- left, top, right. For content, there are also three positions available- top, center and bottom.
Spacing- This scroll bar will help you to set the space between contents and images. And it is available both in pixel and percentage.
Image Width - You can increase or decrease the image and icon width via the image width scroll bar.
Alignment- Alignment will help you to set an alignment for the contents. There are four options available- left, center, right, and justify.
Padding- Padding allows you set space between the contents inside the column. If you find it necessary, you can use it.
Color - A few color picker is provided for different operations. You’ll find color setting options for title, body text, and background.
Font - Font option will help you to change the font of text. There are thousands of google font provided in a dropdown option. You can go for any of them.
Weight- You can select the weight of specific fonts from the provided field. The higher the number of font weight you set, the bold your text will look.
Size - You can control the size of both text and shape. Just scroll the slider and set the size. Or just provide a digit value for it in the value box situated right next to the slider.
Transform- This field will help you to change the capitalize of the text. All you need to do is to select from the dropdown option.
Style- This field will allow you to set the font style. You can set normal, italic or oblique.
Decoration- You can decorate the text by selecting overline, underline or strikethrough.
Line Height - Line height option will help you to set the height of each and every line. This will insert space between the lines.
Letter Spacing -Letter spacing option will help you to set space between each and every letter. This will help you to avoid the collision between the letters.
Text Shadow - Text shadow effect will help you to add a shadow under the digit or text to give a 3D look. You can even blur the effect to show your text clearly.

Advanced Tab

Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.

Image Element

2018-07-05T20:53:59+06:00

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

General Tab

The general tab holds the basic settings of an image. You can do the following changes here:

Image - To insert an image select the image from media manager. You can upload, an image and use it too. Moreover, you can use icons too from media manager. And if you want to use images from Google, just use the unsplash tab from media manager.
Alternate text - Sometimes images don’t show up in every browser or site. In that case, you can use an alternate text and let your visitor know what was the image about.
Caption - Captions are the texts provided under image. This text describes the details of the image.
Link - Allows you to add a link to the image. If you want, you can set a link to the image moving to another page. This is optional.

Styles

Styles tab will help you to style up the image. Here you’ll find two editing tabs- Image and Border. The editing options are are described in details below.

Alignment - You can set the image alignment via this field. You can set either left, center or right.
Width - You can set the width of the image using the scroll bar provided in this field. You can set in pixel or percentage.
Height - You can set the height of the image by this field. You can set the height in pixel or percentage.
Opacity - The opacity-level describes the transparency-level. With the given scroll bar, you can set the transparency of the image.
Border Type- There is a border option for image. You can set borders for images as there are 4 types available - solid, double, dotted, and dashed.
Border Color- Set the color of the border matching with the image.
Border Radius- Border radius gives the corners of a border a round shape. If you want you can make the sharp corners a smooth round shape.

Advanced Tab

Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.

Heading Element

2018-07-05T20:50:20+06:00

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

General

The general tab holds the basic settings of heading element. You can do the following changes here:

Title- Write the heading text in this field. This heading will represent the whole content in one sentence giving the visitor the idea of the whole content.
HTML tag- html tags are the size of heading font set according to the html code. There are 6 tags set for title size. H1-H6 is the ideal size set for heading size. H1 represents the highest size and as the number increases, the font size decreases.
Link - Allows you to add a link to the heading. If you want, you can set a link to the heading moving to another page. This is optional.

Styles

Styles tab will help you to style up the heading element. Here you’ll find two editing fields - Options and Typography. The editing options are are described in details below.

Alignment - You can set the headline alignment via this field. You can set either left, center or right.
Color - A few color picker is provided for different operations. You’ll find color setting options for shapes, headline, and background.
Shape Weight- You can control the weight of the shape by slidebar the bar or insert the numbers in the input field right next to the slidebar.
Font - Font option will help you to change the font of text. There are thousands of google font provided in a dropdown option. You can go for any of them.
Weight- You can select the weight of specific fonts from the provided field. The higher the number of font weight you set, the bold your text will look.
Size - You can control the size of both text and shape. Just scroll the slider and set the size. Or just provide a digit value for it in the value box situated right next to the slider.
Transform- This field will help you to change the capitalize of the text. All you need to do is to select from the dropdown option.
Style- This field will allow you to set the font style. You can set normal, italic or oblique.
Decoration- You can decorate the text by selecting overline, underline or strikethrough.
Line Height - Line height option will help you to set the height of each and every line. This will insert space between the lines.
Letter Spacing -Letter spacing option will help you to set space between each and every letter. This will help you to avoid the collision between the letters.
Text Shadow - Text shadow effect will help you to add a shadow under the digit or text to give a 3D look. You can even blur the effect to show your text clearly.

Advanced Tab

Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.

If you want to turn off fix header follow the following tutorial.