Tabs Element

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.