{"id":27913,"date":"2023-07-14T01:50:20","date_gmt":"2023-07-14T06:50:20","guid":{"rendered":"https:\/\/wpstackable.com\/?p=27913"},"modified":"2023-07-14T05:24:02","modified_gmt":"2023-07-14T10:24:02","slug":"introducing-new-tabs-block","status":"publish","type":"post","link":"https:\/\/wpstackable.com\/blog\/introducing-new-tabs-block\/","title":{"rendered":"Introducing: New Tabs Block"},"content":{"rendered":"\n<p data-block-type=\"core\">In our latest release, we\u2019re delighted to announce that the Tabs block has now finally been added to our wide selection of Stackable blocks! Make sure you update to v3.10.0.<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_1.mov\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">One of the biggest challenges in web design is managing a wealth of information within the constraints of a screen. This is where Stackable\u2019s Tabs block shine. You can effectively divide content into different tabs to manage your screen space. The Tabs block comes in handy if you don&#8217;t want users to scroll through long pages of content!<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_2.mov\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">The Stackable Tabs block is robust and can go beyond the typical looks and usage of tabs. For example, with a little tweaking of the designs, you can leverage the Tabs block to build a pricing table switcher that can let your visitors toggle between &#8220;monthly&#8221; and &#8220;annual&#8221; payment plans.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_3.mov\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">Beyond functionality, tabs can contribute significantly to the aesthetics of a website when blended within your page. Customizable tab designs allow for consistency with the overall look and feel of a site, which is crucial for brand identity. Stackable\u2019s Tabs block includes various design controls and settings to adjust the color, size, typography, and even add icons, ensuring they perfectly match your site&#8217;s design theme.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_4.mov\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" data-block-type=\"core\">Dive into Stackable&#8217;s New Tabs Block<\/h2>\n\n\n\n<p data-block-type=\"core\">Like some of Stackable&#8217;s blocks, the Tabs block is actually comprised of multiple smaller blocks. When you add a Tabs block, the hierarchy looks like this in the List View:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/Screen-Shot-2023-07-14-at-7.54.16-AM.png\" alt=\"\" class=\"wp-image-27967\" width=\"350\" height=\"276\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/Screen-Shot-2023-07-14-at-7.54.16-AM.png 700w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/Screen-Shot-2023-07-14-at-7.54.16-AM-300x237.png 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">The <strong>Tabs block<\/strong> is the main block that contains everything. If you need to change something in the overall appearance of a Tabs block, then make sure this is the block that is selected.<\/p>\n\n\n\n<p data-block-type=\"core\">The <strong>Tab Labels block<\/strong> will contain your &#8220;tab&#8221; buttons. Select this if you want to change the appearance of the clickable tab &#8220;buttons&#8221;.<\/p>\n\n\n\n<p data-block-type=\"core\">The <strong>Tab Content block<\/strong> is the wrapper around the entire tab content area. Select this if you want to change the appearance of the entire panel that will contain the content of the tabs.<\/p>\n\n\n\n<p data-block-type=\"core\">The <strong>Inner Column blocks<\/strong> correspond to the tabs inside the main Tabs block. This is what will contain the blocks or content that you want to add to each tab. <\/p>\n\n\n\n<p data-block-type=\"core\">Here&#8217;s a video to see how each block pertains to different &#8220;sections&#8221; of Stackable&#8217;s Tabs block:<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/Screen-Recording-2023-07-14-at-8.25.47-AM.mov\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">This multi-block approach enables you to have finer control of how each part of the tabs look like.<\/p>\n\n\n\n<p data-block-type=\"core\">Within each tab, or Inner Column block, you can populate it with as much content as needed, allowing you to include blocks like Heading, Image, Card, Button, Feature, and so much more, all neatly organized under individual tabs.<\/p>\n\n\n\n<p data-block-type=\"core\">All you have to do is select a tab and click the plus (+) button to add a block. You can search for a block in the Search bar, or you can click on the <strong>Browse all<\/strong> button to open the Inserter.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_6-1024x715.png\" alt=\"\" class=\"wp-image-27917\" width=\"512\" height=\"358\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_6-1024x715.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_6-300x210.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_6-768x537.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_6.png 1440w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">The Stackable Tabs Block comes packed with an array of customizing features that bring your content to life. Here are the various settings and design controls we\u2019ve jam packed into the Tabs block:<\/p>\n\n\n\n<p data-block-type=\"core\"><strong>Tab Orientation<\/strong><\/p>\n\n\n\n<p data-block-type=\"core\">Stackable&#8217;s Tabs Block allows you to choose between horizontal and vertical orientations. This gives you the option to have a completely different flow of your webpage. This control can be found in the main Tabs block&#8217;s Inspector settings (Layout tab &gt; Layout panel).<\/p>\n\n\n\n<p data-block-type=\"core\">Horizontal tabs are the most common and work well for most websites, but vertical tabs can provide a unique visual appeal and are a good fit for certain design concepts.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_8-1.mov\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\"><strong>Tab Panel Offset<\/strong><\/p>\n\n\n\n<p data-block-type=\"core\">The Tab Panel Offset feature enables you to adjust the space between your tab labels and the tab content. By default, this is set to 16px.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_9.mov\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">Having control over this spacing allows you to somewhat detach the Tab Labels from their contents, to achieve those designs that do not look like your typical tabs.<\/p>\n\n\n\n<p data-block-type=\"core\">You will find this setting by selecting the main Tabs block, and navigating to the Layout panel of the Layout tab.<\/p>\n\n\n\n<p data-block-type=\"core\"><strong>Initial Tab Open<\/strong><\/p>\n\n\n\n<p data-block-type=\"core\">This feature gives you control over the user&#8217;s first interaction with your tabbed content. You can specify which tab should be opened first when the page loads, directing your visitors&#8217; attention to the content you deem most important or relevant.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_7-3.mov\"><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">This can be particularly useful for highlighting featured products, special offers, or key information about your services.<\/p>\n\n\n\n<p data-block-type=\"core\"><strong>Tab Styling<\/strong><\/p>\n\n\n\n<p data-block-type=\"core\">Click on the <strong>Tab Labels block<\/strong>, and you&#8217;ll see four different preset styles that you can choose from: Default, Classic, Button, and Centered Pills. You can further refine the design to your liking after picking one.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_11.png\" alt=\"\" class=\"wp-image-27929\" width=\"276\" height=\"247\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_11.png 552w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_11-300x268.png 300w\" sizes=\"auto, (max-width: 276px) 100vw, 276px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">You can change the button and text colors, adjust button padding, and add customizable borders.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_12.png\" alt=\"\" class=\"wp-image-27930\" width=\"278\" height=\"500\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_12.png 556w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_12-167x300.png 167w\" sizes=\"auto, (max-width: 278px) 100vw, 278px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">Each of these styling options ensures that your tabs are not only functional but also visually appealing. These options help your tabs to stand out, guide your user&#8217;s navigation, and maintain a seamless look and feel throughout your website.<\/p>\n\n\n\n<p data-block-type=\"core\"><strong>Tab Active State Styling<\/strong><\/p>\n\n\n\n<p data-block-type=\"core\">The &#8216;active state&#8217; is the state of a tab when it is currently selected or being interacted with. With Stackable&#8217;s Tabs Block, you can customize the look of this active state, allowing you to provide visual feedback to your users about their current location within your content.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_13.png\" alt=\"\" class=\"wp-image-27931\" width=\"280\" height=\"482\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_13.png 560w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/tabs_13-174x300.png 174w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">You can opt to change the button and text color, and add customizable borders to the active tab, differentiating it from the other tabs. This helps make navigation more intuitive and less confusing for your website visitors.<\/p>\n\n\n\n<p data-block-type=\"core\"><strong>Icon Option:<\/strong><\/p>\n\n\n\n<p data-block-type=\"core\">Stackable&#8217;s Tabs Block allows you to add icons to your tabs. This feature takes your tab design a step further by incorporating visual cues to guide your user&#8217;s interaction.<\/p>\n\n\n\n<p data-block-type=\"core\">You can assign different icons for each tab to represent each tab. Just click on the icons on each Tab to open the icon selector.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/Screen-Recording-2023-07-14-at-9.02.24-AM.mov\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">Icons are particularly helpful when screen real estate is limited, such as on mobile devices, as they convey information efficiently without taking up much space.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" data-block-type=\"core\">Conclusion<\/h2>\n\n\n\n<p data-block-type=\"core\">Stackable&#8217;s new Tabs Block, packed with advanced features and customization options, takes the tabbed interface to the next level. Whether it&#8217;s styling the tabs and their active states, adding icons for better visual communication, or adjusting the layout with options for initial tab open, tab orientation, tab panel offset, and tab panel effect &#8211; Stackable&#8217;s Tabs Block offers you an unprecedented level of control and flexibility.<\/p>\n\n\n\n<p data-block-type=\"core\">Update your Stackable to the latest version now and start exploring the potentials of Stackable&#8217;s Tabs Block today and redefine your web design experience!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In our latest release, we\u2019re delighted to announce that the Tabs block has now finally been added to our wide selection of Stackable blocks! Make sure you update to v3.10.0.<\/p>\n","protected":false},"author":18,"featured_media":27937,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[3],"tags":[],"class_list":{"0":"post-27913","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"hentry","7":"category-updates"},"featured_image_urls_v2":{"full":["https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/07\/TABS-BLOCK-socmed-poster.png",2400,1260,false]},"post_excerpt_stackable_v2":"<p>In our latest release, we\u2019re delighted to announce that the Tabs block has now finally been added to our wide selection of Stackable blocks! Make sure you update to v3.10.0. One of the biggest challenges in web design is managing a wealth of information within the constraints of a screen. This is where Stackable\u2019s Tabs block shine. You can effectively divide content into different tabs to manage your screen space. The Tabs block comes in handy if you don&#8217;t want users to scroll through long pages of content! The Stackable Tabs block is robust and can go beyond the typical&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/wpstackable.com\/blog\/category\/updates\/\" rel=\"category tag\">Updates<\/a>","author_info_v2":{"name":"Alexandra Yap","url":"https:\/\/wpstackable.com\/blog\/author\/alex\/"},"comments_num_v2":"11 comments","acf":[],"modified_by":"Benjamin Intal","_links":{"self":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/27913","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/comments?post=27913"}],"version-history":[{"count":14,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/27913\/revisions"}],"predecessor-version":[{"id":28158,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/27913\/revisions\/28158"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media\/27937"}],"wp:attachment":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media?parent=27913"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/categories?post=27913"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/tags?post=27913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}