Taber - Tabs for Elementor

Taber is a WordPress plugin for Elementor to create responsive tabs with any content quickly and easily. You can display the tabs in any possible style like the top, bottom, left, right, or even custom positions and they still will be user-friendly to different devices. Add any required content for the tab description. Images, audio, video, and shortcodes are all available for use.

Flexible and intuitive settings allow you to manage the widget display accordingly to your needs and wishes. The Taber WordPress Plugin provides adding icons for each tab using Font Awesome library or use your own image. The height can be set according to the content or set a specific value for all tabs. Using a custom tabs position, you can implement a unique solution for the block displaying to attract the attention of your visitors. The widget is compatible with WooCommerce and Elementor templates.

We made sure that it was easy for you to get started with Taber. With the plugin, you get 5 unique stylized and go-to-use templates.  These are just some examples that can inspire you to create your style. It provides you a quick start in a few clicks.

The plugin has straightforward settings for the tab title, content or arrow. You can manage size, typography, colors, background, border, and other things for different elements. It is possible to apply various styles for different tab states like hover or active.

Taber for Elementor is exceptionally compatible with all modern browsers. It does not matter which browser users view your site: Chrome, Firefox, Opera, Safari, or Edge. Everything will look great on all devices and in all browsers.

Features of the Taber widget for Elementor

• Adding icons or images for each tab
• Responsive and friendly to any devices
• Multiple tabs for one page and anywhere on the site
• Adding image, audio, video, shortcode to the tab content
• Woocommerce compatibility
• Adjustable tabs content height
• Font Awesome Icon Support
• Font Awesome Icon Picker Integrated
• Various tabs display styles: Top left, Top center, Top right, Bottom left, Bottom center, Top left, left, right, Custom
• Customizable fonts, colors, borders, backgrounds, etc.
• Responsiveness settings
• Works well with all WordPress themes built on Elementor
• Totally Seo Friendly
• Included pot file for quick translation on any language
• Perfect for RTL direction
• Fast and smooth installing
• Tested and compatible up to WordPress 5+
• Lightweight and Fast
• All major browsers supported Chrome, Firefox, Safari, Opera, and Edge
• Easy to use and customize with modern User Interface
• Installation Guide and detailed Users Manual
• Six months Included Support for CodeCanyon buyers

The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the Online Documentation.

Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin pluginname.zip There are two ways to install it:

Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )

STEP 1

First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin

STEP 2

Go to Plugins > Add New

STEP 3

Click Upload Plugin Button

STEP 5

Choose archive with Plugin and press Install Now Button

STEP 6

After Installing go back to the Plugins page and click Activate below plugin title

Installation the plugin through FTP or build-in File manager

STEP 1

Use Login and Password to connect to your web-server via FTP or use your hosting file manager.

STEP 2

Upload archive with plugin to /wp-content/plugins

STEP 3

On next step Unzip the archive with the plugin

STEP 4

Installing WordPress Plugin is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.

After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and WordPress Plugins.

The Taber widget for Elementor provides adding icons for each tab using Font Awesome library or use your own image. The height can be set according to the content or set a specific value for all tabs. Using a custom tabs position, you can implement a unique solution for the block displaying to attract the attention of your visitors.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor to start using the Taber widget. You will find the widget at the end of the general section.

Drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

• Content
• Style
• Advanced

Content Tab

On the Content section of the Taber widget, you can add the tab content and manage the basic settings such as layout display, icons, animations, etc.

Initial tab number

Specify the tab number that will be displayed first when page loading.

Tab contact

• Title – enter the tab title for the current section.
• Icon type – the option allows selecting the icon or custom image for tabs.
• Alignment – select the tab alignment.
• Content – enter the tab content. It can be different elements like shortcode, video, audio, or simple text.
•  

General settings

• Layout – select the layout display of the tab: Top left, Top center, Top right, Bottom left, Bottom center, Top left, Left, Right, Custom. The Custom layout allows you to adjust the tab width, Offset X and Y, icon position, arrow display, and animation.
• Show content on load – the toggle to enable/disable the display of tab content on page loading.
• Toggle tabs – the option allows you to collapse/expand content when clicking on a tab.
• Show arrow – the toggle to enable/disable the arrow display.
• Show animation – the toggle to enable/disable the animation. You can adjust the Animation duration when the option is enabled.

Style tab

On the style tab, you can manage the general tab and tab content styles like colors, size, typography, borders, etc.

Tab items

• Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
• Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktop, tablets, or phones.

TABS BAR STYLES

• Background Type – the setting changes the background of the tabs bar. You can choose a color, gradient, or background image.
• Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the tabs bar and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
• Box Shadow – the setting creates a shadow from the tabs bar and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

ICON STYLES

• Icon position – select one of the available icon positions relative to the tab title: Left, Right, Top – Left, Top – Center, Top – Right, Bottom – Left, Bottom – Center, Bottom – Right.
• Icon size – specify the size of the icon/image if it is used in tabs.
• Icon padding – specify the padding for the icon if it is used in tabs.

SINGLE TAB STYLES

• Tab width – specify the width of the tab section in pixels or percent using the slider.
• Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
• Line break – the toggle to enable/disable the line break for the title of the tabs.

NORMAL/HOVER/ACTIVE

The title style settings for different states of tabs.

• Color– specify the font color and opacity for the text of the current block using the color picker.
• Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
• Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
• Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Tab content

• Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
• Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
• Height at maximum content – the option allows automatically set the height according to the largest block or set the custom minimal height of the content.
• Color– specify the font color and opacity for the text of the current block using the color picker.
• Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
• Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
• Border radius – the option allows you to adjust the border radius for the tab content.
• Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Arrow

• Arrow size – specify the arrow size using the slider.
• Arrow spacing – specify the space between the tab title and the arrow using the slider.
• Arrow Color – select the arrow color using the color picker.

Hosting

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.