WordPress & Joomla Documentation - ThemeXpert

Flip Box

parvez@themexpert.com (Parvez Akther) — Thu, 06 Dec 2018 12:57:37 +0600

Flip box is a box that flips over when you hover on it. This makes the section look more dynamic and fascinating to visitors. You can customize the look and behavior of every flip box differently in the same section.

To use this element, follow these steps.

Select Add New Element from column
An elements list modal will open
From there select Flip Box 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 flip box 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.
Enable Content Image - Enabling content image will allow you to insert image in the content field. You can set image both in front and back of the flipbox.
Enable Background - Enabling this field will allow you to set a background both in front and back side of the flipbox. You can a solid color, gradient effect or images.
Enable Button - You can insert button in the back of the flip box slide. This option is open in the purpose in case anyone feel the need to use a button. You can modify the button in your own way sing color, image, gradient effect, hover effect etc.
Enable Height - You can set the height of the flip box using this field. You can set the height in pixe, em, rem and vh..
Width - You can set the width of the image using the scroll bar provided in this field. You can set in pixel.
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.
Flip Box Effect - For flippling, there are 6 effects available - Flip, slide, push, zoom in, zoom out and fade. Select any of these design will make your slides act like it.
Flip Box Direction - You can decide the flipping effect direction too. There are four option provided - left, right, up, and down.
3D Depth - With 3D depth, you can give your flip box a 3D effect. This will make the box look popping up from flat surface and floating in thin air.

Styles Tab

Styles tab will help you to style up the flip box element. Here you’ll find two editing fields - Front and Back. The editing options are described in details below.

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.
Padding- Padding allows you set space between the contents inside the column. If you find it necessary, you can use it.
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.
Color - A few color picker is provided for different operations. You’ll find color setting options for title, body text, and background.
Spacing- This scroll bar will help you to set the space between contents and images. And it 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.

In the back side of the flip box, button option is available. To edit and decorate a button, you’ll find the following settings.

Color - A few color picker is provided for different operations. You’ll find color setting options for text, name, designation and background.
Padding- Padding allows you set space between the contents inside the column. If you find it necessary, you can use 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.
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.
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.

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.

Animated Headline

parvez@themexpert.com (Parvez Akther) — Wed, 17 Oct 2018 22:35:24 +0600

Animated Headline allows you to create eye-catching headline in addition of some rotating ot highlighted words. This element will transform your old boring headline into new and smart one. Animated headline can be one useful element in your site if you use it properly. To use this element, follow these steps.

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

Here you’ll find three tabs - General, Styles, & Advanced.These tabs 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 animated headline element. You can do the following changes here:

Style - This field will help you set the desired style you want to set for the text. There are two styles available- Highlighted & Rotating.
Shape & Rotating Style - These two field will change in accordance with style. If you choose highlighted then shape will appear from where you have to select a shape for the specific text or word. And rotating style would appear if you choose rotating style from where you can set a different style for text or word.
Before Text- Before text is like a prefix. You can add any text or word before the specific word.
Highlighted Text - In this field, you’ll set the words or text you want to focus more. The word that will attract the customers most.
After Text - After text is like a suffix. You can add any text or word after the specific word.
Alignment- You can set the headline alignment via this field. You can set either left, center or right.

Styles Tab

Styles tab will help you to style up the animated headline. Here you’ll find four editing fields - Alignment, Shape, Animated Text, and Headline. 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 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.

Tabs Element

parvez@themexpert.com (Parvez Akther) — Sun, 14 Oct 2018 18:32:24 +0600

Tab Element allows you to divide your content into tabs, either horizontally or vertically. it is similar to the tabs we see in Google. This element will help you to combine multiple contents in one space. You can add this element in your section by following these steps.

Select Add New Element from column
An element list modal will open up
From there select Tab Element element A popup will appear showing three tabs - General, Styles ,& Advanced. These tabs will help you to modify the Tabs in your way. You can add new fields, change the tab content, renovate entire tab section. The details of this element is given below.

