{"id":1456,"date":"2024-03-24T15:46:58","date_gmt":"2024-03-24T15:46:58","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&p=1456"},"modified":"2024-04-10T08:34:12","modified_gmt":"2024-04-10T08:34:12","slug":"info","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/info\/","title":{"rendered":"Info"},"content":{"rendered":"\n

The Info block lets you add any information, such as contact, product features, address, etc, to any post or page. Using this block, you can add Icon, Title, Text, and Button within the Info Block. <\/p>\n\n\n\n

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

After you have chosen the Info block, you\u2019ll 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

Design<\/h3>\n\n\n\n
    \n
  • Preset<\/strong> \u2013 It changes the design of the Info Block. The Info Block can be displayed in various layouts depending on your requirements.<\/li>\n<\/ul>\n\n\n\n
    \"Using
    Using Layout 2 Preset Design<\/figcaption><\/figure>\n\n\n\n

    Link<\/h3>\n\n\n\n

    It allows customizing the Link added on the Info block and comes up with the following customization options:<\/p>\n\n\n\n

      \n
    • URL<\/strong> \u2013 This option is used to add the link, which will redirect the user to a specified web address or page.<\/li>\n\n\n\n
    • Open Link in a New tab <\/strong>\u2013 Switch the Toggle to the right area to open the link in a new tab. <\/li>\n\n\n\n
    • URL Content <\/strong>\u2013 It determines the clickable area of the Button and the Entire Box. If you choose the Button option, only the Button can be clicked to open the URL. However, if you choose the Entire Box, the whole info box will be clickable, and you can click on any area to open the URL.<\/li>\n<\/ul>\n\n\n\n
      \"Customize
      Customize Link for Button<\/figcaption><\/figure>\n\n\n\n

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

      Within the Info Box, you can add the icons and come up with the following options: <\/p>\n\n\n\n

        \n
      • Enable<\/strong> \u2013 Switch the Toggle to the right area to enable the Icons<\/strong> for the Info Block. Enabling the option will provide you with Icon Library through which you can choose the one appropriate for the Info box. <\/li>\n\n\n\n
      • Size – <\/strong>It determines the size of the Icon. You can also set the icon size for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
      • Border<\/strong> – It customizes the Border area added around the icon and comes with the following options:\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.<\/li>\n<\/ul>\n<\/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 for 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> \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
              \"Customize
              Customize Icon<\/figcaption><\/figure>\n\n\n\n

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

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

                \n
              • Enable<\/strong> \u2013 Switch the Toggle to the right area to enable the Title<\/strong> for the Info Block. Enabling the option will display the title inside the Info Block.<\/li>\n\n\n\n
              • HTML Markup<\/strong> \u2013 Under the Markup option, select the required markup for the title. You can set your title to be in Heading<\/strong>, Paragraph,<\/strong> or Div<\/strong>.<\/li>\n<\/ul>\n\n\n\n
                \"Customize
                Customize Title<\/figcaption><\/figure>\n\n\n\n

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

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

                Properties<\/h3>\n\n\n\n
                  \n
                • Text Alignment<\/strong>\u00a0\u2013 It sets the alignments for the Info Block. You can set the alignments as\u00a0Left<\/strong>,\u00a0Center,\u00a0<\/strong>and\u00a0Right.<\/strong>\u00a0Moreover, you can also set the alignment position on different devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                  \"Info
                  Info Block with Center Alignment<\/figcaption><\/figure>\n\n\n\n

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

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

                    \n
                  • Text Color<\/strong> \u2013 It changes the color of the Title added inside the info box.<\/li>\n\n\n\n
                  • Typography <\/strong>\u2013 It allows you to control the\u00a0Typography, such as\u00a0font family,\u00a0weight,\u00a0font size,\u00a0line height, and other related styling properties. The options are listed below:\n
                      \n
                    • Font Family<\/strong> \u2013 The option allows you to choose the appropriate Font Family for the title.<\/li>\n\n\n\n
                    • Weight<\/strong> \u2013 It refers to the thickness or boldness of the title.<\/li>\n\n\n\n
                    • Size<\/strong>\u00a0\u2013 It controls the\u00a0font size\u00a0of the title.<\/li>\n\n\n\n
                    • Line Height<\/strong> \u2013 It manages the space above and below the title.<\/li>\n\n\n\n
                    • Letter Spacing<\/strong> \u2013  It controls the amount of space between characters in the title.<\/li>\n\n\n\n
                    • Style<\/strong> \u2013 Using the property, you can set the title to be Italic or Oblique.<\/li>\n\n\n\n
                    • Transformation<\/strong>\u00a0\u2013 It changes the case of the title such as lowercase, uppercase, and capitalize.<\/li>\n\n\n\n
                    • Decoration\u00a0<\/strong>\u2013 The styling is applied to the title to make it more visually appealing. The options include underline, overline, and line through.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                      \"Change
                      Change Title Color and Typography<\/figcaption><\/figure>\n\n\n\n

                      Text<\/h3>\n\n\n\n

                      The settings work for styling the text of the Info Block and come with the following options:<\/p>\n\n\n\n

                        \n
                      • Text Color <\/strong>\u2013 It changes the color of the text added inside the info box.<\/li>\n\n\n\n
                      • Typography<\/strong> \u2013 It controls the text typography options, such as font family, font size, line spacing, text decoration, etc.<\/li>\n<\/ul>\n\n\n\n
                        \"Change
                        Change Text Color and Typography<\/figcaption><\/figure>\n\n\n\n

                        Button<\/h3>\n\n\n\n

                        It styles the Button added inside the Info Box and comes up with the following options:<\/p>\n\n\n\n

                          \n
                        • Text Color<\/strong> \u2013 It changes the color of the Button Text.<\/li>\n\n\n\n
                        • Background<\/strong> \u2013 It sets the background of the Button. You can change the visual appearance of the background by changing its color or adding an image. <\/li>\n\n\n\n
                        • Typography<\/strong> \u2013\u00a0It controls the Button text typography options, such as font family, font size, line spacing, text decoration, etc.<\/li>\n\n\n\n
                        • Border<\/strong> \u2013 It customizes the Border area added around the Button and comes with the following options:\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.<\/li>\n<\/ul>\n<\/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 for the borders.<\/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> \u2013 It allows you to choose the appropriate border color for the borders.<\/li>\n\n\n\n
                              • Size<\/strong> \u2013 It provides the option to select the border size.<\/li>\n<\/ul>\n\n\n\n
                                \"Customize
                                Customize Button Styling<\/figcaption><\/figure>\n\n\n\n

                                Background<\/h3>\n\n\n\n
                                  \n
                                • Type<\/strong> \u2013 It sets the background color of the Info Box. 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 Background Color<\/figcaption><\/figure>\n\n\n\n

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

                                  It customizes the Border area added around the Info Box 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.<\/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 for the block.<\/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> \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
                                        \"Customize
                                        Customize Border<\/figcaption><\/figure>\n\n\n\n

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

                                        The Advanced section consists of four customization options for the Info 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 \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 Info 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 Info block on the Desktop.<\/li>\n\n\n\n
                                          • Hide on Tablet<\/strong> \u2013 It hides the Info block on the Tablet.<\/li>\n\n\n\n
                                          • Hide on Mobile<\/strong>\u00a0\u2013 It hides the Info block on the Mobile.<\/li>\n<\/ul>\n\n\n\n
                                            \"Enable\/Disable
                                            Enable\/Disable 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 Info 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","protected":false},"excerpt":{"rendered":"

                                              The Info block lets you add any information, such as contact, product features, address, etc, to any post or page. Using this block, you can add Icon, Title, Text, and Button within the Info Block. After you have chosen the Info block, you\u2019ll get a block editing panel on the right-hand side. It has three[…]<\/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\/1456"}],"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=1456"}],"version-history":[{"count":38,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1456\/revisions"}],"predecessor-version":[{"id":2765,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1456\/revisions\/2765"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=1456"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=1456"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=1456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}