{"id":1293,"date":"2024-03-13T07:25:32","date_gmt":"2024-03-13T07:25:32","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&p=1293"},"modified":"2024-04-10T07:02:15","modified_gmt":"2024-04-10T07:02:15","slug":"heading","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/heading\/","title":{"rendered":"Heading"},"content":{"rendered":"\n

The Heading Block lets you organize your site’s headings and subheadings, introducing new sections and organizing the content on the page. Moreover, it makes the website more readable by humans and search engines.<\/p>\n\n\n\n

\"Adding
Adding Heading Block<\/figcaption><\/figure>\n\n\n\n

After you have chosen the Heading 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 Heading block. Let\u2019s explore one by one below:<\/p>\n\n\n\n

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

It provides the following customization options for the Heading Block.<\/p>\n\n\n\n

Layout<\/h3>\n\n\n\n
    \n
  • Size<\/strong> – It represents the size of the heading block. You can set the block size to small (S), medium (M), or large (L).<\/li>\n\n\n\n
  • HTML Markup<\/strong> – Under the Markup option, select the required markup for your heading. You can set your title to be in Heading<\/strong>, Paragraph,<\/strong> or Div<\/strong>.<\/li>\n<\/ul>\n\n\n\n
    \"Heading
    Heading Text Layout Setting<\/figcaption><\/figure>\n\n\n\n

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

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

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

      Background <\/h3>\n\n\n\n
        \n
      • Type<\/strong> – It sets the background color of the heading. 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
        \"Change
        Change Heading Block Background Color<\/figcaption><\/figure>\n\n\n\n

        Heading<\/h3>\n\n\n\n
          \n
        • Text<\/strong> Color<\/strong> – It changes the color of the heading block text. You can set different colors on Normal and Hover Modes.<\/li>\n\n\n\n
        • Typography<\/strong> – It allows you to control the heading text’s typography, such as font family, weight, font size, line <\/strong>height, and other related styling properties. The options are listed below:\n
            \n
          • Font Family<\/strong> – The option allows you to choose the appropriate font family for the heading text.<\/li>\n\n\n\n
          • Weight<\/strong> – It refers to the thickness or boldness of the heading text.<\/li>\n\n\n\n
          • Size<\/strong> – It controls the\u00a0font size\u00a0of the heading text.<\/li>\n\n\n\n
          • Line Height<\/strong> – It manages the space above and below the heading text.<\/li>\n\n\n\n
          • Letter Spacing<\/strong> –  It controls the amount of space between characters in the heading text.<\/li>\n\n\n\n
          • Style<\/strong> – Using the property, you can set the heading text to be Italic or Oblique.<\/li>\n\n\n\n
          • Transformation<\/strong> – It changes the case of the text, such as lowercase, uppercase, and capitalized.<\/li>\n\n\n\n
          • Decoration <\/strong>– The styling is applied to the heading text to make it more visually appealing. The options include underline, overline, and line through.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
          • Margin<\/strong> – Using the option, you can set the Margin to all four sides of the heading text, creating spaces in all four areas.<\/li>\n<\/ul>\n\n\n\n
            \"Change
            Change Heading Text Color and Typography<\/figcaption><\/figure>\n\n\n\n

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

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

              \n
            • Type<\/strong> – You can set the border type as Solid, Dotted, Dashed, Double, etc. Moreover, select None if you do not want to add borders.<\/li>\n<\/ul>\n\n\n\n

              When you select none, you will be given the following option:<\/p>\n\n\n\n

                \n
              • Radius<\/strong> \u2013 It allows you to fix the radius value to make the round corners around the border.<\/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> – It allows you to choose the appropriate border color.<\/li>\n\n\n\n
                • Size<\/strong> \u2013 It provides the option to choose the border size.<\/li>\n<\/ul>\n\n\n\n
                  \"Adding
                  Adding Border Around Heading Block<\/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> – It allows you to select the appropriate box-shadow color for the heading 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
                      \"Adding
                      Adding Box Shadow Effect Around Heading Block<\/figcaption><\/figure>\n\n\n\n

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

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

                      The Advanced section consists of four customization options for the Heading 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> \u2013 According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set different margin values for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                      • Block Padding – <\/strong>According to the site requirement, you can assign a specific padding value to the block along with units like <\/strong>px, em, %, and rem. 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 priority of the heading 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 Heading block on the Desktop.<\/li>\n\n\n\n
                        • Hide on Tablet<\/strong> \u2013 It hides the Heading block on the Tablet.<\/li>\n\n\n\n
                        • Hide on Mobile<\/strong> \u2013 It hides the Heading block on Mobile.<\/li>\n<\/ul>\n\n\n\n
                          \"Enable\/Disable
                          Enable\/Disable Heading 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 this particular Heading block. The available options are listed below:<\/p>\n\n\n\n

                            \n
                          • CSS ID<\/strong> – 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> – 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

                            For e.g., There might be two heading blocks on a page, and you want to make some changes to one but leave another untouched. In this case, you can define the CSS classes for the one heading block you want to make changes to. <\/p>\n\n\n\n

                            Moreover, you can add more than one class separately by commas.<\/p>\n\n\n\n

                            For example, if you want to change the heading color of the heading block, you can add the class heading-color<\/strong> under the Additional CSS Class field. After that, visit your CSS editor and write a style for the class as below:<\/p>\n\n\n\n

                            h2.heading-color{\ncolor:#000000;\n}<\/code><\/pre>\n\n\n\n
                            Adding the code will change only this particular Heading block.<\/p>\n\n\n\n
                            \"Adding
                            Adding Additional CSS Classes<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
                            The Heading Block lets you organize your site’s headings and subheadings, introducing new sections and organizing the content on the page. Moreover, it makes the website more readable by humans and search engines. After you have chosen the Heading block, you’ll get a block editing panel on the right-hand side. It has three options, i.e.,[…]<\/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\/1293"}],"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=1293"}],"version-history":[{"count":53,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1293\/revisions"}],"predecessor-version":[{"id":2725,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1293\/revisions\/2725"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=1293"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=1293"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=1293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}