General Tab

The general tab holds the basic setting of testimonials. You’ll find the following editing options here. Fields Group - Fields group holds various testimonial fields. A few fields are given in the 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 settings of each field inside the fields group. These settings are described below.

Title- Title field will help you to give the field a title of each field. This will help you to keep the track of every tab in case you need to replace any one of them later.
Description- Provide the contents in this field. You’ll find some basic settings in it for the text.
Image- Image field will help you to insert image or videos. This is optional. You can remove it by clicking on the basket icon.
Image Alternate Text- Provide an alternate text for the image in case you’re image doesn’t appear in the browser.
Image Alternate Caption- You can write a caption underneath the image to let your visitors know the details of your image.
Width- Control the image width in pixel or percentage by scrolling the provided width bar.
Icon - Icon field will allow you to set icons in tabs along with their editing options including size and color settings.
Additional- Additional field will help you to set other basic settings like- Tab alignment (horizontal or vertical) and size of title HTML tag.

Styles Tab

Styles tab will help you style up the element. Here you’ll find five editing fields : Testimonial, Image, Name, Position and Content. The editing options are provided according to each field.

Spacing - There are a few slidebars available for spacing. You can add space between tabs and content.
Color - A few color picker is provided for different operations. You’ll find color setting options for text field, background of input box, setting a border color, button option etc.
Title Alignment - Title alignment will help you to set the title and tabs in an alignment form. You can set them in three styles - left, center and right.
Padding- You can control the padding inside the section. Add spaces if you feel the need.
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. You can change the font of label and text field.
Size - You can control the size of text and digits of both label and input field. 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.
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 text to give a 3D look. Or you can blur the effect to show your text clearly.
Content Alignment - Title alignment will help you to set the contents an alignment form. You can set them in three styles - left, center and right.
Content Image Position - This field will help you to set the image in different positions. There are three positions available - left, right, and center.

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.

Media Carousel

parvez@themexpert.com (Parvez Akther) — Sat, 13 Oct 2018 21:29:36 +0600

Media Carousel is the next level visual design that allows you to create image and video slider. Now you can easily design your image sliders and video sliders applying animations. Follow these steps to add media carousel to your section.

Select Add New Element from column
An element list modal will appear
Select Media Carousel element A new popup will appear showing three tabs - General, Styles ,& Advanced. These tabs will help you to modify the element in your own way. You can add new fields, edit settings, apply animations etc. The details are given below.

General Tab

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

Fields Group - Fields group holds various image fields.A few sample fields are given in the 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 settings of each field inside the fields group. These settings are described below.
Title- Title field will help you to give the field a title for each image. This will help you to keep the track of every image in case you need to replace any image later.
Image- Image field will help you to insert image or videos.
Alternate Text- Provide an alternate text for the image in case you’re image doesn’t appear in the browser.
Caption- You can write a caption underneath the image to let your visitors know the details of your image.
Column- Set the number of images you want to display in a slide. You can set from 1 to 6 images in a single slide. This will save a lot of space. You can overlay any text you want over the slides.
Height- You can customize the slide height in pixel by selecting custom height. Moreover you can set any image mode you want as there are 5 different modes available in the image mode option.
Navigation- You can control the navigator of slider in various system. You can enable and disable arrow signs, dot navigators, and you can set different position of arrow.
Behaviour- You can control the behaviour of slider. You can set an auto timer including infinite loops.

Styles Tab

Styles tab will help you style up the element. Here you’ll find three editing fields : Image, Title and Navigation. The editing options are provided according to each field.

Color - A few color picker is provided for different operations. You’ll find color setting options for text field, background of input box, setting a border color, button option etc.
Border Type- Set a border type for images as there are a few option available including solid line, double line, dotted and dashed.
Border Radius - There is a border radius available in the image field. You can control the radius of image by it. If you want a round shaped image then set the value of border radius more than 50.
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. You can change the font of label and text field.
Size - You can control the size of text and digits of both label and input field. 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.
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 text to give a 3D look. Or you can blur the effect to show your text clearly.
Box Shadow- Add shadow effects under images to give it a floating look.

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 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.

