{"id":834,"date":"2025-03-25T05:20:00","date_gmt":"2025-03-25T05:20:00","guid":{"rendered":"https:\/\/animation-addons.com\/docs\/general-widgets\/services-tabs\/"},"modified":"2025-06-22T06:50:06","modified_gmt":"2025-06-22T06:50:06","slug":"services-tabs","status":"publish","type":"docs","link":"https:\/\/animation-addons.com\/docs\/general-widgets\/services-tabs\/","title":{"rendered":"Services Tabs Widget Documentation"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Before setting up the <strong>Service Tabs widget<\/strong>, ensure that the Animation Addons for Elementor plugin is <strong>installed <\/strong>and <strong>activated <\/strong>on your site. Once activated, you\u2019ll have access to all<strong> free Elementor widgets<\/strong>, including the <strong>Service Tabs widget<\/strong>\u2014at no cost! Additionally, you can explore both <strong>free <\/strong>and <strong>pro <\/strong>widgets by<strong> filtering the selection options.<\/strong><br><\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1088\" height=\"615\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard.webp\" alt=\"Dashboard\" class=\"wp-image-15093\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard.webp 1088w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-300x170.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-1024x579.webp 1024w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-768x434.webp 768w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-20x11.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-32x18.webp 32w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-270x152.webp 270w\" sizes=\"(max-width: 1088px) 100vw, 1088px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Key Use Cases for the Services Tabs Widget in Elementor:<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Services Tabs<\/strong> widget displays services in a tabbed layout for easy navigation and a better user experience.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use the Services Tabs widget to showcase different services in an organized, tabbed format.&nbsp;<\/li>\n\n\n\n<li>Customize the design and content to enhance user experience and make it easier for visitors to explore your offerings.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Prerequisite<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Elementor<\/li>\n\n\n\n<li>Animation Addons for Elementor<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Activate the Service Tabs Widget<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>Animation Addons \u2192 Elements<\/strong> in your WordPress dashboard.<\/li>\n\n\n\n<li>Find the <strong>Service Tabs Widget<\/strong> from the list.<\/li>\n\n\n\n<li>Toggle the switch to enable it.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it! The <strong>Service Tabs Widget<\/strong> is now ready to use on your website.<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img decoding=\"async\" width=\"1223\" height=\"592\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-1.webp\" alt=\"Services Tabs 1\" class=\"wp-image-15376\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-1.webp 1223w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-1-300x145.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-1-1024x496.webp 1024w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-1-768x372.webp 768w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-1-20x10.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-1-32x15.webp 32w\" sizes=\"(max-width: 1223px) 100vw, 1223px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Add the One Page Nav Widget in Elementor<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the page where you want to add the Progress Bar.<\/li>\n\n\n\n<li>Launch <strong>Elementor<\/strong> editor.<\/li>\n\n\n\n<li>In the Elementor panel, search for <strong>&#8220;Services Tabs&#8221;.<\/strong><\/li>\n\n\n\n<li>Drag the <strong>Services Tabs<\/strong> widget to your desired section.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Your <strong>Service Tabs Widget<\/strong> is now ready to use! Here\u2019s the interface where you can configure the settings and customize each tab to showcase your services in a clean, organized, and interactive layout.<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img decoding=\"async\" width=\"1365\" height=\"557\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-2.webp\" alt=\"Services Tabs 2\" class=\"wp-image-15377\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-2.webp 1365w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-2-300x122.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-2-1024x418.webp 1024w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-2-768x313.webp 768w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-2-20x8.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-2-32x13.webp 32w\" sizes=\"(max-width: 1365px) 100vw, 1365px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Configuring Services Tabs Widget: A Step-by-Step Guide<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once the Services Tabs widget is added to your page, you can configure its settings under different tabs: <strong>Content, Style, and Advanced.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"538\" height=\"487\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-3.webp\" alt=\"Services Tabs 3\" class=\"wp-image-15378\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-3.webp 538w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-3-300x272.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-3-20x18.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-3-32x29.webp 32w\" sizes=\"(max-width: 538px) 100vw, 538px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Content Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You will find two options:<strong> Tabs, Button, <\/strong>and <strong>Settings.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"313\" height=\"280\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-4.webp\" alt=\"Services Tabs 4\" class=\"wp-image-15379\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-4.webp 313w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-4-300x268.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-4-20x18.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-4-32x29.webp 32w\" sizes=\"(max-width: 313px) 100vw, 313px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Tab<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Under the <strong>Content<\/strong> section of the Service <strong>Tabs Widget<\/strong>, you&#8217;ll find several key configuration options to customize each tab effectively:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Style<\/strong>: Choose between two available layout styles \u2013 <strong>Style One<\/strong> and <strong>Style Two<\/strong> \u2013 based on your design preference.<\/li>\n\n\n\n<li><strong>Tabs Items<\/strong>:<br>\n<ul class=\"wp-block-list\">\n<li><strong>Tab Number<\/strong>: Define the number of tabs you want to display.<\/li>\n\n\n\n<li><strong>Tab Title<\/strong>: Add a title for each tab to clearly represent the content.<\/li>\n\n\n\n<li><strong>Add Media<\/strong>: Insert rich content using either the <strong>Visual<\/strong> editor or <strong>Code<\/strong> view for advanced customization.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Paragraph<\/strong>: Add descriptive text to provide context or details.<\/li>\n\n\n\n<li><strong>Choose Image<\/strong>: Upload or select an image that complements your tab content.<\/li>\n\n\n\n<li><strong>Link Option<\/strong>: Add a clickable link to direct users to more information or a specific page.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"518\" height=\"557\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-5.webp\" alt=\"Services Tabs 5\" class=\"wp-image-15380\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-5.webp 518w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-5-279x300.webp 279w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-5-30x32.webp 30w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-5-16x16.webp 16w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-5-18x18.webp 18w\" sizes=\"(max-width: 518px) 100vw, 518px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Once all your tabs are set up, make sure to <strong>adjust the image resolution<\/strong> to match your overall design theme for a polished and cohesive look.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Button<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In the <strong>Button<\/strong> section of the Service Tabs Widget, you can fully personalize the appearance and behavior of your button to match your website&#8217;s style:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Style Selection<\/strong>: Choose from <strong>7 unique button styles<\/strong> to suit your design preference.<\/li>\n\n\n\n<li><strong>Hover Effects<\/strong>: Select from <strong>7 different hover styles<\/strong> to enhance interactivity.<\/li>\n\n\n\n<li><strong>Text<\/strong>: Add your desired <strong>button label\/text<\/strong>.<\/li>\n\n\n\n<li><strong>Icon<\/strong>: You can either <strong>upload a custom icon<\/strong> or <strong>choose one from the icon library<\/strong>.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"514\" height=\"529\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-6.webp\" alt=\"Services Tabs 6\" class=\"wp-image-15381\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-6.webp 514w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-6-291x300.webp 291w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-6-20x20.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-6-32x32.webp 32w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-6-16x16.webp 16w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-6-40x40.webp 40w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-6-50x50.webp 50w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-6-18x18.webp 18w\" sizes=\"(max-width: 514px) 100vw, 514px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Icon Position<\/strong>: Decide whether the icon appears <strong>before<\/strong> or <strong>after<\/strong> the text.<\/li>\n\n\n\n<li><strong>Direction<\/strong>: Arrange the button layout in a <strong>horizontal (row)<\/strong> or <strong>vertical (column)<\/strong> orientation.<\/li>\n\n\n\n<li><strong>Icon Spacing<\/strong>: Adjust the <strong>space between the icon and text<\/strong> for better visual balance.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1088\" height=\"615\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard.webp\" alt=\"Dashboard\" class=\"wp-image-15093\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard.webp 1088w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-300x170.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-1024x579.webp 1024w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-768x434.webp 768w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-20x11.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-32x18.webp 32w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-270x152.webp 270w\" sizes=\"(max-width: 1088px) 100vw, 1088px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">These settings allow you to create a visually appealing and highly functional button that complements your service tabs seamlessly.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Settings<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In the final part of the <strong>Content<\/strong> section, you\u2019ll find the <strong>Settings<\/strong> panel, which allows you to manage how your Service Tabs display across different screen sizes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You\u2019ll have two <strong>Breakpoint<\/strong> categories available:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mobile Portrait<\/strong>: Targets screens <strong>below 767px<\/strong>, ensuring your content looks great on smaller mobile devices.<\/li>\n\n\n\n<li><strong>Tablet Portrait<\/strong>: Targets screens <strong>up to 1024px<\/strong>, providing optimal layout for tablet users.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These settings help maintain a responsive and user-friendly experience across all devices by automatically adjusting the tab layout based on screen size.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Style Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now, it\u2019s time to enhance your <strong>Tabs, Image, Tab Title, and content <\/strong>by styling them to match your design preferences and improve the overall user experience.<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"539\" height=\"451\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-9.webp\" alt=\"Services Tabs 9\" class=\"wp-image-15384\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-9.webp 539w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-9-300x251.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-9-20x17.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-9-32x27.webp 32w\" sizes=\"(max-width: 539px) 100vw, 539px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Tabs<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">You can adjust the tab width according to these settings to ensure optimal display across different devices.<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"545\" height=\"479\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-10.webp\" alt=\"Services Tabs 10\" class=\"wp-image-15385\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-10.webp 545w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-10-300x264.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-10-20x18.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-10-32x28.webp 32w\" sizes=\"(max-width: 545px) 100vw, 545px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Image<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In the image section, you&#8217;ll find customization options such as margin, border type, and box shadow, allowing you to adjust the tab width as needed for a refined design.<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"536\" height=\"524\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-11.webp\" alt=\"Services Tabs 11\" class=\"wp-image-15386\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-11.webp 536w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-11-300x293.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-11-20x20.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-11-32x32.webp 32w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-11-16x16.webp 16w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-11-40x40.webp 40w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-11-50x50.webp 50w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-11-60x60.webp 60w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-11-18x18.webp 18w\" sizes=\"(max-width: 536px) 100vw, 536px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Tab Title<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tab Number<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Function:<\/strong> This field likely auto-generates or displays the number of the tab in order (e.g., Tab 1, Tab 2).<\/li>\n\n\n\n<li><strong>Customization:<\/strong> There might not be much to change here unless it&#8217;s manually editable depending on the widget you&#8217;re using.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Color<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Changes the color of the tab number or title text.<\/li>\n\n\n\n<li><strong>Options:<\/strong> Clicking the color box opens the color picker, allowing you to choose a solid color, gradient, or even set it to transparent.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Typography<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Lets you customize the font styling for the tab number or title.<\/li>\n\n\n\n<li><strong>Options:<\/strong> Includes font family, size, weight (boldness), transform (uppercase\/lowercase), style (italic\/normal), decoration (underline, etc.), line-height, and letter-spacing.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Space (Slider)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Function:<\/strong> Adjusts the spacing (likely the gap between the tab number\/title and the tab content or between tabs themselves).<\/li>\n\n\n\n<li><strong>Customization:<\/strong> Use the slider or manually input a number in the box to the right.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Title<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Function:<\/strong> Input field where you enter the actual name\/title of the tab (e.g., \u201cCleaning Services,\u201d \u201cPricing,\u201d etc.).<\/li>\n\n\n\n<li><strong>Tabs:<\/strong> There are two states:<br>\n<ul class=\"wp-block-list\">\n<li><strong>Normal:<\/strong> Controls how the title looks normally.<\/li>\n\n\n\n<li><strong>Hover\/Active:<\/strong> Controls how the title looks when hovered over or currently selected.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Color (under Title state)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Function:<\/strong> Customize the color of the tab title based on the state selected (Normal or Hover\/Active).<\/li>\n\n\n\n<li><strong>Interaction:<\/strong> Clicking opens the color picker for both text and background options.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Typography (under Title state)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Customize font details specifically for the title under Normal or Hover\/Active state.<\/li>\n\n\n\n<li><strong>Options:<\/strong> Font family, size, weight, style, spacing, etc.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Border Type<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Function:<\/strong> Let&#8217;s you apply borders around the tab title.<\/li>\n\n\n\n<li><strong>Options:<\/strong> Choices may include none, solid, dashed, dotted, double, or groove.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Padding<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Function:<\/strong> Adds spacing <strong>inside<\/strong> the tab title area (between the content and the border).<\/li>\n\n\n\n<li><strong>Values:<\/strong> Editable fields for <strong>Top, Right, Bottom, and Left<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Margin<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Function:<\/strong> Adds spacing <strong>outside<\/strong> the tab title area (between this tab and surrounding elements).<\/li>\n\n\n\n<li><strong>Values:<\/strong> Editable fields for <strong>Top, Right, Bottom, and Left<\/strong>.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"527\" height=\"632\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-12.webp\" alt=\"Services Tabs 12\" class=\"wp-image-15387\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-12.webp 527w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-12-250x300.webp 250w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-12-17x20.webp 17w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-12-27x32.webp 27w\" sizes=\"(max-width: 527px) 100vw, 527px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Content<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Color<\/strong>: Adjust the <strong>text color<\/strong>, <strong>background color<\/strong>, and <strong>active tab color<\/strong> to match your brand&#8217;s palette and improve readability.<\/li>\n\n\n\n<li><strong>Padding<\/strong>: Control the <strong>space inside each tab element<\/strong>, ensuring your content has enough breathing room and a clean layout.<\/li>\n\n\n\n<li><strong>Typography<\/strong>: Customize <strong>font family<\/strong>, <strong>size<\/strong>, <strong>weight<\/strong>, <strong>line height<\/strong>, and <strong>letter spacing<\/strong> to maintain consistency with your site\u2019s overall text style.<\/li>\n\n\n\n<li><strong>Margin<\/strong>: Set the <strong>space outside the tab elements<\/strong>, allowing you to control the distance between tabs and other elements on the page.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"523\" height=\"589\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-13.webp\" alt=\"Services Tabs 13\" class=\"wp-image-15388\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-13.webp 523w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-13-266x300.webp 266w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-13-18x20.webp 18w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-13-28x32.webp 28w\" sizes=\"(max-width: 523px) 100vw, 523px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">These options provide complete flexibility to fine-tune the appearance of your tabs, ensuring they look polished and consistent with the rest of your design.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Button<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Button Margin<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it does:<\/strong> Adds space <strong>outside<\/strong> the button.<\/li>\n\n\n\n<li><strong>Input Fields:<\/strong> You can set values for <strong>Top, Right, Bottom, and Left<\/strong> independently.<\/li>\n\n\n\n<li><strong>Link Icon (\ud83d\udd17):<\/strong> Click to apply the same margin to all sides simultaneously.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Typography<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Adjusts the font style of the button text.<\/li>\n\n\n\n<li><strong>Options:<\/strong> Includes settings like font family, size, weight (boldness), style (italic\/normal), decoration (underline), line height, and letter spacing.<\/li>\n\n\n\n<li><strong>Open Settings:<\/strong> Click the pencil\/edit icon to reveal these options.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Icon Size<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it does:<\/strong> If your button includes an icon, this slider controls its size.<\/li>\n\n\n\n<li><strong>Adjust:<\/strong> Use the slider or type the value manually in <strong>px (pixels)<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>State Tabs: Normal | Hover<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Normal Tab:<\/strong> Style your button in its default state.<\/li>\n\n\n\n<li><strong>Hover Tab:<\/strong> Change how the button looks when the user hovers their mouse over it.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You can toggle between them to apply different settings for each state.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Text Color<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Changes the color of the text on the button.<\/li>\n\n\n\n<li><strong>Color Picker:<\/strong> Click to choose a color. You can use solid colors, gradients, or even transparent options.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Background Type<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Set the background color or gradient of the button.<\/li>\n\n\n\n<li><strong>Options:<\/strong><strong><br><\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Classic:<\/strong> Solid color or image background.<\/li>\n\n\n\n<li><strong>Gradient:<\/strong> Smooth color transitions.<br><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Click the color panel<\/strong> to reveal the picker or image upload tool.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Border Type<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Determines the type of border around the button.<\/li>\n\n\n\n<li><strong>Options:<\/strong> Default, solid, dotted, dashed, double, groove, ridge, etc.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Border Radius<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it does:<\/strong> Controls the roundness of the button corners.<\/li>\n\n\n\n<li><strong>Values:<\/strong> You can set custom radius values for <strong>Top, Right, Bottom, and Left<\/strong>.<\/li>\n\n\n\n<li><strong>Linked editing:<\/strong> Use the chain icon to keep all corners uniform.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Padding<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Adds space <strong>inside<\/strong> the button (between the border and the text\/icon).<\/li>\n\n\n\n<li><strong>Input Fields:<\/strong> Customize padding for <strong>Top, Right, Bottom, and Left<\/strong> sides separately.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Box Shadow<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Adds a shadow around the button for a lifted or 3D effect.<\/li>\n\n\n\n<li><strong>Settings (when expanded):<\/strong> Control shadow color, blur, spread, position (horizontal\/vertical), and more.<\/li>\n\n\n\n<li><strong>Click the edit icon<\/strong> (\u270f\ufe0f) to configure shadow properties.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"510\" height=\"632\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-14.webp\" alt=\"Services Tabs 14\" class=\"wp-image-15389\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-14.webp 510w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-14-242x300.webp 242w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-14-16x20.webp 16w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-14-26x32.webp 26w\" sizes=\"(max-width: 510px) 100vw, 510px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In the advanced settings, you\u2019ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column inner-cth-img-box is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full cth-img\"><img loading=\"lazy\" decoding=\"async\" width=\"304\" height=\"591\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-15.webp\" alt=\"Services Tabs 15\" class=\"wp-image-15390\" title=\"Dashboard\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-15.webp 304w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-15-154x300.webp 154w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-15-10x20.webp 10w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-15-16x32.webp 16w\" sizes=\"(max-width: 304px) 100vw, 304px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Final Outcome<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">That&#8217;s it! You\u2019ve successfully learned how to configure the <strong>Services Tabs Widget <\/strong>in Elementor to create customizable, interactive tabbed content on your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For any further assistance or inquiries, feel free to contact our support team!<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-text-align-center wp-element-button\" href=\"https:\/\/animation-addons.com\/widgets\/aae-services-tabs\/\" target=\"_blank\" rel=\"noreferrer noopener\">View Live Demo<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Before setting up the Service Tabs widget, ensure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you\u2019ll have access to all free Elementor widgets, including the Service Tabs widget\u2014at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options. Key Use [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":17071,"parent":43,"menu_order":19,"comment_status":"closed","ping_status":"closed","template":"","doc_tag":[],"doc_badge":[],"class_list":["post-834","docs","type-docs","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Services Tabs Widget Documentation - Animation Addons<\/title>\n<meta name=\"description\" content=\"Configure the Services Tabs Widget with Animation Addons. Easily create tabbed service layouts in Elementor with full design control.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/animation-addons.com\/docs\/general-widgets\/services-tabs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Services Tabs Widget Documentation - Animation Addons\" \/>\n<meta property=\"og:description\" content=\"Configure the Services Tabs Widget with Animation Addons. Easily create tabbed service layouts in Elementor with full design control.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/animation-addons.com\/docs\/general-widgets\/services-tabs\/\" \/>\n<meta property=\"og:site_name\" content=\"Animation Addons\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/animationaddons\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-22T06:50:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-Widget-Docs-Featured-Image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"48\" \/>\n\t<meta property=\"og:image:height\" content=\"49\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@animationaddons\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/services-tabs\\\/\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/services-tabs\\\/\",\"name\":\"Services Tabs Widget Documentation - Animation Addons\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/services-tabs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/services-tabs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Services-Tabs-Widget-Docs-Featured-Image.png\",\"datePublished\":\"2025-03-25T05:20:00+00:00\",\"dateModified\":\"2025-06-22T06:50:06+00:00\",\"description\":\"Configure the Services Tabs Widget with Animation Addons. Easily create tabbed service layouts in Elementor with full design control.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/services-tabs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/services-tabs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/services-tabs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Services-Tabs-Widget-Docs-Featured-Image.png\",\"contentUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Services-Tabs-Widget-Docs-Featured-Image.png\",\"width\":48,\"height\":49,\"caption\":\"Services Tabs Widget Docs Featured Image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/services-tabs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"General Widgets\",\"item\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Services Tabs Widget Documentation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#website\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\",\"name\":\"Animation Addons\",\"description\":\"Best Animation Plugin for WordPress\",\"publisher\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#organization\"},\"alternateName\":\"Animation Addons for Elementor\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#organization\",\"name\":\"Animation Addons\",\"alternateName\":\"Animation Addons for Elementor\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/logo.svg\",\"width\":48,\"height\":48,\"caption\":\"Animation Addons\"},\"image\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/animationaddons\",\"https:\\\/\\\/x.com\\\/animationaddons\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/animation-addons\\\/\",\"https:\\\/\\\/www.pinterest.com\\\/animationaddons\\\/\",\"https:\\\/\\\/www.instagram.com\\\/aimationaddons\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@animationaddons\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Services Tabs Widget Documentation - Animation Addons","description":"Configure the Services Tabs Widget with Animation Addons. Easily create tabbed service layouts in Elementor with full design control.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/animation-addons.com\/docs\/general-widgets\/services-tabs\/","og_locale":"en_US","og_type":"article","og_title":"Services Tabs Widget Documentation - Animation Addons","og_description":"Configure the Services Tabs Widget with Animation Addons. Easily create tabbed service layouts in Elementor with full design control.","og_url":"https:\/\/animation-addons.com\/docs\/general-widgets\/services-tabs\/","og_site_name":"Animation Addons","article_publisher":"https:\/\/www.facebook.com\/animationaddons","article_modified_time":"2025-06-22T06:50:06+00:00","og_image":[{"width":48,"height":49,"url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-Widget-Docs-Featured-Image.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@animationaddons","twitter_misc":{"Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/animation-addons.com\/docs\/general-widgets\/services-tabs\/","url":"https:\/\/animation-addons.com\/docs\/general-widgets\/services-tabs\/","name":"Services Tabs Widget Documentation - Animation Addons","isPartOf":{"@id":"https:\/\/animation-addons.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/animation-addons.com\/docs\/general-widgets\/services-tabs\/#primaryimage"},"image":{"@id":"https:\/\/animation-addons.com\/docs\/general-widgets\/services-tabs\/#primaryimage"},"thumbnailUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-Widget-Docs-Featured-Image.png","datePublished":"2025-03-25T05:20:00+00:00","dateModified":"2025-06-22T06:50:06+00:00","description":"Configure the Services Tabs Widget with Animation Addons. Easily create tabbed service layouts in Elementor with full design control.","breadcrumb":{"@id":"https:\/\/animation-addons.com\/docs\/general-widgets\/services-tabs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/animation-addons.com\/docs\/general-widgets\/services-tabs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/animation-addons.com\/docs\/general-widgets\/services-tabs\/#primaryimage","url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-Widget-Docs-Featured-Image.png","contentUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Services-Tabs-Widget-Docs-Featured-Image.png","width":48,"height":49,"caption":"Services Tabs Widget Docs Featured Image"},{"@type":"BreadcrumbList","@id":"https:\/\/animation-addons.com\/docs\/general-widgets\/services-tabs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/animation-addons.com\/docs\/"},{"@type":"ListItem","position":2,"name":"General Widgets","item":"https:\/\/animation-addons.com\/docs\/general-widgets\/"},{"@type":"ListItem","position":3,"name":"Services Tabs Widget Documentation"}]},{"@type":"WebSite","@id":"https:\/\/animation-addons.com\/docs\/#website","url":"https:\/\/animation-addons.com\/docs\/","name":"Animation Addons","description":"Best Animation Plugin for WordPress","publisher":{"@id":"https:\/\/animation-addons.com\/docs\/#organization"},"alternateName":"Animation Addons for Elementor","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/animation-addons.com\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/animation-addons.com\/docs\/#organization","name":"Animation Addons","alternateName":"Animation Addons for Elementor","url":"https:\/\/animation-addons.com\/docs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/animation-addons.com\/docs\/#\/schema\/logo\/image\/","url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/logo.svg","contentUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/logo.svg","width":48,"height":48,"caption":"Animation Addons"},"image":{"@id":"https:\/\/animation-addons.com\/docs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/animationaddons","https:\/\/x.com\/animationaddons","https:\/\/www.linkedin.com\/company\/animation-addons\/","https:\/\/www.pinterest.com\/animationaddons\/","https:\/\/www.instagram.com\/aimationaddons\/","https:\/\/www.tiktok.com\/@animationaddons"]}]}},"author_avatar":"https:\/\/secure.gravatar.com\/avatar\/d0824328e817de9f5f8d005a4b8d1fcea87dd03cee2b85f00c4d3cb2da172cfe?s=96&d=mm&r=g","author_name":"docs_admin","_links":{"self":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/comments?post=834"}],"version-history":[{"count":9,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/834\/revisions"}],"predecessor-version":[{"id":17472,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/834\/revisions\/17472"}],"up":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/43"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/media\/17071"}],"wp:attachment":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/media?parent=834"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/doc_tag?post=834"},{"taxonomy":"doc_badge","embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/doc_badge?post=834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}