Use Taber for Elementor to add Tabs on a page

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.

Widget icon

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

Add a new item
  • 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.

Was this article helpful to you?