Gallery Element

parvez@themexpert.com (Parvez Akther) — Sun, 23 Sep 2018 23:42:04 +0600

Gallery element is one of the most dynamic element ever created. It not only displays photographs and images but also attracts viewers. If you provide only image gallery and invite people to visit the location that would be enough to boost up your business.

Now a days, this element is a booster. If you add it to any of your site then it would not only increase the amount of your traffic but also boost up your business. To add this element to any column just simply follow these steps.

Select Add New Element from column to open elements list modal
Select Gallery element

A popup will appear showing three tabs - General, Styles, & Advanced. These tabs will help you to modify the gallery in your own way. The details are given below.

General Tab

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

Fields Group - Fields group holds various gallery fields.

A few field is given in the fields group so that you can know how to add other images to it and set it your way.

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 settings in each field inside the fields group. These settings are described below.

Title - Title field will help you to add set a title for individual image. It’s optional. You can use it or just avoid it.
Image - Set the image you want to display right in here.
Alternate Text - You can provide an alternate text in case your image disappears in any of the browsers. It will let the viewer know what type os image was in it.
Caption - An image without a caption is like a book without a title. It allows the views to know the backstory of an image.
Tag - Now this is a surprising feature. You can set some tag if you want to keep filtered image. Imagine you’ve provided 100’s of images. Now search a special on would be really tough. So why not provide a tag to it so that later you can find it out in case you want to add any images to it or replace it. And it will be easier for your views to check images with different tags.
Standard Grid - Standard grid will allow you set the images in the grid way. You can choose from the dropdown option as there are five options available - large, medium, small, stack and collapse. You can check them out and set the one you like.
Gallery Alignment - Gallery alignment will help you to set the alignment of the images. There are five options available - left, center, right, between and around. You can choose any of them.
Column - This field will allow you to set the number of image in a column that you want to show your visitors. Starting from 1 you can set up to 10 images in one single column.
Filter - Enabling this option will help your visitors to see the images according to the tag you’re providing. It will filter the images according to your tag.
Lightbox - Lightbox is when you click an image it will enlarge in size via popup effect to show the viewer a clear image. This option will help you to set the lightbox appearance in your way.
Images Control - You can adjust the images through this option. There are a couple of adjusting options are provided for you. Besides, you can set the image positions from here. Click the dropdown and you’ll find the positioning options ready to use.

Styles Tab

Styles tab will help you to style up the gallery in your own way. Here you’ll find only one editing field : Image. The editing options are provided according to its field.

Image Height - You can control the height of the image using scrolling or inserting a value in the input box situated right next to the scrolling bar.
Image Width - You can control image width using scrolling or inserting a value in the input box situated right next to the scrolling bar.
Normal & Hover - You might notice these two options peeping you. These are options that you’ll set for your viewer when they normally see it and when they hover over it. When you go for hovering a couple of settings will appear. Like - color and transition. Using color you can set a border color on it. And setting a transition amount will slow the hovering appearance.
Border Type - Border type will allow you to choose what type of border you want for button or images of the slider. 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.
Box Shadow - Box shadow option will allow you to set a 3D effect by applying a shadow effect under the button. It will attract the viewer more.

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 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.

Slider Element

parvez@themexpert.com (Parvez Akther) — Sun, 23 Sep 2018 19:26:31 +0600

Slider Pro element allows you to create a beautiful image slide which can be both manual or automatic. This feature makes a site dynamic. It will keep your viewer holding in your site as your viewer would be eager to see what comes next.

Most of the websites use this element to showcase they’re gallery image or pictures of room, lobby etc. If you want you can use it simply by following these steps.

Select Add New Element from column to open elements list modal
From there select Slider Pro element

