{"id":1383,"date":"2024-03-22T08:07:01","date_gmt":"2024-03-22T08:07:01","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&p=1383"},"modified":"2024-04-10T08:11:49","modified_gmt":"2024-04-10T08:11:49","slug":"table-of-contents","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/table-of-contents\/","title":{"rendered":"Table of Contents"},"content":{"rendered":"\n

The Table of Contents (TOC)<\/strong> Block creates a Table of Contents on your page. The block automatically recognizes the heading and lists all the headings. This will help visitors quickly navigate to specific headings of interest without the need to scroll manually below.<\/p>\n\n\n\n

\"Add
Add Table of Contents Block<\/figcaption><\/figure>\n\n\n\n

After you have chosen the Table of Contents 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
  • Heading Tags<\/strong> – By default,<\/strong> all the heading tags are displayed inside the Table of Contents. However, you can exclude the heading that does not need to be displayed inside the TOC block.<\/li>\n<\/ul>\n\n\n\n
    \"Choose
    Choose Heading Tags<\/figcaption><\/figure>\n\n\n\n
      \n
    • Width<\/strong> – It determines the width of the overall TOC block. You can adjust the width of the block with the slider available. Moreover, you can set the width to be different on various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
      \"TOC
      TOC Block When Width is Set to 45%<\/figcaption><\/figure>\n\n\n\n
        \n
      • Marker<\/strong> – You can use the marker to distinguish the heading appearing on the TOC block. You can use either the bullets or number marker types. <\/li>\n<\/ul>\n\n\n\n
        \"Using
        Using Bullet Marker Type<\/figcaption><\/figure>\n\n\n\n
          \n
        • Enable Content Collapsible<\/strong> – Enabling the option will display a hide\/show option on the TOC block. If you click on hide, it will hide all the headings appearing inside the TOC block, and clicking on show will display the headings. Basically, it expands or collapses the TOC block content.<\/li>\n<\/ul>\n\n\n\n
          \"Enable\/Disable
          Enable\/Disable Content Collapsible<\/figcaption><\/figure>\n\n\n\n
            \n
          • Icon Type <\/strong>– By default, a text Hide\/Show appears that denotes the Content Collapsible. However, you can use icons instead of text. Under the Icon Type section, you can choose between Text and Icons.<\/li>\n<\/ul>\n\n\n\n

            If you go with the text, you’ll get the following customization options:<\/p>\n\n\n\n

              \n
            • Text Size<\/strong> – It changes the font size of the text. Moreover, you can set the different font sizes on various devices (Desktop, Tablet, and Mobile) <\/li>\n\n\n\n
            • Typography<\/strong> – It allows you to control the\u00a0Typography, such as font family,\u00a0weight,\u00a0font size,\u00a0line height, and other related styling properties for the text. The options are listed below:\n
                \n
              • Font Family<\/strong> \u2013 The option allows you to choose the appropriate font family of the text.<\/li>\n\n\n\n
              • Weight<\/strong> \u2013 It refers to the thickness or boldness of the text.<\/li>\n\n\n\n
              • Size<\/strong> \u2013 It controls the font size of the text.<\/li>\n\n\n\n
              • Line Height<\/strong> \u2013 It manages the space above and below the text.<\/li>\n\n\n\n
              • Letter Spacing<\/strong>\u00a0\u2013 It controls the amount of space between characters in the text.<\/li>\n\n\n\n
              • Style<\/strong> \u2013 Using the property, you can set the text to be Italic or Oblique.<\/li>\n\n\n\n
              • Transformation<\/strong> \u2013 It changes the case of the text, such as lowercase, uppercase, and capitalize.<\/li>\n\n\n\n
              • Decoration <\/strong>\u2013 The styling is applied to make the text more visually appealing. The options include underline, overline, and line through.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                \"Content
                Content Collapsible Text Styling<\/figcaption><\/figure>\n\n\n\n

                If you choose the Icons, you\u2019ll get the following options:<\/p>\n\n\n\n

                  \n
                • Open Icon<\/strong> \u2013 It allows you to change the Open Icon<\/li>\n\n\n\n
                • Close Icon<\/strong> \u2013 It allows you to change the Close Icon.<\/li>\n\n\n\n
                • Icon Size<\/strong> \u2013 It determines the size of the social icon. Moreover, you can set the different sizes of the icon on various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                • Icon Color<\/strong> \u2013 It changes the color of the Icon. You can set the different colors on Normal and Hover Modes.<\/li>\n\n\n\n
                • Background <\/strong>\u2013 It sets the background color of the Icon. You can change the visual appearance of the background by changing its color or adding an image. Moreover, you can set the different background colors on Normal and Hover Modes.<\/li>\n<\/ul>\n\n\n\n
                  \"Content
                  Content Collapsible Icon Styling<\/figcaption><\/figure>\n\n\n\n

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

                  It provides the following styling options for the Table of Contents Block. These are listed below:<\/p>\n\n\n\n

                  Properties<\/h3>\n\n\n\n
                    \n
                  • Overall Alignment<\/strong>\u00a0\u2013 It sets the alignments for the overall TOC Block. You can set the alignments as\u00a0Left,\u00a0Center, and Right. Moreover, you can <\/strong>set the alignment position on different devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                  • Title Alignment<\/strong>\u00a0\u2013 It sets the alignments for the Title (Headings) of the TOC Block. You can set the alignments as\u00a0Left,\u00a0Center, and Right. Moreover, you can also set the alignment position on different devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                    \"Manage
                    Manage Title Alignment<\/figcaption><\/figure>\n\n\n\n
                      \n
                    • List Alignment<\/strong>\u00a0\u2013 It sets the alignments for the List (Headings) of the TOC Block. You can set the alignments as\u00a0Left,\u00a0Center, and Right. Moreover, you can also set the alignment position on different devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                      \"Manage
                      Manage List Alignment<\/figcaption><\/figure>\n\n\n\n

                      Title<\/h3>\n\n\n\n

                      The settings work for the title of the TOC Block and come with the following options:<\/p>\n\n\n\n

                        \n
                      • Title Color<\/strong> \u2013 It changes the color of the TOC Title. You can set different colors in Normal and Hover Modes.<\/li>\n\n\n\n
                      • Typography<\/strong> \u2013 It controls the TOC Title typography option, such as font family, font size, line spacing, text decoration, etc.<\/li>\n<\/ul>\n\n\n\n
                        \"Change
                        Change Title Color and Typography<\/figcaption><\/figure>\n\n\n\n

                        List<\/h3>\n\n\n\n

                        The settings work for the List items of the TOC Block and come with the following options:<\/p>\n\n\n\n

                          \n
                        • List Gap <\/strong>\u2013 It adjusts the space between two list items\/headings.<\/li>\n<\/ul>\n\n\n\n
                          \"Manage
                          Manage List Item Gap<\/figcaption><\/figure>\n\n\n\n
                            \n
                          • List Color<\/strong> \u2013 It changes the color of the List items. You can set different colors in Normal and Hover Modes.<\/li>\n\n\n\n
                          • Typography<\/strong> \u2013 It controls the List Items typography option, such as font family, font size, line spacing, text decoration, etc.<\/li>\n<\/ul>\n\n\n\n
                            \"Change
                            Change List Color Color and Typography<\/figcaption><\/figure>\n\n\n\n

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

                              Border <\/h3>\n\n\n\n

                              It customizes the Border area added around the TOC block and comes with the following options:<\/p>\n\n\n\n

                                \n
                              • Type<\/strong>\u00a0\u2013 You can set the border type as\u00a0Solid,\u00a0Dotted,\u00a0Dashed,\u00a0Double, etc. Moreover, select the border type to be\u00a0None\u00a0if you do not want to add any borders. When you select none, you will be given the following option:\n
                                  \n
                                • Radius<\/strong> \u2013 It allows you to fix the radius value to make the round corners for the border.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

                                  However, if you select the border type to be other than none, two more options will be added. The option is listed below:<\/p>\n\n\n\n

                                    \n
                                  • Border Color<\/strong>\u00a0\u2013 It allows you to choose the appropriate border-color.<\/li>\n\n\n\n
                                  • Size<\/strong> \u2013 It provides the option to select the border size.<\/li>\n<\/ul>\n\n\n\n
                                    \"Add
                                    Add and Customize Border<\/figcaption><\/figure>\n\n\n\n
                                      \n
                                    • Box Shadow<\/strong> \u2013 When you enable the Box Shadow option, you will get the following customization options:\n
                                        \n
                                      • Color<\/strong> \u2013 It allows you to select the appropriate box-shadow color for the block.<\/li>\n\n\n\n
                                      • Horizontal-X<\/strong> \u2013 It displays the box shadows in the horizontal position.<\/li>\n\n\n\n
                                      • Horizontal-Y<\/strong> \u2013 It displays the box shadows in the vertical position.<\/li>\n\n\n\n
                                      • Blur<\/strong> \u2013 You can set up the blur value of the box shadows appearing.<\/li>\n\n\n\n
                                      • Spread<\/strong> \u2013 The shadow\u2019s spread value represents the distance to expand or contract a shadow in all directions. You can change the spread value according to the site\u2019s requirements.<\/li>\n\n\n\n
                                      • Position<\/strong> \u2013 You can set the position of the box shadows as Inset<\/strong> or Outline<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

                                        Note \u2013 You can apply the border settings option differently for Normal and Hover Modes.<\/em><\/p>\n\n\n\n

                                        \"Add
                                        Add Box Shadow Effect<\/figcaption><\/figure>\n\n\n\n

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

                                        The Advanced section consists of four customization options for the TOC 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\u00a0px,\u00a0em,\u00a0%<\/strong>, and\u00a0rem. 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, %,\u00a0and\u00a0rem. Moreover, you can set different padding values for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                                          \"Adding
                                          Adding Margin and Padding Spacing<\/figcaption><\/figure>\n\n\n\n

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

                                          It allows you to set the block’s priority according to the site’s requirements.<\/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 TOC Block on the Desktop.<\/li>\n\n\n\n
                                          • Hide on Tablet<\/strong> \u2013 It hides the TOC Block on the Tablet.<\/li>\n\n\n\n
                                          • Hide on Mobile<\/strong>\u00a0\u2013 It hides the TOC Block on the Mobile.<\/li>\n<\/ul>\n\n\n\n
                                            \"Enable\/Disable
                                            Enable\/Disable TOC Block 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 TOC 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 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 the title.<\/li>\n<\/ul>\n\n\n\n
                                              \"Add
                                              Add CSS ID and Additional CSS Classes<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

                                              The Table of Contents (TOC) Block creates a Table of Contents on your page. The block automatically recognizes the heading and lists all the headings. This will help visitors quickly navigate to specific headings of interest without the need to scroll manually below. After you have chosen the Table of Contents block, you’ll get a[…]<\/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\/1383"}],"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=1383"}],"version-history":[{"count":32,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1383\/revisions"}],"predecessor-version":[{"id":2752,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1383\/revisions\/2752"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=1383"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=1383"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=1383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}