{"id":1373,"date":"2024-03-21T16:32:10","date_gmt":"2024-03-21T16:32:10","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&p=1373"},"modified":"2024-04-10T08:06:11","modified_gmt":"2024-04-10T08:06:11","slug":"tabs","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/tabs\/","title":{"rendered":"Tabs"},"content":{"rendered":"\n

The Tabs Block is useful provided by the BlockArt Plugin. The block is useful if you want to display various content on a page in tab form so that users can access the information from the same page without navigating away from the main page.<\/p>\n\n\n\n

To add the tabs block on your page, select it from your block list. After that, click on the + (plus) icon to increase the number of tabs you want to add to your end.<\/p>\n\n\n\n

\"Add
Add Tabs Block<\/figcaption><\/figure>\n\n\n\n

After you have chosen the Tabs Block, you’ll get a block editing panel on the right-hand side. It has three options, i.e., General<\/strong>, Style,<\/strong> and Advanced.<\/strong> These options customize the design and other elements of the block. Let\u2019s explore one by one below:<\/p>\n\n\n\n

General<\/h2>\n\n\n\n

Layout<\/h3>\n\n\n\n
    \n
  • Initially Active Tab<\/strong> – Initially active tabs refer to the tabs that are selected or displayed by default when visitors first access your page. You can choose the tab number you want to display by default on your end.<\/li>\n<\/ul>\n\n\n\n
    \"Choose
    Choose the Initial Active Tab<\/figcaption><\/figure>\n\n\n\n

    Style<\/h2>\n\n\n\n

    Background<\/h3>\n\n\n\n
      \n
    • Type<\/strong> – It sets the background color of the Tabs Block. You can change the visual appearance of the background by changing its color or adding an image.<\/li>\n<\/ul>\n\n\n\n
      \"Change
      Change Background Color<\/figcaption><\/figure>\n\n\n\n

      Advanced<\/h2>\n\n\n\n

      The Advanced section consists of four customization options for the Tabs Block.<\/p>\n\n\n\n

      Spacing<\/h3>\n\n\n\n

      Under the spacing section, you can find the following options available:<\/p>\n\n\n\n

        \n
      • Block Margin<\/strong>\u00a0\u2013 According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %<\/strong>, and rem. Moreover, you can set different margin values for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
      • Block Padding \u2013\u00a0<\/strong>According to the site requirement, you can assign a specific padding value to the block along with units like\u00a0px, em, %, and rem. Moreover, you can set different padding values for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
        \"Manage
        Manage Margin and Padding Space<\/figcaption><\/figure>\n\n\n\n

        Z-Index<\/h3>\n\n\n\n

        It allows you to set the priority of the Tabs block according to the site requirement.<\/p>\n\n\n\n

        Responsive Condition<\/h3>\n\n\n\n

        Using the option, you can enable\/disable displaying the block on various screen sizes:<\/p>\n\n\n\n

          \n
        • Hide on Desktop<\/strong> \u2013 It hides the Tabs block on the Desktop.<\/li>\n\n\n\n
        • Hide on Tablet<\/strong> \u2013 It hides the Tabs block on the Tablet.<\/li>\n\n\n\n
        • Hide on Mobile<\/strong>\u00a0\u2013 It hides the Tabs block on the Mobile.<\/li>\n<\/ul>\n\n\n\n

          Advanced<\/h3>\n\n\n\n

          Under the option, you can set the CSS ID and Classes for this particular Tabs block. The available options are listed below:<\/p>\n\n\n\n

            \n
          • CSS ID<\/strong> \u2013 It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.<\/li>\n\n\n\n
          • Additional CSS Class(es)<\/strong> \u2013 It allows you to add a CSS class to your block and write custom CSS to style this particular block.<\/li>\n<\/ul>\n\n\n\n
            \"Add
            Add CSS ID and Additional CSS Class<\/figcaption><\/figure>\n\n\n\n

            After creating the separate ID and Classes, visit your CSS editor and write a style for the ID and class.<\/p>\n\n\n\n

            Tabs Titles<\/h2>\n\n\n\n

            The above setting applies to the overall Tabs Block. The plugin provides more options for customizing tab titles and layouts. The options are listed below:<\/p>\n\n\n\n

            General<\/h2>\n\n\n\n

            Layout<\/h3>\n\n\n\n
              \n
            • Preset <\/strong>– It determines the layout of the tabs. You can display it either horizontally\/ vertically with various other options available, such as underline, fill, and outline.<\/li>\n<\/ul>\n\n\n\n
              \"Horizontal
              Horizontal Outline Preset<\/figcaption><\/figure>\n\n\n\n
                \n
              • Column Gap<\/strong> – It manages the space between two tabs if placed horizontally. Moreover, you can adjust the spacing for different devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                \"Manage
                Manage Column Gap<\/figcaption><\/figure>\n\n\n\n
                  \n
                • Row Gap<\/strong> – It manages the space between two tabs if placed vertically. Moreover, you can adjust the spacing for different devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                  \"Manage
                  Manage Row Gap<\/figcaption><\/figure>\n\n\n\n

                  Icon<\/h3>\n\n\n\n

                  The features allow you to add the Icons align with the Tab title. It comes with the following option to customize the icons appearing on tab titles: <\/p>\n\n\n\n

                    \n
                  • Enable<\/strong> – Switch the Toggle to the right area to enable the Icon to the tab title on your site. Enabling the option will display the icon on the tab title.<\/li>\n<\/ul>\n\n\n\n

                    After enabling you can choose the appropriate icons from the list of icon library<\/p>\n\n\n\n

                    \"Enable
                    Enable and Choose Icon<\/figcaption><\/figure>\n\n\n\n
                      \n
                    • Icon Position<\/strong> – It sets the Icon position to be on the title’s Left, Right, Top, and Bottom.<\/li>\n\n\n\n
                    • Icon Color<\/strong> – It changes the color of the Icons. You can set different colors in Normal and Active Modes.  <\/li>\n\n\n\n
                    • Icon Size<\/strong> – It determines the size of the Icon. Moreover, you can also set the size to be different on various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                    • Icon Gap <\/strong>– It adjusts the gap between the Title and Icon. Moreover, you can adjust for different devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                      \"Tabs
                      Tabs Icon Styling<\/figcaption><\/figure>\n\n\n\n

                      Style<\/h2>\n\n\n\n

                      It provides the following styling options for the Tab Titles. These are listed below:<\/p>\n\n\n\n

                      Properties<\/h3>\n\n\n\n
                        \n
                      • Text Alignment<\/strong> – \u00a0It sets the alignments for the tab titles. You can set the alignments as Left,\u00a0Center, Right, and Justify. Moreover, you can also set the alignment position on different devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                        \"Manage
                        Manage Tab Title Alignment<\/figcaption><\/figure>\n\n\n\n

                        Text<\/h3>\n\n\n\n
                          \n
                        • Text Color<\/strong> – It changes the color of the tab title. You can set the different colors on Normal and Active Modes.<\/li>\n<\/ul>\n\n\n\n
                          \"Change
                          Change Title Text Color<\/figcaption><\/figure>\n\n\n\n

                          Background<\/h3>\n\n\n\n
                            \n
                          • Type –<\/strong> It sets the background color of the Tab Titles. You can change the background’s visual appearance by changing its color or adding an image. Moreover, you can set different background colors in Normal and Active Modes.<\/li>\n<\/ul>\n\n\n\n
                            \"Change
                            Change Title Background Color<\/figcaption><\/figure>\n\n\n\n

                            Advanced<\/h2>\n\n\n\n

                            The Advanced section consists of four customization options for the Tabs Titles.<\/p>\n\n\n\n

                            Spacing<\/h3>\n\n\n\n

                            Under the spacing section, you can find the following options available:<\/p>\n\n\n\n

                              \n
                            • Block Margin<\/strong>\u00a0\u2013 According to the site requirement, you can assign a specific margin value to the block along with units like\u00a0px,\u00a0em,\u00a0%, and\u00a0rem. Moreover, you can set different margin values for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                            • Block Padding \u2013 <\/strong>According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, <\/strong>and rem<\/strong>. Moreover, you can set different padding values for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                              \"Manage
                              Manage Title Margin and Padding Space<\/figcaption><\/figure>\n\n\n\n

                              Z-Index<\/h3>\n\n\n\n

                              It allows you to set the priority of the Title according to the site requirement.<\/p>\n\n\n\n

                              Responsive Condition<\/h3>\n\n\n\n

                              Using the option, you can enable\/disable displaying the block on various screen sizes:<\/p>\n\n\n\n

                                \n
                              • Hide on Desktop<\/strong> \u2013 It hides the Tab Title on the Desktop.<\/li>\n\n\n\n
                              • Hide on Tablet<\/strong> \u2013 It hides the Tab Title on the Tablet.<\/li>\n\n\n\n
                              • Hide on Mobile<\/strong>\u00a0\u2013 It hides the Tab Title on the Mobile.<\/li>\n<\/ul>\n\n\n\n
                                \"Enable\/Disable
                                Enable\/Disable Title Responsive Condition<\/figcaption><\/figure>\n\n\n\n

                                Advanced<\/h3>\n\n\n\n

                                Under the option, you can set the CSS ID and Classes for the Title Tab. The available options are listed below:<\/p>\n\n\n\n

                                  \n
                                • CSS ID<\/strong>\u00a0\u2013 It allows you to set specific IDs to style to the title. Once you have set the ID, you can write the CSS Code to style the title using that particular ID.<\/li>\n\n\n\n
                                • Additional CSS Class(es)<\/strong> \u2013 It allows you to add a CSS class to your block and write custom CSS to style to the title.<\/li>\n<\/ul>\n\n\n\n
                                  \"Add
                                  Add CSS ID and Additional CSS Class to Title<\/figcaption><\/figure>\n\n\n\n

                                  After creating the separate ID and Classes, visit your CSS editor and write a style for the ID and class.<\/p>\n","protected":false},"excerpt":{"rendered":"

                                  The Tabs Block is useful provided by the BlockArt Plugin. The block is useful if you want to display various content on a page in tab form so that users can access the information from the same page without navigating away from the main page. To add the tabs block on your page, select it from[…]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"doc_category":[7],"doc_tag":[],"_links":{"self":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1373"}],"collection":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/comments?post=1373"}],"version-history":[{"count":25,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1373\/revisions"}],"predecessor-version":[{"id":2750,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1373\/revisions\/2750"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=1373"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=1373"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=1373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}