A popup will appear showing three tabs - General, Styles, & Advanced. These tabs will help you to modify the slider in your own way. You can add new fields, custom slider height, provide text in need, set to automatic slider with timer etc. The details are given below.

General Tab

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

Fields Group - Fields group holds various slider fields.

One field is given in the fields group so that you can know how to add other images to it and set it your way.

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 settings of each field inside the fields group. These settings are described below.

Title - Title field will help you to add set a title for individual image. It’s optional. You can use it or just avoid it.
Description - You can provide a description of the image if you want. It will appear above that image.
Background Image - Background image field will set an image in the background for image slider. Right now you can add images only. Soon video addition will be available.
Button Text - A button option is available in every image field. You can add a text if you want to provide a button. If you remove the button text it will remove the button too. So, don’t worry if you don’t want any button over your image. Just delete the text and you’re done.
Link - The link field is open for the button option. If you want to insert any other page via button you can link it up through this field.
Thumbnail - Thumbnail image is the smaller image set that shows every image embedded in the slideshow. Thumbnail is optional. You can either provide the same image or different image or just no thumbnail image at all.
Alignment -This field will help you to set the contents over the image in different positions. There are three vertical positions available - top (set the contents on top position above the image), middle (set the contents on middle position above the image), and bottom (set the contents on bottom position above the image). Moreover, there is text alignment available providing three options - left, center and right.
Display - You can control if your viewer will see a few things or not. Like- title, content and button. You can give title to every slide you want for your record and control if your viewer will see it or not.
Overlay & Animation - Overlay option will allow you to set a color over the sliding image. This is optional. You can give a color controlling the opacity or just skip it. And animation will help you to set an animation for the sliding image. This of course beats the flat classic sliding version.
Height - The height option will allow you to set the height of the slider. You can keep the default height or just adjust to your wish. Just enable the ‘custom height’ option and then adjust the slider in pixel.
Navigation - Navigation option allows you to control all the setting related to navigation arrow and thumbnail including their position, width etc.
Image Mode - Image mode will allow you to set a fixed view of the image slider. There are a few options (contain, cover, fill, scale down, unset and none) available in the dropdown option. You can choose any of them.
Behaviour - This field holds a few enabling options. Like- pause on hover, autoplay etc. The autoplay speed counts in milisecond. So make sure you provide the time more than 1000. Or your viewer’s eyes would keep on spinning along with the image sliding. Enabling the infinite loop will allow the images to slide continuously. And disabling will stop the sliding in its last image.

Styles Tab

Styles tab will help you style up the slider in your own way. Here you’ll find five editing fields : Slide, Title, Description, Button and Navigation. The editing options are provided according to each field.

Padding - Padding of number will set a fix amount of space between content and image. You can provide a fixed amount padding or you can avoid it. And there are other padding options available for button and background setting.
Color - A few color picker is provided for different operations. You’ll find color setting options for text field, background, border color, button option, navigation etc.
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. You can change the font of label and text field.
Size - You can control the size of text and digits of both label and input field. 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.
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 text to give a 3D look. Or you can blur the effect to show your text clearly.
Margin - There are a couple of margin options available in case you need to insert some space in accordance with the page. Or you can leave it as it is.
Border Type - Border type will allow you to choose what type of border you want for button or images of the slider. 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.
Box Shadow - Box shadow option will allow you to set a 3D effect by applying a shadow effect under the button. It will attract the viewer more.
Custom Arrow - If you enable arrows you can customize them. You can add color to them and adjust the size.
Custom Dot - If you enable dots you can customize them. You can add color to them, control the width, provide space between each dot and control the margin of dot.

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 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.

Counter Element

parvez@themexpert.com (Parvez Akther) — Sat, 22 Sep 2018 21:59:54 +0600

The idea of Counter element came from counter. You might have seen one. It’s a small disc used in board games for keeping the score or as a place marker. Counters are basically number records. Now a days it is used in many sites to keep the track of viewers, subscribers etc.

Counter element can be one useful element to your site if your use it properly. To use this element, follow these steps.

Select Add New Element from column
An elements list modal will appear
From there select Counter element

Here you’ll find three tabs - General, Styles ,& Advanced

General Tab

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

Start - The start field will let you to set the starting number. You can set from 0 or any other number.
End - The end field will let you to set the ending number. You can set to any number you want.
Number Prefix - Number prefix will help you to set any digit before counter digits. If you want you can any fixed number by it.
Number Suffix - Number suffix will help you to set any digit after counter digits. It’s optional.
Title - You can set a title underneath the counter digits. It will let your viewer know the reason of the provided counter digits.
Duration - Duration field will count the digits in milisecond. Provide a large number (like - 3000 or 5000) in this field so that your counter digits can be counted till that time.

Styles Tab

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

Color - A few color picker is provided for different operations. You’ll find color setting options for digit, title and background.
Font - Font option will help you to change the font of digit and text. There are thousands of google font provided in a dropdown option. You can go for any of them. You can change the font of label and text field.
Size - You can control the size of text and digits of both label and input field. 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.
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.
Padding - Padding of number will set a fix amount of space between prefix, counter digit and suffix. You can provide a fixed amount padding or you can avoid it. And padding of title will set a fixed amount of space between counter digit and title.

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 Carousel

parvez@themexpert.com (Parvez Akther) — Sun, 09 Sep 2018 21:02:21 +0600

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

Select Add New Element from column to open elements list modal
From there select Testimonial Carousel element

A popup will appear showing three tabs - General, Styles ,& Advanced. These tabs will help you to modify the Testimonials in your way. You can add new fields, change the color and font, change button settings etc. The details are given below.

General Tab

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

Fields Group - Fields group holds various testimonial fields.

A few fields are given in the 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 settings of each field inside the fields group. These settings are described below.

Name - Title field will help you to add a new title in form. Without a title a user will not understand what to write in it.
Testimonial - A type field will help you to set what type of answer you need to know of your user. Is it a text type, email type or html code type etc. The input field will response according to its provided type.
Position - Placeholder field is a faded text provided in the input field for users knowledge. This field will help a user to know what type of information to be provided in that specific field.
Image - Enabling required option will allow the user to provide a must information. Without filling the required option a user cannot submit the form.
Alternate Text - You can set the width of the column using this field. If you need a short input you can provide a short width input field. In case of long input, you can provide a broad input field.
Caption - Help text field will help your user to know more about the input field. You can set a note or warning for your user.
Layout - In the layout field there is ‘center active item’ situated. If you enable this field, you will see other two testimonials peeping out both in left and right side.

Styles Tab

Styles tab will help you style up the element. Here you’ll find five editing fields : Testimonial, Image, Name, Position and Content. The editing options are provided according to each field.

Content Alignment - Content alignment will help you to set the content in an alignment form. You can set the whole content in three styles - left, center and right.
Image Width - You can control image width using scrolling or inserting a value in the input box situated right next to the scrolling bar. You can enlarge the image or make it small.
Position - This field will help you to set the image in different positions. There are four positions available - left (set the image in the left side of other contents), right (set the image in the right side of other contents), up (set the image above the contents) and down (set the image under the contents).
Spacing - There are a few slidebars available for spacing. You can add space between image and other fields, name and other fields, position and other fields.
Border Radius - There is a border radius available in the image field. You can control the radius of image by it. If you want a round shaped image 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 text field, background of input box, setting a border color, button option etc.
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. You can change the font of label and text field.
Size - You can control the size of text and digits of both label and input field. 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.
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 text to give a 3D look. Or you can 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.

Call to Action

parvez@themexpert.com (Parvez Akther) — Fri, 07 Sep 2018 13:00:17 +0600

‘Call to action’ is an instruction to your visitor to perform an immediate task. It combines title, text, image and button element which you can style along with a box background colors and much more. The element uses animation and CSS to create user interaction that appear when the user hovers over call to action section. To add this element in a section follow these steps.

Select Add New Element from column to open elements list modal
From there select Call to action element

A popup will appear showing three tabs - General, Styles ,& Advanced. These tabs will help you to modify the call to action element in your own way. The details are given below.

General Tab

The general tab holds the basic setting of call to action element. You’ll find the following editing options here.

Element Mode - With element mode option you can choose how you want to set call to action element. You can go for a classic look where image will appear first and then the following fields will appear one by one- title, subtitle, description and button. And if you go for cover mode then the text field and button will overlay above the image. Call to action in classic mode. Call to action in cover mode.
Image - Image field will allow you to set a proper image in your call to action element. You can choose your image from media manager and set it just the way you want. You can add an alternate text to it and a caption under the image.
Image Position - Image position will help you to set the image in different positions. You can set it in left, middle or right of the text field.
Title - Title field will help you to add a new title in the section. A title represents a short note of the details described below. It attracts a user view first. If a user finds the title interesting, then he goes for the rest of the details.
Title 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.
Subtitle - Subtitle is similar to title field. You can set a subtitle under a title. You can set the subtitle size with HTML tag or you can change the title size from style tab.
Description - Description field is available if you want to insert some broad text or code or quote, whatever you like. You can write the text and edit with basic editing settings.
Content Image- Content image field is available for you if you want to insert another image inside the content field. You can choose the image from media manager. You can add an alternate text which is optional and caption under the image which is optional too.
Button - The button field is available for you where you can change button text, set button type and provide a link to it. Moreover you can set if you want to open the designated link in the same window or in a new one.

Styles Tab

Styles tab will help you style up the call to action element. Here you’ll find seven editing fields : Content, Content Image, Title, Subtitle, Description, Button and Background. The editing options are provided according to each field.

Height - The height option is provided for image. You can set a default height or just set to your accordance by scrolling the slider.
Vertical Position - Vertical position option allows you to set the text fields in accordance with image. You can set your text title, subtitle and description in 3 positions of image - top, middle or bottom.
Alignment - Alignment option will allow you to set all the fields of call to action in an align. You can set alignment in 3 positions - left, centre and right.
Hover Animation - Hover animation feature is one of the most dynamic feature to go along with call to action element. You can add animation to it with the control of time delay.
Content Image - Content image field will help you to add imagine inside the content along with a few controls. Including image width control, spacing between content image and text fields and border radius if you want a slight round border.
Color - A few color picker is provided for different operations. You’ll find color setting options for text field, hovering text, background, setting a border color, button color, background overlay color etc.
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. You can change the font of Title, subtitle, description and button text.
Size - You can control the size of each text field. 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.
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 text to give a 3D look. Or you can blur the effect to show your text clearly.
Border Width - Border width will help you to set the width of the border. You can set a fine line to it or just bold it out, whatever you want.
Padding - In the content option and button option you’ll find a padding control option. This padding will control the inside space of the content field and button, in case you want to insert a few space.
Button- This field will allow you to style up the button in your way. You can add an image to it or a solid color or just leave it with a plain text. You can provide a hover effect to it which gives a splendid look. You can set a border of the button along with a radius. You can even give your button a floating look by adding a box shadow effect to 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.

Form Builder

parvez@themexpert.com (Parvez Akther) — Mon, 03 Sep 2018 23:41:30 +0600

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

General Tab

The general tab holds the basic setting of a form. You’ll find the following editing options 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 settings of each field of fields group given below.
Title - Title field will help you to add a new title in form. Without a title a user will not understand what to write in it.
Type - A type field will help you to set what type of answer you need to know of your user. Is it a text type, email type or html code type etc. The input field will response according to its provided type.
Placeholder - Placeholder field is a faded text provided in the input field for users knowledge. This field will help a user to know what type of information to be provided in that specific field.
Required - Enabling required option will allow the user to provide a must information. Without filling the required option a user cannot submit the form.
Column Width - You can set the width of the column using this field. If you need a short input you can provide a short width input field. In case of long input, you can provide a broad input field.
Help Text - Help text field will help your user to know more about the input field. You can set a note or warning for your user.
Form Name - In the basic setting, you’ll find a form name field. If you have multiple forms then this field will be helpful for you. You can provide name to each form. This field is required in case you need to collect data from different forms.
Actons After Submit - This field is given so that you can choose data destination after submission. You can receive user data via email or any other extension. After extension installation, you’ll find it available in this field.
Email Options - Here you’ll find all the setting options related to email. Set the receiver email, provide an email subject to know what type of data the email contains, provide an email content, control the reply option, provide cc (carbon copy) or bcc (blind carbon copy) in need etc.
Button Option - In the form you’ll find a given button. To edit this button you’ll find all the editing options here. You can edit the text of the button, set the size, set full width, set alignment, or even set an image.
Additional Message Option - This field will help you to add addition message for your user like a note or a warning. You can add a message after the mail was successfully sent or if the mail was failed to sent.

Styles Tab

Styles tab will help you style up the form. Here you’ll find four editing fields : Form, Label, Field and Button. The editing options are provided according to each field.

Column Gap - Column gap will help you to increase or decrease the gap of form between the columns in horizontal.
Row Gap- Row gap will help you to increase or decrease the gap between the fields in vertical.
Color - A few color picker is provided for different operations. You’ll find color setting options for text field, background of input box, setting a border color, button option etc.
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. You can change the font of label and text field.
Size - You can control the size of text and digits of both label and input field. 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.
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 text to give a 3D look. Or you can blur the effect to show your text clearly.
Border Width - Border width will help you to set the width of the border. You can give a fine line to it or just bold it out, whatever you want.
Padding - In the field option and button option you’ll find a padding option. This padding will control the padding inside the input field and button, in case you want to insert a few space.
Button- This field will allow you to style up the button in your way. You can add an image to it or a solid color or just leave it with a plain text. You can provide a hover effect to it which gives a splendid look. You can set a border of the button along with a radius. You can even give your button a floating look by adding a box shadow effect to 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 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.

Countdown

parvez@themexpert.com (Parvez Akther) — Mon, 03 Sep 2018 23:37:25 +0600

Countdown is a sequence of backward counting to indicate the time remaining before an event is scheduled to occur. The countdown element of Quix allows you to add countdown to your site without a 3rd party Extension. You can add countdown in your section by following these steps.

Select Add New Element from column to open elements list modal
From there select Countdown element Here you’ll find three tabs - General, Styles ,& Advanced
General Tab

The general tab holds the basic settings of countdown element. You can do the following changes here:
Date & Time - You can set a date from calendar of the upcoming event. And to set the time click on ‘select time’ and set hour, minute and second.
View - From view option you can choose the way of countdown display. In can be in inline or in block.
Control Time - You can control the display of your date and time. If you want you can disable day, hour, minute or second. Just turn the red ‘Yes’ button into light grey showing ‘No’.
Options - This tab will help you to control the labels. You can show the label or you can disable them. Moreover, you can display the separator or disable it too.
Separator Sign - The separator sign is set to colon sign(:) by default. But you can change it if you want. Just insert your desired symbol into ‘separator sign’ field.
Custom Label - By enabling the custom label you will be able to edit the labels. You can change the text to whatever you want.

Styles Tab

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

Background - The background option in the style tab will help you to set a background in each time box. You can give a solid color or an image or keep it neutral.
Color - A few color picker is provided for different operations. You’ll find color setting options for background, digit, label and separator.
Box Padding - Box padding will help you to set a few space inside the box. You can add some space between the digits and separators for a great look.
Box Margin - There is a box margin available for you if you want to insert some space between the countdown element in accordance with the page.
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. You can change the font of label and text field.
Size - You can control the size of text and digits of both label and input field. 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.
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 text to give a 3D look. Or you can 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.